切换chrome主题
操作步骤：
ctrl + shift + p执行Command命令- 输入
theme按下回车
效果图
一、代码调试
1.1 不简单的console
1.1.1 console.log()
在代码处，加上一句
console.log()，然后在开发者工具控制台就可以看到你打印出来的东西了。
如果打印信息过多，不容易找到目标信息的话，可以在控制台中进行过滤：
1.1.2 console.dir()
如果我们想看到DOM对象作为JavaScript对象的结构可以使用
console.dir
1.1.3 console.table()
我们经常会遇到这样的场景：获取到一个用户列表，每个用户有很多属性，但是我们只想查看其中的某些属性，在用
console.log打印出来的时候需要把每个用户对象展开一个个查看，非常麻烦。而console.table完美的解决这个问题，比如我只想获取到下列用户的id和坐标：
1.1.4 console.time()&console.timeEnd()
有时候我们想知道一段代码的性能或者一个异步方法需要运行多久，这时候需要用到这两个方法 console.time() 方法是计算器的起始方法，结束方法为 console.timeEnd()
1.1.5 console.count()
场景:就是在调试代码的时候，判断一个函数的执行次数！
console.assert接收两个参数，第一个参数为判断条件，第二个参数是提示信息，当条件为false时，进行提示！
1.2 断点调试
- 在需要断点的地方，书写
debugger就能实现断点，对于直接断点对比的缺点是不需要断点的时候，需要删除掉对应的断点代码。- Chrome 开发者工具，在
Sources源代码面板，找到需要断点的文件，点击对应的行数，就能实现断点。
我们需要关注上图红色方框内的七个按钮。从左到右依次。
- Pause/Resume script execution：暂停/恢复脚本执行（程序执行到下一断点停止）
- Step over next function call：逐语句执行（跳到下一行），快捷键F10
- Step into next function call：进入当前函数，快捷键F11
- Step out of current function：跳出当前执行函数，快捷键F11+Shift
- Step 和b的作用一致，快捷键F9
- Deactive/Active all breakpoints：关闭/开启所有断点
- Pause on exceptions：异常情况自动断点设置
1.2.1 查找对应文件
快捷键
ctrl+p弹出文件搜索弹窗，直接输入文件名称就能实现查询。
1.2.2 断点方式
(1) 手动断点
打开 Chrome 开发者工具，在
Sources源代码面板，找到需要断点的文件，点击对应的行数，就能实现断点。
(2) 条件断点
怎么实现条件断点呢？跟普通断点类似，但是这回不是直接选中，而是对于行数右键点击，选择
Add conditional breakpoint...，输入对应的逻辑判断，注意书写的逻辑使用的变量是当前行可以拿到的变量。
(3) 事件断点
如图中点击
Event Listener Breakpoints，然后选择我们需要监听的事件。之后当该事件被触发时，浏览器会帮我们自动在相应的js文件代码处打上断点。
(4) 请求断点
如图中点击
XHR/fetch breakpoints，然后添加对应的请求URL，之后当该请求发送的时候，就会自动断点。
(5) Dom 断点
当你想对DOM节点发生变化时进行断点，请使用 DOM 更改断点，最终还是会断点到触发dom操作的相应js上，但是更加高效。设置 DOM 断点：
操作步骤
- 单击Elements选项卡
- 找到要设置断点的元素
- 右键单击该元素
- 将鼠标悬停在Break on，然后选择Subtree modifications、Attributes modifications或Node removal
- Subtree modifications（子树修改） ：当当前选择的节点的子节点被移除或添加，或者子节点的内容被改变时触发。不会在子节点属性更改或对当前选定节点的任何更改时触发。
- Attributes modifications（属性修改） ：在当前选定的节点上添加或删除属性或属性值更改时触发。
- Node Removal（节点移除） : 当当前选中的节点被移除时触发。
1.3 动画调试
- 打开开发者面板，开启命令行（Mac:
Command+Shift+P，Windows：Control+Shift+P）- 输入
Animations，选择Show Animations，打开动画检查器
二、调试技巧
2.1 一键重新发起请求
不用刷新页面，不用走页面交互，是不是非常爽！！！
操作步骤：
- 选中
Network- 点击
Fetch/XHR- 选择要重新发送的请求并右键选择
Replay XHR
效果图
针对同样的请求，有时候需要修改入参重新发起，有啥快捷方式？
操作步骤：
- 选中
Network- 点击
Fetch/XHR- 需要调试的请求右键选择
Copy as fetch- 控制台粘贴代码,修改参数，回车搞定
2.2 截取一张全屏的网页
操作步骤：
ctrl + shift + p执行Command命令- 输入
full按下回车
效果图
如果要截取选中的部分元素呢？
操作步骤：
- 选中要截取的结构
ctrl + shift + p执行Command命令- 输入
node按下回车
2.3 展开或关闭所有DOM元素
操作步骤：
- 选中要展开或关闭的节点，右键即可
效果图
2.4 控制台引用上一次执行的结果
来看看这个场景，我猜你也一定遇到过, 对某个字符串进行了各种工序，然后我们想知道每一步执行的结果，该咋办？。
'fatfish'.split('').reverse().join('') // hsiftaf
你可能会这样做
// 第1步
'fatfish'.split('') // ['f', 'a', 't', 'f', 'i', 's', 'h']
// 第2步
['f', 'a', 't', 'f', 'i', 's', 'h'].reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
// 第3步
['h', 's', 'i', 'f', 't', 'a', 'f'].join('') // hsiftaf
更简单的方式
使用$_引用上一次操作的结果，不用每次都复制一遍
// 第1步
'fatfish'.split('') // ['f', 'a', 't', 'f', 'i', 's', 'h']
// 第2步
$_.reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
// 第3步
$_.join('') // hsiftaf
复制代码
2.5 $i直接在控制台安装npm包
你遇到过这个场景吗？有时候想使用比如
dayjs或者lodash的某个API，但是又不想去官网查，如果可以在控制台直接试出来就好了。
使用方式
chrome应用商店直接搜索需要的插件
- 安装
Console Importer插件- $i('name')安装npm包
效果图
