1. 元素右键 【Elements】
   （1）强制元素4种状态：focus、hover、active、visited（下方style的箭头小方块也可以）
   （2）复制路径：CSS路径；XPath路径
   （3）设置断点：子元素修改、修改属性、删除元素
2. Pretty print 按钮(符号{})：“格式化缩进”压缩的js文件
   【Sources】下的 js 文件
3. 查看元素绑定了哪些事件
   【Elements】面板下的“Event Listeners”：按类型列出元素的相关事件（捕获和冒泡阶段会经过的这个节点的事件）
4. 查找
   （1）所有js文件中搜索&查找js函数定义：ctrl + shift + F
   （2）查找函数定义：ctrl + shift + 0
   （3）查找文件：ctrl + o
5. command line API
   （1）$(id) 与页面是否有jQuery无关
   （2）$0,$1,$2,$3,$4：Elements 面板最近选中的5个元素，最新的是 $0
   更多 console API：console.log()
   更多 command line API：
6. 【Resources】页面的资源
   （1）请求的资源情况：字体、图片、脚本文件、样式文件
   （2）存储相关：Cookies、HTML5的Database、Local Storage
   你可以对存储的内容编辑和删除。
7. 【Timeline】：JS执行时间、页面元素渲染时间

1. Chrome 的 workspace：
   能够在开发者工具中调试修改 js|css、同时自动保存文件，从而提高开发效率。
   避免在工具中调试好，再在编辑器中修改同样的操作
2. 【Profiles】性能分析
3. 仿真测试：

1. Ajax 时中断 【？？】
2. console 中执行的代码可断点 【？】
   最后一行加上 //@ sourceURL=filename.js,
   会在 Scripts 面板中有个叫 filename.js 的文件, 然后他就和外部 js 文件一样了
3. top frame

1. Elements
2. Network：分析网站请求的网络情况、查看某一请求的请求头和响应头
3. Console

参考：
chrome developer tool调试技巧：ued.taobao.org
Chrome workspace：isux.tencent.com

https://developer.chrome.com/devtools/docs/console
https://developers.google.com/chrome-developer-tools/

console对象： 阮一峰的博客书
教程：调试：里面有靠谱的更多链接…