转自:http://www.leonzhang.com/2012/04/24/webkit-inspector/
Chrome Canary是Chrome最新的开发版本,几乎天天更新.可以和Chrome稳定版本共存.
打开inspector窗口
-
CMD+J
orCtrl+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
按钮有三种状态:- Don’t pause on exceptions
- Pause on all exceptions
- Pause on uncaught exceptions
- 文件浏览
-
CMD+O
, open up a TextMate-style “Go-to-File” popover that lets you quickly jump to a file -
CMD + Shift+ O
, open up a “Go-to-Symbol” popover that lets you quickly jump to a symbol in the current file -
CMD + L
, will let you jump to a specific line
-
- 设置断点
- 支持
Call Stack
-
Edit Breakpoint
支持设置条件断点 -
XHR Breakpoints
可以根据URL设置断点 - 在
Scope Variables
section里, 可以右键,选择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选择器等.
- 产品上线前应该用这个工具检测一下.