谷歌开发者工具运行JavaScript代码

2019-2-27 23:24| 作者: admin| 查看: 940| 评论: 0|来自: 蚂蚁部落

谷歌开发者工具功能强大,不但可以通过它查看元素的样式,或者在线调试页面布局。

可以在线运行JavaScript代码片段,从而实现便捷的调试功能,非常实用。

从广义上说,谷歌开发者工具有两种运行JavaScript代码的功能,下面分别通过图示进行演示。

一.Sources面板中创建:

首先介绍一下在Sources面板中运行JavaScript代码片段。

通过此面板创建和执行小段的JavaScript代码,且可以在不同页面中执行,以当前页面为执行上下文。

创建方式截图如下:

(1).首先定位到Sources选项卡面板:

a:3:{s:3:\"pic\";s:43:\"portal/201902/27/232435p86h34nvn4h4ng6a.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

点击Sources选项卡面板,可能当前并没有我们所需要的选项。

此时可以点击红框中的双箭头,然后选中如下菜单:

a:3:{s:3:\"pic\";s:43:\"portal/201902/27/232452oevpiv7wvfl7oofe.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

选中此Snippets菜单,此英文单词翻译成汉语具有"小片"或者"片段"的意思。

可见它是专业用来创建JavaScript代码片段的,然后我们就可以创建JavaScript代码片段了。

创建方式有多种,分别如下:

(1).点击左侧靠近顶部加号+可以创建代码片段。

(2).右击空白处,弹出New,然后点击创建具有同样的效果。

进行上面任何一个操作之后,就可以在右侧创建一个可编辑区域,然后在其中编写小段JavaScript代码。

演示截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201902/27/232520fleb0rcgbbvp5p49.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

按 Command+S (Mac) 或 Ctrl+S (Windows, Linux)保存更改,根据自己的平台选择恰当方式。

上面已经创建JavaScript代码片段,下面再来介绍一下如何运行,有如下几种方式:

(1).点击右下方按钮:

a:3:{s:3:\"pic\";s:43:\"portal/201902/27/232538nvdloxliyexxrgyj.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

(2).右键,在菜单中选择相应项即可:

a:3:{s:3:\"pic\";s:43:\"portal/201902/27/232556lggfywicz7fivzwu.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通过Sources面板实现的方式很简单,不再多介绍,按照上述步骤自己练习一下即可。

上文已经提到,从广义上来说还有一种方式可以调试JavaScript代码,那么就是通过console控制台。

此种方式可能在实际中应用更加广泛,下面再来进行一下简单介绍。

二.控制运行JavaScript代码:

非常简单,点击console选项卡进入控制台面板,然后在其中写入简单的JavaScript代码即可。

代码演示截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201902/27/232613m0mfb4spopv0sx0p.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面代码声明两个变量,并求和,下面会打印出结果。

我们不但可以运行简单的JavaScript代码,还可以进行dom操作。

比如在当前页面有一个id属性值为"diy_style"的元素,那么我们可以对其进行一些简单的操作。

a:3:{s:3:\"pic\";s:43:\"portal/201902/27/232628mi8di4uptlt3bd68.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

在控制台可以向在其他普通的JavaScript环境中写代码一样。

上述代码可以获取此元素,然后将其字体颜色设置为红色,当然也可以进行其他dom操作。

上面只是进行一下简单的代码演示,以达到举一反三的效果。

谷歌控制台毕竟是一个简单的工具,没有难度,多加使用任何人都可以熟练掌握,就和使用智能手机一样。

有任何问题,可以在文章底部留言,也欢迎参阅本版块和其他版块的前端文章,也欢迎提出有益的建议与意见。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部