如何调试js谷歌浏览器调试javascript教程

谷歌浏览器是由谷歌公司开发的浏览器。谷歌浏览器基于其他开源软件。下面小编将分享一个关于谷歌浏览器调试javascript的教程，希望对大家有所帮助

首先，让我们打开开发工具。可以右键点击页面，然后选择评论元素或者在Chrome工具中找到或者直接记住这个快捷键：Ctrl Shift I(或者Ctrl Shift J直接打开控制台)，或者直接按F12。

打开的开发人员工具如下所示。建议您将开发人员工具作为独立窗口弹出：

1.元素选项卡

这是为了查看和编辑页面上的元素，包括HTML和CSS:

在左侧，您可以查看和编辑页面的HTML结构。你可以直接双击一个元素来修改该元素的属性，也可以右键单击它；编辑为Html直接编辑一个元素的HTML，或者删除一个元素，所有的修改都会立即呈现在页面上。(注：见上图右键菜单最后一个选项；你看过元素了吗？这是否意味着这个开发工具的页面也来自HTML？点一下就知道了，呵呵)

您还可以监视元素，当JS修改元素的属性或HTML时，直接触发断点并跳转到修改修改元素的JS代码：

在“元素”选项卡的右侧，您可以查看、编辑和修改元素的CSS:

您还可以在这里看到CSS选择器设置的CSS值的覆盖范围。

以下指标可以查看元素占用的空间(宽度、高度、填充、边距)

你注意到上面的属性了吗？这非常有用。它可以让你看到元素的方法和属性，比查API手册方便多了(注意IE、FireFox等浏览器中一些方法和属性的支持)。

2.资源选项卡

在资源选项卡上，您可以查看请求的资源，包括CSS、JS、图片等。同时，还可以查看与存储相关的内容，如Cookies、HTML5 Database和LocalStore等。您可以编辑和删除存储的内容。

这里的CSS文件有一个好玩的功能，可以直接修改CSS文件，修改后立即生效：

3.网络选项卡

“网络”选项卡对于分析网站请求的网络情况、查看请求的请求头、响应头和响应内容非常有用，尤其是在查看Ajax请求时。请注意，在您打开Chrome开发工具后启动的请求将显示在这里。

单击左侧的特定请求网址，查看请求的详细HTTP请求状态：

我们在这里可以看到HTTP请求头、HTTP响应头以及HTTP返回的内容等信息，对于开发调试非常有用。

4.脚本选项卡

显然，这个选项卡是用来查看JS文件和调试JS代码的。直接见下图描述：

您可以打开Javascript控制台，进行一些其他查看或修改：

您甚至可以为XHR请求或事件设置断点：

5.时间轴选项卡

请注意，此时间轴选项卡不是指网络请求的时间响应(这在网络选项卡中查看)，此时间轴是指JS执行时间和页面元素呈现时间：

单击底部的记录，开始记录页面上执行的内容。

6.配置文件选项卡

这主要是为了性能优化，包括检查CPU执行时间和内存占用情况：

7.审计选项卡

这对于优化前端页面，加快网页加载速度(相当于Yslow)非常有用：

点击运行按钮，可以启动分析页面，分析后可以看到分析结果

它甚至可以分析页面样式表中哪些CSS没有被使用：

8.控制台选项卡

是Javascript控制台：

除了查看错误消息、打印调试信息(console.log())和编写一些测试脚本之外，这也可以作为Javascript API来查看。

例如，我想看看控制台中有哪些方法和属性，我可以直接在控制台中输入它们。并执行：

嗯，一目了然吗？再举一个例子，我想看看日期函数有哪些方法：

(注意：注意这里看到的一些方法和属性在ES5中是新的。记住要兼容其他浏览器的支持。)

谷歌Chrome简单快捷，现在Chrome插件非常丰富。就网页开发者而言，Chrome支持HTML5、CSS3等一些新标准。而且我个人认为Chrome的开发者工具真的很好用，这也是我向web开发者推荐Chrome的原因。

更大的

0