写在前面：纯个人记录用，可以直接跳转到免费学习地址
复制、保存
复制 - copy
- 通过这个可以复制一些对象、数组等
copy("这里是复制的内容")
存储全局变量
- 如果我在代码中
console一个数据，我没有办法直接对这个数据进行操作。但是可以通过把这个数据保存为tempX后再操作
- 像上面这样，就可以操作temp1
快捷键
切换调试窗口布局
ctrl +shift + D/⌘ + shift + D- 可以快速调试框
最近两次位置之间切换
切换 DevTools面板
ctrl + [/ctrl + ]：实现左右之间切换（如：Elements -> Console）ctrl + 【1 - 9】：实现快速跳转。但是这个是默认关闭，打开在Settings -> Preferences -> Enable Ctrl 1-9 shortcut to switch panels
使用 Command
- 首先打开Command的方式：
Ctrl + Shift + P/⌘ + Shift + P - 或者dropdown下的
run command
截屏
- 关键词：
screen Capture node screenshot：对应Elements中选择的节点的截屏Capture full screenshot：全屏截图
切换面板
- Elements中是
元素面板+资源面板 - 关键词：layout
代码块
定义代码块
- DevTool -> Source ->
Snippets中新建、运行代码块
代码块代码快速运行
Ctrl + P 后输入!执行对应的代码块
Console中的$
小册中有几个用法，我这里主要记录$i安装npm插件
- 安装Console Importer可以在Console中快速安装、调试npm插件
$i("lodash")的方式安装npm插件
异步的Console
- 直接使用
await,因为Console默认被async包裹
条件断点
在Source中打断点，如果每次都停下来，会非常痛苦，我只希望在满足一定条件的情况下断点停止
- 右击行号
Add conditional breakpoint... - 右击一个已经设置的断点并且选择
Edit breakpoint
monitorEvents监听事件
在此之前，我想为一个div添加事件监听，往往通过getElement + addEventListener的方式，用monitorEvent会大大提高效率。但是不能操作事件参数
console打印
console.table
打印出表格
console.dir
如果想打印一个dom元素，只能看到元素，不能看到具体的js对象，就可以使用dir
打印信息前面添加时间戳
Ctrl + Shift + P打开运行命令框后，输入timestamps(中文的输入：时间),选择显示时间戳
检测执行时间
console.time()和console.timeEnd()- 如果有多个，可以在函数中加入参数
console.time("1")和console.timeEnd(1)
Network
Request initiator 显示了调用堆栈信息
可以查看当前这个请求调用栈、从哪里发送的
重新发送请求
右击请求，选择Replay XHR
XHR/fetch断点
发送请求时，断点停止，可以通过Source中的XHR/fetch breakpoint加入请求url来实现
元素面板技巧
shadow 编辑器
插入样式
{}中右下角的+号
DOM断点
记录DOM节点什么时候添加、修改、修改的哪些部分
subtree modification：监听当前dom节点内部任何元素被添加/删除事件attribute modification：监听任何当前节点被添加、移除、修改属性值的事件node removal：当前元素被移除的事件 打断点方式：- 右击元素 -> break up
注：
- 刷新页面断点还在
Drawer
除了上面Tab，还可以通过点击ESC来控制，显示和隐藏Drawer
Drawer有什么
Animations：动画Changes：比较代码修改的内容（对我来说不常用）Console：Coverage：检查代码，可以看到所有引用的文件，代码使用率Network conditions：模拟网络状态，在network这个tab中也可以调整Performance monitor：Quick source：和Source一样，可以在其他Tab中找到source（如在Elements这个Tab中）Remote devices：Rendering：Request blocking：Search：Sensors：控制传感器，可以输入模拟位置What’s new：
