1. 快捷键：
- 切换面板位置：
ctrl shift D - 切换面板类型：
ctrl [向左，ctrl ]向右 - 切换手机/PC模式：
ctrl shift M - 切换审查元素模式/浏览器窗口：
ctrl shift C - 打开命令面板：
ctrl shift P
2. 截图：
ctrl shift P 打开命令面板，搜索 screen 可进行各类截图，包括节点截图、区域截图和全屏截图
3. 调试：
3.1 复制和存储
copy()：拷贝数据store as global variable：拷贝一份独立的数据并作为全局变量save as...：保存报错的堆栈信息作为 log 文件，而不是单纯的截图
3.2 代码块保存和复用
如果经常需要在控制台中调用某段代码块，可以考虑把它保存起来以便复用。source --> snippets --> New snippet 新建代码块并保存。这不会随着缓存清除而消失。
3.4 节点引用
$0是对当前选中节点的引用，$1是相对于$0的上一个被选中节点，以此类推，$2到$4同理。$(...)：这里注意和 jquery 中的$(...)是不一样的。例如，jq 中的$('div')可以选中所有 div 元素，而控制台中的$('div')则类似于document.querySelector('div')，只能匹配第一个 div。$$(...)：类似于document.querySelectorAll('div')，可以匹配所有的 div。区别在于，它可以确切返回一个数组，而不是Node list。$_：要查看上一次执行的结果，可以通过键盘上下箭头重新执行一遍代码，也可以直接$_进行打印。它是对上一次执行结果的引用。
3.5 监听元素状态改变：
右键目标元素，选择 break on 的触发条件：
subtree modifications：当前节点的子节点被 移除 或者 添加 时触发断点attribute modifications：当前节点的任意属性被 添加，移除 或者 修改 时触发断点node removal：当前节点被 移除 时触发断点
3.6 console.log 的坑
代码语言：javascript复制let person = {
name:'Jack',
job:'worker'
};
console.log(person);
person.name = 'John';
console.log(person);在使用 console.log() 打印对象的时候，需要注意它打印的是那时的快照（snapshot），所以在未展开对象的时候，打印结果符合我们的预期：
但是在展开对象后，浏览器会重新读取引用的对象本身的属性，故此时两次打印的属性都同步为最近更新的属性值：
注意这和异步同步无关。
3.7 更好的打印
带条件判断的 console.log() 可以用 console.assert() 来代替，它会在第一个参数为假值时，打印第二个参数的内容：
将变量名放在花括号中整体打印出来，变量与变量值的对应关系会更加清晰：
console.table() 可以以表格形式打印数组：
也可以以表格形式打印对象。这里以类数组对象为例：
当然这两者还可以结合起来，将一组变量直观地打印出来。
console.dir 可以将 dom 元素以 js 对象而不是 HTML 的形式打印出来：
还可以开启 log 的时间戳：
F12 --> ctrl shift P --> show timestamps
3.8 结构和样式调节
- 在元素面板中可以通过拖动、
ctrl x等直接操作 HTML 结构 - 在样式面板中可以通过点击阴影方块便捷地调节阴影效果
3.9 源文件修改同步到本地文件（持久化保存）：
Sources —> Filesystems —> Add folder to workspace
点击样式面板中的 可以添加新的样式规则，新增的样式规则默认放在一个单独的 CSS 文件中，可以长按 决定它的书写位置。
4. 真机调试
有时候，Chrome 模拟手机调试的结果不一定准确，这时候就需要用到真机调试了。真机调试允许开发者通过 Chrome Devtools 直接调试手机上的页面，我们需要的只是在 PC 和手机上安装 Chrome 浏览器，并准备一根数据线。
首先用数据线将 PC 和手机连接起来，并打开手机的开发人员选项，接着打开 PC Chrome 的 chrome://inspect/#devices 页面：
将手机维持在浏览器页面，试着打开百度：
点击 inspect 会打开一个新窗口，在这里可以进行调试：
所有的操作会同时同步在 PC 端和手机端的页面上。
还有一种情况是调试本地文件，这时候需要使用 Port forwarding 端口转发功能。端口转发的前提是我们需要在本地开启一个服务器，对于平常写的 demo，用 live sever 插件或者 Node.js 开启一个服务器就好了。因为 Hexo 博客本身提供了本地服务器，我这里拿它示例。
首先通过命令行的 hexo s 开启本地服务器，然后配置一下端口转发的参数（我这里是 4000 端口）。记得勾选开启：
出现了绿点，说明配置没问题：
在地址栏输入端口地址，然后点击 inspect 看一下：
