Chrome调试

最新推荐文章于 2025-02-24 17:02:19 发布

原创最新推荐文章于 2025-02-24 17:02:19 发布 · 8.3k 阅读

6 ·

CC 4.0 BY-SA版权

dojo 专栏收录该内容

6 篇文章

订阅专栏

https://developers.google.com/chrome-developer-tools/?hl=zh-CN&csw=1

另外还有许多的扩展工具很好用，关注chrome应用商店

怎样打开Chrome的开发者工具？

你可以直接在页面上点击右键，然后选择审查元素：

或者在Chrome的工具中找到：

或者，你直接记住这个快捷方式： Ctrl+Shift+I (或者Ctrl+Shift+J直接打开控制台)，或者直接按F12。

打开的开发者工具就长下面的样子：

不过我一般习惯与点左下角的那个按钮，将开发者工具弹出作为一个独立的窗口：

下面来分别说下每个Tab的作用。

Elements标签页

这个就是查看、编辑页面上的元素，包括HTML和CSS：

左侧就是对页面HTML结构的查看与编辑，你可以直接在某个元素上双击修改元素的属性，或者你点右键选"Edit as Html"直接对元素的HTML进行编辑，或者删除某个元素，所有的修改都会即时在页面上得到呈现。（注：看到上面右键菜单的最后一个选项"审查元素"了么？这是不是说明这个开发者工具的页面也是HTML来的呢？你点一下就知道了哦，嘿嘿）
你还可以对某个元素进行监听，在JS对元素的属性或者HTML进行修改的时候，直接触发断点，跳转到对改元素进行修改的JS代码处：

Elements标签页的右侧可以对元素的CSS进行查看与编辑修改：

你还可以通过这里看到各CSS选择器设置的CSS值的覆盖情况。
下面的Metrics可以看到元素占的空间情况（宽、高、Padding、Margin神马的）：

注意到上面的Properties没有？这个很有用哦，可以让你看到元素具有的方法与属性，比查API手册要方便得多哦（要注意某些方法和属性在IE、FireFox等其他浏览器下面的支持情况哦）。

Resources标签页

Resources标签页可以查看到请求的资源情况，包括CSS、JS、图片等的内容，同时还可以查看到存储相关的如Cookies、HTML5的Database和LocalStore等，你可以对存储的内容编辑和删除。
这里的CSS文件有一个好玩的特性，你可以直接修改CSS文件，并且修改即时生效哦：

Network标签页

Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用，特别是在查看Ajax类请求的时候，非常有帮助。注意是在你打开Chrome开发者工具后发起的请求，才会在这里显示的哦。
点击左侧某一个具体去请求URL，可以看到该请求的详细HTTP请求情况：

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

Scripts标签页

很明显，这个标签页就是查看JS文件、调试JS代码的，直接看下图的说明：

还有你可以打开Javascript控制台，做一些其他的查看或者修改：

你甚至还可以为某一XHR请求或者某一事件设置断点：

Timeline标签页

注意这个Timeline的标签页不是指网络请求的时间响应情况哦（这个在Network标签页里查看），这个Timeline指的JS执行时间、页面元素渲染时间：

点击底部的Record就可以开始录制页面上执行的内容。（这个不熟悉，请参考文末链接）

Profiles标签页

这个主要是做性能优化的，包括查看CPU执行时间与内存占用：

这个也不熟悉，不多说，还是请参考文末链接吧。

Audits标签页

这个对于优化前端页面、加速网页加载速度很有用哦（相当与Yslow）：

点击run按钮，就可以开始分析页面，分析完了就可以看到分析结果了：

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

Console标签页

就是Javascript控制台了：

这个除了查看错误信息、打印调试信息（console.log()）、写一些测试脚本以外，还可以当作Javascript API查看用。
例如我想查看console都有哪些方法和属性，我可以直接在Console中输入"console"并执行：

怎么样，一目了然了吧？再例如我想查看日期函数都有哪些方法：

（注：注意在这里看到的某些方法和属性是ES5新增的，记得兼容其他浏览器的支持情况哦）

结语

Google Chrome除了简洁、快速，现在的Chrome的插件也非常的丰富了。而对于web开发者来说，Chrome对于HTML5、CSS3等一些新标准的支持也是比较完善的，而且Chrome的开发者工具我个人认为真的非常好用，这就是为什么我向web开发者推荐使用Chrome的原因。

