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

相关文章

    共享到: