2014-06-25 14:36 | 题主 | ||||||||
|
使用Chrome作WebBuiler的开发和调试环境非常好,使用Chrome Developer Tools的技巧。 Chrome有很多优点:高性能、调试方便、界面简洁等,很适用做WebBuilder在开发阶段的调试开发环境。 1.实时修改 js 代码生效 在 Scripts 面板中可以直接修改脚本代码, 会立即生效. 2. Beautify Javascript js 文件在上线前一般都会压缩下, 压缩的 javascript 几乎没有可读性, 几乎无法设定断点. 在 Scripts 面板下面有个 Pretty print 按钮(这种符号 {}), 点击会将压缩 js 文件格式化缩进规整的文件, 这时候在设定断点可读性就大大提高了. 3. 查看元素绑定了哪些事件 在 Elements 面板, 选中一个元素, 然后在右侧的 Event Listeners 下面会按类型出这个元素相关的事件, 也就是在事件捕获和冒泡阶段会经过的这个节点的事件. 在 Event Listeners 右侧下拉按钮中可以选择 Selected Node Only 只列出这个节点上的事件 展开事件后会显示出这个事件是在哪个文件中绑定的, 点击文件名会直接跳到绑定事件处理函数所在行, 如果 js 是压缩了的, 可以先 Pretty print 下, 然后再查看绑定的事件. 4. Ajax 时中断 在 Scripts 面板右侧有个 XHR Breakpoints, 点右侧的 + 会添加一个 xhr 断点, 断点是根据 xhr 的 url 匹配中断的, 如果不写匹配规则会在所有 ajax, 这个匹配只是简单的字符串查找, 发送前中断, 在中断后再在 Call Stack 中查看时那个地方发起的 ajax 请求 5. 页面事件中断 除了给设定常规断点外, 还可以在某一特定事件发生时中断(不针对元素) , 在 Scripts 面板右侧, 有个 Event Listener Breakpoints, 这里列出了支持的所有事件, 不仅 click, keyup 等事件, 还支持 Timer(在 setTimeout setInterval 处理函数开始执行时中断), onload, scroll 等事件. 6. Javascript 异常时中断 Pretty print 左侧的按钮是开启 js 抛异常时中断的开关, 有两种模式:在所有异常处中断, 在未捕获的异常处中断. 在异常处中断后就可以查看为什么抛出异常了 7. DOM Level 3 Event 事件中断 在 Elements 面板, 选中一个元素右键, 有两个选项:Break on subtree modifications, Break on attributes modifications, 这两个对应 DOM Level 3 Event 中的DOMSubtreeModified , DOMSubtreeModified 事件 在 Scripts 面板 DOM Breakpoints 处会列出所有 level3 的 event 中断 8. 所有 js 文件中搜索&查找 js 函数定义 在 chrome developer tool 打开的情况下, 按 ctrl + shift + F, 在通过 js 钩子查找代码位置时很有用, 查找支持正则表达式 |
2014-06-25 14:47 | #1 | ||||||||
|
谢谢@tulip的分享 |
2014-06-25 15:56 | #2 | ||||||||
|
Chrome最好,Firefox次之,IE的调试工具最不好用了 |
2014-06-26 15:30 | #3 | ||||||||
|
必须顶!! |
2014-06-30 13:12 | #4 | ||||||||
|
收藏一下! |