学习参考文档：
https://developers.google.com/web/tools/chrome-devtools/remote-debugging/?hl=zh-cn#top_of_page
Ctrl + P
快速的寻找和打开你工程中的任意文件，按enter键在Sources面板上打开
Ctrl + Shift + F
在所有已加载的文件中查找一个特定的字符串
Ctrl + G
输入你想跳转的行数，轻松地跳转到代码里的任意一行
Ctrl + D
当你在Sources 标签下编辑文件时，下一个匹配项也会被选中，这能够帮助你同时编辑他们
Ctrl + Shift + J
打开 DevTools，并且定位到控制台面板，再按则关闭Dev 如果你想打开其他功能面板的同时，还想打开 Console 的话，那么可以将 Console 以 "Drawer" 的形式打开，按 esc 键打开，复按就是关闭。
Ctrl + Shift + C
打开 DevTools，并且开启审查元素模式
Ctrl + Shift + R
刷新页面并忽略缓存
Ctrl + '+'
放大 DevTools
Ctrl + '-'
缩小 DevTools
Ctrl + 0
DevTools 恢复大小
推荐使用Sources下面的左侧的Sinppets代码片段按钮，这时候点击创建一个新的片段文件，写完测试代码后把鼠标放在新建文件上run，再结合控制台查看相关信息。
Network菜单我选择了All，就会把该页面所有资源文件请求下来，如果只选择XHR异步请求资源，则我们可以分析相关的请求信息。
Profiles标签页可以查看CPU执行时间与内存占用。
Resources标签页会列出所有的资源，以及HTML5的Database和LocalStore等，你可以对存储的内容编辑和删除。
Security标签页可以告诉你这个网站的安全性，查看有效的证书
Audits标签页可以帮你分析页面性能，有助于优化前端页面，分析后得到的报告
Elements：在 Elements 面板中可以通过 DOM 树的形式查看所有页面元素，同时也能对这些页面元素进行所见即所得的编辑
Console：一方面用来记录页面在执行过程中的信息（一般通过各种 console 语句来实现），另一方面用来当做 shell 窗口来执行脚本以及与页面文档、DevTools等进行交互
Sources：Sources 面板主要用来调试页面中的 JavaScript
Performance：在 Performance 面板可以查看页面加载过程中的详细信息，比如在什么时间开始做什么事情，耗时多久等等。有人会问，这个跟上面的 Network 有什么区别呢，上面也能显示耗时信息。在 Performance 面板中，你不仅可以看到通过网络加载资源的信息，还能看到解析 JS、计算样式、重绘等页面加载的方方面面的信息
Memory：Memory 面板主要显示页面 JS 对象和相关联的 DOM 节点的内存分布情况
Application：记录网页加载的所有资源，包括存储信息、缓存信息以及页面用到的图片、字体、脚本、样式等信息
代码调试
若你想重新从某个调用方法出执行，可以右键Restart Frame， 断点就会跳到此处开头重新执行。
XHR Breakpoints
在XHR Breakpoints处，点击右侧的+号，可以添加请求的URL，一旦 XHR 调用触发时就会在 request.send() 的地方中断
DOM Breakpoints
条件断点
右键一个没有添加断点的行号，选择 "Add conditional breakpoint"，输入你的条件，当条件满足时，断点才会生效。回车后，条件断点跟一般断点的区别就是颜色变成了黄色。
断点的其他操作
忽略：如果你想暂时忽略某个断点，右键断点，选择 "Disable breakpoint" 修改：修改断点生效的条件。你可以将一个非条件断点通过这个方式修改成条件断点，也可以将条件断点变成非条件断点 删除：你可以直接点击断点，或者右键 "Remove breakpoint"
查看与修改你的值 前面讲 Scope 面板时介绍了三种查看中断状态下的变量值，还有一个隐蔽的小技巧也能查看，按 esc 按键打开 Console drawer（不清楚是什么可以看Console），然后在里面输入你想查看的值，回车，bingo~
如果你以为 Chrome DevTools 就简单看看这些值那就太小瞧她了，在中断状态下，还能动态修改变量的值。比如中断处有个变量叫 v，值是 1，如果我直接按 "Resume script execution" 的话，那么下一次的 v 也是 1，但如果我在按恢复执行按钮之前，我在 Console drawer 中输入 v = 2 回车，那么，下一处的 v 就是 2 了。
还有更厉害的，你不仅可以修改变量的值，你还可以修改代码！当程序中断时，你可以在 Sources 面板修改你的代码。
- 面板介绍 -- Watch
Watch 的好处是可以让我们同时查看多个变量。你可以通过 "+" 来添加变量，当添加的变量存在时会显示对应的值，不存在的话则会显示 "not availble"。需要注意的是，这里的变量不会随着代码的执行而发生改变，所以到了下一个状态时，你需要点击刷新按钮来获得关注的变量的新的值。
Network
在过滤面板输入框输入的关键词
domain
刷选来自特定域的请求
has-response-header
刷选 HTTP 返回值包含特定头部信息的请求
is
可以用 is:running 查看 WebSocket 资源
larger-than
筛选文件大小超过特定数字的请求，默认单位是 byte
method
刷选特定 HTTP 请求方法的请求
mime-type
刷选特定 MIME 类型的请求
mixed-content
有 mixed-content:all 和 mixed-content:displayed 两种
scheme
刷选特定 scheme 的请求
set-cookie-domain
刷选特定的 HTTP 返回头部的 set-cookie 属性的请求
set-cookie-name
也是对返回的 HTTP 头部中某个属性进行刷选的关键词
set-cookie-value
status-code
对请求的状态值进行刷选
Throttle 这个词很形象，阀门，可以用它来调节流量的速度。除此以外，你还可以自定义网络状况。
说到这，其实也就差不多了，但还有几点需要注意一下：1) 冒号后面不能有空格；2) 大小写敏感。
chrome://apps/
Postman使用
chrome://inspect/