chrome调试

今天对chrome调试又进行了系统的学习。

Chrome调试工具developer tool技巧

把以前没有使用过的功能列举一遍。

伪类样式调试：伪类样式一般不显示出来，比如像调试元素hover的样式怎么办，看图勾选即可

颜色表示转换：用颜色的名称;以十六进制数;以RGB整数设置颜色;以RGB百分数设置颜色。Shift+click即可切换另一格式。

命令断点调试

使用“debugger;”语句在代码中加入强制断点。

需要断点条件吗？只需将它包装它在IF子句中：

if (somethingHappens) {
    debugger;
}

 

只需记住在上线前移除，另外debugger在IE下会报错。

JS代码格式化（好功能）

js 文件在上线前一般都会进行压缩, 压缩的 javascript 为一行式几乎没有可读性, 几乎无法设定断点. 在 Sources 面板下面（先在Elements打开某个js）有个 Pretty print 按钮(这种符号 {}), 点击会将压缩 js 文件格式化缩进规整的文件, 这时候在设定断点可读性就大大提高了。一秒钟由一行变成人类可读的多行式代码，再也不用粘贴到sublime再Jsformt调整格式了。

Chrome 32 的开发者工具支持 CSS 格式化功能 ：http://t.cn/zRUVHXc

查看元素绑定的事件

在 Elements 面板, 选中一个元素, 然后在右侧的 Event Listeners（被隐藏时点击箭头可展开） 下面会按类型出这个元素相关的事件, 也就是在事件捕获和冒泡阶段会经过的这个节点的事件。

在 Event Listeners 右侧下拉按钮中可以选择 Selected Node Only 只列出这个节点上的事件展开事件后会显示出这个事件是在哪个文件中绑定的, 点击文件名会直接跳到绑定事件处理函数所在行, 如果 js 是压缩了的, 可以先 Pretty print 下, 然后再查看绑定的事件。

Ajax 时中断

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

页面事件中断

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

Javascript 异常时中断

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

实时修改 js 代码生效

• 页面外部 js 文件在 Scripts 面板中可以直接修改, 改完后按 ctrl + S 保存, 会立即生效，一般用这个实时的在代码里插 console.log
• 注意
  • 经测试不支持 html 页面中 js 修改
  • 经过 Pretty print 格式化的脚本不支持修改

console 中执行的代码可断点

在 console 中输入代码的最后一行加上 //@ sourceURL=filename.js, 会在 Scripts 面板中有个叫 filename.js 的文件, 然后他就和外部 js 文件一样了，又可以断点调试了（如果没发现，可以再调试面板中CTRL+O，输入文件名即可）。

• • 

    

  • 调用栈分析

    这个非常常用，Sources 面板下右上角的那一部分，可以试试查看变量的内容，结合断点调试最佳。方法是在source面板中，选择某个变量，右键选择“Add to watch”。（点击JS代码的左侧行数可添加和删除断点）

    

寻找bug

以线上代码出 Bug 为例。一般上手第一步是使用代码格式化功能将被压缩的线上代码展开，然后开启自动异常断点，尝试重现 Bug。当 Bug 出现时代码会自动断到出错的那一行。然后通过调用栈分析结合控制台找到最开始出错的那个函数上。一般的 Bug 到这里就算找出来了，但是如果这个 Bug 是在事件回调函数或者 XHR 回调函数上，就得结合 DOM 事件断点和 XHR 断点 进一步往上找哪个函数出错。另外，如果是发给服务器请求没有得到正确的 response，可以通过 Network 面板查看请求的参数、Cookie、HTTP 头是否有误。
另外，还可以通过 Charles/Nginx/Fiddler 等工具将远程 js 代码映射到自己的电脑上，免去了代码格式化的麻烦，还可以直接编辑。

chrome调试工具常用功能整理

1、

• 拖拽节点, 调整顺序
• 拖拽节点到编辑器

2、

每个事件会有对应的几个属性 handler, isAtribute, lineNumber, listenerBody, sourceName, type, useCapture

• 
• handler是处理函数, 右键可以看到这个函数定义的位置, 一般 js 库绑定事件会包一层, 所以这里很难找到对应handler
• isAtribute 表明事件是否通过 html 属性(类似onClick)形式绑定的
• useCapture 是 addEventListener 的第三个参数, 说明事件是以 冒泡 还是 捕获 顺序执行

代码断点

• 设置断点
  • 在 Sources 面板 js 文件行号处设置断点, 这里除了常规断点外, 还有个条件断点(右键 conditional breakpoint), 在设置的条件为 true 时才会断电, 在循环中需要断点时比较有用.
  • 断点后可以查看 堆栈, 变量 信息:

断点后的变量保存到全局

• 选中变量, 右键 Evalute in console
• 在 console 中选中输出的内容, 右键 store as global variable

几个常用的断点快捷键:

• F8: 继续执行
• F10: step over, 单步执行, 不进入函数
• F11: step into, 单步执行, 进入函数
• shift + F11: step out, 跳出函数
• ctrl + o: 打开文件
• ctrl + shit + o: 跳到函数定义位置
• ctrl + shift + f: 所有脚本中搜索

即使当前页面没有加载jQuery，你也依然可以使用$和$$函数来选取元素，实际上，这两个函数只是对document.querySelector()和document.querySelectorAll()的简单封装，$用于选取单个元素，$$则用于选取多个：

除了$_，你还可以使用$0,$1,$2,$3,$4这5个变量来引用最近选取过的5个DOM元素。 $0 为Elements HTML 面板中选中的元素。 $1 为上一次在 HTML 面板中选中的元素。 $2、$3、$4 同样的。不过只能到$4