WebKit Inspector调试工具

转自:http://www.leonzhang.com/2012/04/24/webkit-inspector/

Chrome Canary是Chrome最新的开发版本,几乎天天更新.可以和Chrome稳定版本共存.

打开inspector窗口

• CMD+J or Ctrl+Shift+J in Windows, CMD+Alt+J in OSX

tips

单击右下角的设置按钮，进入设置界面，可以把inspector窗口调成Dock to Right，在宽屏下比较舒服

通过URL直接创建页面内容

data:text/html,<b>ZOMG I AM BOLD!?!!?</b>

快捷键帮助

在Elements Panel按?会显示快捷键

console

• 使用shift + enter可以输入多行代码
• 内置全局对象
  • $(), 通过ID查找DOM节点, 同document.getElementById()
  • $$(), 通过CSS selector查找DOM节点,同document.querySelectorAll()
  • $0, 当前页上的正在被查看(inspect)的元素
  • keys(), 返回某个对象的所有key,不包括从prototype继承来的.同object.keys
  • values(), 返回某个对象的所有value,不包括从prototype继承来的.同object.values
  • clear(), 清空console
  • inspect(), 查看(inspect)某个对象

Elements Panel

• Break on Subtree Modifications/Break on attributes Modifications/Break on node removal 子节点内容、属性被修改试、被移除时触发断点。调试代码.应该很有用.

Network Panel

• 蓝线是DOMContent ready事件触发时间. 页面设计时,这个时间应该越短越好.
• 橙线是window load事件触发时间
  

Scripts Panel

• {} 按钮能够Pretty print方式显示javascript, 这对那些做了压缩的javascript特别有用
• Pause 按钮有三种状态:
  1. Don’t pause on exceptions
  2. Pause on all exceptions
  3. Pause on uncaught exceptions
• 文件浏览
  1. CMD+O, open up a TextMate-style “Go-to-File” popover that lets you quickly jump to a file
  2. CMD + Shift+ O, open up a “Go-to-Symbol” popover that lets you quickly jump to a symbol in the current file
  3. CMD + L, will let you jump to a specific line

• 设置断点
  • 支持Call Stack
  • Edit Breakpoint支持设置条件断点

    

  • XHR Breakpoints可以根据URL设置断点

  • 在Scope Variablessection里, 可以右键,选择Jump to Definition跳转到函数定义的位置

Timeline Panel

• 点击Record按钮以后,会记录浏览器的各种内部操作消耗的时间和内存, 对于调试页面性能非常有效.

  

• 可以Save Timeline data,保持格式是JSON.但是点击Load Timeline data时什么反应都没有,我哪里搞错了?

Profiles Panel

• JavaScript CPU Profiler 可以定位那些js最耗时
• CSS Selector Profiler 可以定位那些css选择器的性能有问题
• Heap Snapshot 可以定位数组/对象/字符串等使用内存的情况

Audits Panel

• 这个有点类似YSlow, 分析当前页面, 并给出修改建议. 例如合并js/优化cache/删除用不到的css选择器等.
• 产品上线前应该用这个工具检测一下.

参考

1. http://jtaby.com/2012/04/23/modern-web-development-part-1.html
2. https://developer.mozilla.org/en/Using_the_Web_Console