注1：本文截图的Chrome版本为：13.0.782.215 m
注2：Chrome开发者工具更详细的说明请参考：http://code.google.com/intl/zh-CN/chrome/devtools/docs/overview.html
注3：本文原来想定的标题是：给那些因为Firebug而舍不得FireFox的朋友

其他调试技巧：

1. Beautify Javascript

js 文件在上线前一般都会压缩下, 压缩的 javascript 几乎没有可读性, 几乎无法设定断点. 在 Scripts 面板下面有个 Pretty print 按钮(这种符号 {}), 点击会将压缩 js 文件格式化缩进规整的文件, 这时候在设定断点可读性就大大提高了.

2. 查看元素绑定了哪些事件

在 Elements 面板, 选中一个元素, 然后在右侧的 Event Listeners 下面会按类型出这个元素相关的事件, 也就是在事件捕获和冒泡阶段会经过的这个节点的事件.

在 Event Listeners 右侧下拉按钮中可以选择 Selected Node Only 只列出这个节点上的事件

展开事件后会显示出这个事件是在哪个文件中绑定的, 点击文件名会直接跳到绑定事件处理函数所在行, 如果 js 是压缩了的, 可以先 Pretty print 下, 然后再查看绑定的事件.

3. Ajax 时中断

在 Scripts 面板右侧有个 XHR Breakpoints, 点右侧的 + 会添加一个 xhr 断点, 断点是根据 xhr 的 url 匹配中断的, 如果不写匹配规则会在所有 ajax, 这个匹配只是简单的字符串查找, 发送前中断, 在中断后再在 Call Stack 中查看时那个地方发起的 ajax 请求

4. 页面事件中断

除了给设定常规断点外, 还可以在某一特定事件发生时中断(不针对元素) , 在 Scripts 面板右侧, 有个 Event Listener Breakpoints, 这里列出了支持的所有事件, 不仅 click, keyup 等事件, 还支持 Timer(在 setTimeout setInterval 处理函数开始执行时中断), onload, scroll 等事件.

5. Javascript 异常时中断

Pretty print 左侧的按钮是开启 js 抛异常时中断的开关, 有两种模式：在所有异常处中断, 在未捕获的异常处中断. 在异常处中断后就可以查看为什么抛出异常了

6. DOM Level 3 Event 事件中断

在 Elements 面板, 选中一个元素右键, 有两个选项：Break on subtree modifications, Break on attributes modifications, 这两个对应 DOM Level 3 Event 中的DOMSubtreeModified , DOMSubtreeModified 事件在 Scripts 面板 DOM Breakpoints 处会列出所有 level3 的 event 中断

7. 所有 js 文件中搜索&查找 js 函数定义

在 chrome developer tool 打开的情况下, 按 ctrl + shift + F, 在通过 js 钩子查找代码位置时很有用, 查找支持正则表达式
查找函数定义: ctrl + shift + o (在 Scripts panel 下)
查找文件: ctrl + o (在 Scripts panel 下)
更多快捷键: 在 chrome developer tool 中按 ? 查看帮助

8. command line api

$(id_selector) 这个与页面是否有 jQuery 无关
$$(css_selector)
$0, $1, $2, $3, $4
1. Elements 面板中最近选中的 5 个元素, 最后选择的是 $0
2. 这个 5 个变量时先进先出的
copy(str) 复制 str 到剪切板, 在断点时复制变量时有用
monitorEvents(object[, types])/unmonitorEvents(object[, types])
1. 当 object 上 types 事件发生时在 console 中输出 event 对象
更多 console api 请 console.log(console) 或点击
更多 command line api 点击

9. 实时修改 js 代码生效

页面外部 js 文件在 Scripts 面板中可以直接修改, 改完后按 ctrl + S 保存, 会立即生效
注意
1. 经测试不支持 html 页面中 js 修改
2. 经过 Pretty print 格式化的脚本不支持修改

10. console 中执行的代码可断点

在 console 中输入代码的最后一行加上 //@ sourceURL=filename.js, 会在 Scripts 面板中有个叫 filename.js 的文件, 然后他就和外部 js 文件一样了

function hello() {
  alert('say hi');
}
//@ sourceURL=hello.js