我是 chrome 党

F12 打开【开发者工具】

Elements Dom元素标签

• 此标签下显示Dom树
  一般在这里分析网页结构，还可以动态编辑

Elements下的子标签

• Styles：样式调试
• Computed： 盒子模型
• Event Listeners：事件列表，当前页所有事件
• DOM Breakpoints：Dom断点。在dom树中右键可以从break on断点节点变化事件
  • subtree modifications：子节点变化事件
  • attribute modifications：属性变化事件
  • node removal：节点移除事件
• Properties：所选节点的属性

Console 命令行标签

所有标签下按【esc】 可以显示隐藏 【console】
就是命令行，没啥了。随便嗨皮吧。
Console右上角有个齿轮可以打开console设置。里面有保存日志之类的设置如Preserve log。

Sources 源代码标签

这里可以断点JS平时调试代码主要就在这里了，常规debug功能都有了。
比如右侧列出了各种类型的断点，变量信息等。

• 【Event Listener Breakpoints】
  这下面列出了所类型的事件，有时引用了别的库，不知道事件处理方法在哪里。此处打断点就方便找了。`
• 【Add conditional breakpoint】
  代码行上右键，添加条件断点，只有满足条件时才生效。（已有的断点也可以右键添加条件）

Network 网络标签

查看分析网络请求信息在这里。

Application 应用标签

这里可以查看，缓存，Frames层级等信息。(Frames下清晰的列出了页面的相关文件)

其他命令

Ctrl + P

可以方便的查看并打开 js

Ctrl + Shift + P

Ctrl + Shift + P 开发者工具的各种面板、执行各种命令。（在它的下来面板里有提示）

• 代码覆盖率

输入 show coverage 显示coverage标签，用于查看代码覆盖率。简单的说就是看下你写的那么多东西，到底那些地方都跑到了。修改多次的代码，难免产生废物，想清理一下么？

• 页面重绘检查

这是个开关命令。只要输入flash然后选择命令就行了。

• CSS动画检视

animations

• 页面元素截图

• 黑盒调试

屏蔽掉某些引用库的js以便专注调试自己的逻辑代码

也可以从这里打开：

• F12打开开发者工具，再F1打开设置
• 找到Blockboxing 添加过滤规则
  
  【sources】标签下打开的【js】文件中右键，也可以完成【black】操作

Chrome IDE

chrome 31 开始的功能

• 本地建立一个文件夹
• 添加文件夹 (然后source 就可以当IDE用了)