chrome开发者工具使用


本文转自http://ued.taobao.org/blog/2012/06/debug-with-chrome-dev-tool/以及/article/4658664.html

查看元素绑定了哪些事件

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

在 Event Listeners 右侧下拉按钮中可以选择 Selected Node Only 只列出这个节点上的事件（在我所使用的chrome版本，是通过将Ancestors和Framework Listeners两个checkbox取消选中来实现的）。展开事件后会显示出这个事件是在哪个文件中绑定的, 点击文件名会直接跳到绑定事件处理函数所在行。

页面事件中断

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

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

在 chrome developer tool 打开的情况下, 按 ctrl + shift + F, 在通过 js 钩子查找代码位置时很有用, 查找支持正则表达式

查找函数定义: ctrl + shift + 0 (在 Scripts panel 下)

查找文件: ctrl + o (在 Scripts panel 下)

更多快捷键: 在 chrome developer tool 中按 ? 查看帮助

实时修改 js 代码生效

页面外部 js 文件在 Scripts 面板中可以直接修改, 改完后按 ctrl + S 保存, 会立即生效

注意

经测试不支持 html 页面中 js 修改

经过 Pretty print 格式化的脚本不支持修改

console 中执行的代码可断点

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

比如在console面板中代码如下：

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

则会在sources面板出现一名为hello的js文件，在该文件中，同样可以设置断点。

Elements标签页

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

你还可以对某个元素进行监听，在JS对元素的属性或者HTML进行修改的时候，直接触发断点，跳转到对改元素进行修改的JS代码处：



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



你还可以通过这里看到各CSS选择器设置的CSS值的覆盖情况。

下面的Metrics可以看到元素占的空间情况（宽、高、Padding、Margin神马的）：



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

Network标签页

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

点击左侧某一个具体去请求URL，可以看到该请求的详细HTTP请求情况：



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