调试工具介绍
打开调试工具的方法
如何打开devtool?
- 菜单>更多工具>开发者工具
- 快捷键F12
打开命令菜单
命令菜单中可以输入命令修改调试工具的一些配置，如主题；或者调用调试工具自带的一些功能，如截屏、dock
切换主题
比如要修改浏览器调试工具的主题，ctrl+shift+p打开命令菜单，输入dark theme，就可与将调试工具的主题切换成黑色主题
重新F12打开调试工具或者点击Reload DevTools，可以看见主题变成了黑色
截屏
ctrl+shift+p打开命令菜单，输入screenshot,这4个截屏选项分别是区域截屏、整个页面截屏、按节点截屏、当前视窗截屏
dock切换调试工具的位置
Dock to left将调试工具切换到左边
Dock to right 将调试工具切换到右边
Undock将调试工具用一个新窗口打开
常用的tab
调试工具的使用
css调试
检查元素
右击元素，点击检查，就可以在element面板快速定位我们想要检查的元素
也可以通过element面板的dom树选择我们要审查的元素
还能通过ctrl+shift+c或者调试面板的这个按钮，选中要审查的元素
我们审查元素的时候，可以看到元素有三种不同的背景色，淡蓝色是元素本体、淡绿色是元素padding，橙色是元素的margin
pc端与移动端的预览效果切换
如果我们想切换pc端和移动端的预览效果，可以点击调试面板的这个按钮，或者ctrl+shift+m实现切换
这里可以切换移动设备的型号、更改宽高、百分比、切换设备横屏竖屏
查询DOM树
我们可以看到element这一个tab下就是我们的html代码
常规查找
如果我们想查找某一个dom结点，我们在element下ctrl+f，输入字符串，就能找到对应的dom结点
css选择器查找
我们还可以通过css选择器的方式，找到我们的dom结点，比如要查找id为s_is_result_css的
textarea，输入textarea#s_is_result_css查找即可
Xpath方式查找
如下图：//代表全局范围查找，//div/h3代表全局范围查找div下的h3标签
通过console的inspect(element)的方式查找结点
比如要查找id为s_is_result_css的dom元素
console面板输入 inspect(document.getElementById(‘s_is_result_css’))，再按下回车，调试工具就会跳转到element面板对应的dom元素上
编辑css样式
更改css
选中样式，在右侧element.style内更改样式，比如修改字体颜色为red
可以看到字体颜色成功变成红色
css代码映射
我们还可以看到是项目代码哪一行定义了这个样式
点击代码的映射，就能跳转到souces面板对应的代码文件对应的行数
盒子模型
面板最下侧是一个盒子模型，可以直观的看到dom元素的宽高、border、padding、margin
伪类样式常驻
比如有一个按钮，鼠标悬停在上方的时候，按钮背景是变色的，那么如何让hover的效果常驻不变呢？
我们先选中指定的元素，然后可以看到样式面板右上角有一个:hov，点击可以看到如下选项，给:hover打勾，即可让hover样式常驻，勾选之后可以看到代码指定元素上有一个黄色小点，代表伪类样式已被固定
取消当前样式
选中元素，把样式中的勾去掉，就可取消当前样式
取消当前元素的class样式
选中元素，样式面板点击.cls，取消class类名的选中即可
复制样式
element调试面板选中需要复制样式的元素，右键选择copy~copy styles
之后选择需要粘贴样式的元素，把样式贴到element.style即可
Computed面板
Computed面板不按元素和class区分，会列出页面中所有生效的样式
比如我们搜索color，那么就会列出color相关的样式，点击箭头，就会跳转到生效样式的元素上
需要注意的是，Computed面板不会直接展示继承过来的样式，如果想展示继承的样式，可以点击Show all，即可展示所有包括继承的样式
Group可以对样式进行功能上的区分
Layout面板
Layout面板主要分为2部分，一个是Grid,一个是Flexbox，这是两个前端常用的布局方式，即网格布局和弹性布局
这个面板把页面中所有用到网格布局和弹性布局的容器全部列到了里边
Grid网格布局
首先先看网格布局，选中Grid overlays中列出的已经使用网格布局的元素，就可以在页面中看到是哪个元素使用了网格布局，并且该元素还展示了很多的辅助线
这些辅助线1代表第一列，2代表第二列…1代表第一行，2代表第二行…
-1代表倒数第一列，-2代表倒数第二列…-1代表倒数第一行，-2代表倒数第二行…
hide line labels 隐藏网格布局的辅助线
show line names显示网格布局的每一行每一列的名称
show line numbers显示网格布局的每一行每一列的编号
show track sizes 显示网格布局的每一个网格所占用的空间大小
show area names显示网格布局的每一个网格的名称
extend grid lines 延长网格布局的辅助线
使用网格布局，在styles面板的网格样式里，右边会有小按钮，我们可以通过这个小按钮快速切换grid布局
Flexable弹性布局
选中Flexable overlays中列出的已经使用弹性布局的元素，就可以在页面中看到是哪个元素使用了弹性布局，并且该元素还展示了很多的辅助线（更改放块颜色可以更改辅助线颜色）
弹性布局和网格布局会显现小标签
使用弹性布局，在styles面板的弹性样式里，右边会有小按钮，我们可以通过这个小按钮快速切换flex布局
Event Listeners面板
在Event Listeners面板我们可以看到当前页面中所有绑定的事件
从这里可以看出window绑定了一个load事件，然后通过remove按钮我们可以把该项的事件监听去除掉
Properties面板
这个面板可以查看当前页面所有dom结点的所有属性
其是以原型链的方式展示的，如下，snack-box是继承HTMLDivElement的，HTMLDivElement是继承HTMLElement的，HTMLElement是继承Element的，一层层往下…
Accessibility面板
Accessibility帮助我们构建一个无障碍的页面
DOM BreakPoints面板
我们选中元素，右击选择Break on，可以看到以下选项：
subtree modifications意思是以这个结点为根节点，如果它里面的子节点被修改了，js的运行就会被暂停
attribute modifications意思是这个结点的一些属性被修改了，js的运行就会被暂停
node removal意思是这个结点从文档中被删除了，js的运行就会被暂停
此时我们选择attribute modifications，选中之后，element面板对应dom的左侧会出现一个蓝点，代表这个地方打了断点，而DOM BreakPoints面板也出现了断点列表
我们点击变颜色，按钮的文字颜色是会发生改变的，那么就会触发attribute modifications，暂停js的执行，此时souces面板上就会看到js暂停执行的原因是因为attribute modifications，即dom属性的修改导致了js的暂停。
也就是蓝色的代码改变了dom的属性，从而导致js的暂停
console调试
打开console控制台快捷键
ctrl+shift+j
console控制台可以输入和执行js语句
如下，console控制台可以输入和执行js语句，控制台每一行左边箭头代表输入语句，右边箭头代表上一行执行之后的返回值
$_返回上一条语句的执行结果
如下图，输入$_，可以返回a+b的执行结果
$0返回上一个选择的dom结点
比如在element面板选择了一个dom
控制台输入$0就会返回刚刚选择的dom，$1就会返回上上次选择的dom，$2就是上上上一个，依次类推…
console.log/error/warn/table/clean/group/time/assert/trace
可以通过console.log/error/warn/table/clean/group/time/assert/trace在控制台输出信息
console.log打印信息
console.error打印错误
console.warn打印警告
console.clean清空控制台
console.group可以将多个console设为一个组
console.time可以获取代码的执行时间
console.table可以将一个数组以表格的形式打印
console信息的级别筛选
这里可以筛选console信息的级别，比如只筛选error\warn\info
观测console变量
这个眼睛按钮可以观测console变量的变化
javascript调试
debugger调试
首先看页面，这个页面点击”变颜色”按钮，会随机改变按钮的文字颜色
js代码如下
如果代码出问题，我们可以在代码中输入debugger对代码进行调试
当执行到debugger的时候，会暂停代码的继续向下执行，并展现当前代码的执行位置
右上角的黄色标签提示了是什么原因导致的代码暂停执行，此时是debugger语句暂停了代码的执行
我们可以点击step over一步一步地去调试，可以看得到在每一次点击step over调试的过程中，代码依次往下执行，而且能看到每一行代码的执行结果
断点
除了在代码中写入debugger的方式进行调试，我们还可以在调试面板上点击行号打断点的方式进行调试
如下，点击行号，出现蓝色标签，表示我们在这里打了断点，当执行到打断点的行时，会暂停代码的执行，并且右上角黄色提示提示了代码暂停执行的原因是碰到了断点
在右上角的Breakpoint可以看到断点的位置
如下图，我们代码中写入了一个debugger，并在调试面板打了两个断点，当代码遇到debugger，会暂停代码的执行，点击右上角的三角按钮，会继续执行js代码，直到碰到下一个断点或者debugger，又会暂停执行
折叠代码
有些时候我们只想观测部分代码，其他的代码不想关注，那么我们可以通过ctrl+shift+p快速打开菜单，选择enable code folding
出现小箭头，此时我们就可以对不想观测的代码进行折叠
watch监听变量
我们还可以监视变量，比如监视color变量，那么我们在右上角的watch点击+号即可添加想要监视的变量，当color的值发生变化的时候，watch面板也会相应展现color的变化情况（如果color未定义，则展示not available）
DOM BreakPoints
我们选中元素，右击选择Break on，可以看到以下选项：
subtree modifications意思是以这个结点为根节点，如果它里面的子节点被修改了，js的运行就会被暂停
attribute modifications意思是这个结点的一些属性被修改了，js的运行就会被暂停
node removal意思是这个结点从文档中被删除了，js的运行就会被暂停
此时我们选择attribute modifications，选中之后，element面板对应dom的左侧会出现一个蓝点，代表这个地方打了断点，而DOM BreakPoints面板也出现了断点列表
我们点击变颜色，按钮的文字颜色是会发生改变的，那么就会触发attribute modifications，暂停js的执行，此时souces面板上就会看到js暂停执行的原因是因为attribute modifications，即dom属性的修改导致了js的暂停。
也就是蓝色的代码改变了dom的属性，从而导致js的暂停
Event Listener Breakpoints
Event Listener Breakpoints也是暂停js代码的一种方式之一，即监听选中的事件，当触发事件之后，js就会暂停执行。
此时我们选择监听click事件
当触发点击事件，js代码就会暂停执行，并且面板右上方会提示是因为由于事件监听导致的代码暂停执行
Add script to ignore list忽略调试代码
有些时候我们的代码是通过框架来写的，比如通过vue来写的，在vue中我们定义了一个点击按钮改变颜色的方法
此时我们依旧是选择通过Event Listener Breakpoints监听click事件
但是点击按钮之后，却跳到了一个莫名其妙的地方，这是我们在vue.js源文件里把代码中断执行了。然而我们不需要调试vue.js，我们只需要调试我们自己写的代码
点击Call Stack,选中右击Add script to ignore list，意思是将代码添加到忽略调试的list里，即我们不需要调试vue.js，那么就忽略它，将它添加到忽略调试的list里，调试的时候就不会进入到vue.js，也不会被它影响
Add script to ignore list之后，出现提示，之后我们关闭vue.js
重新调试代码，就不会再次进入vue.js了，而是进入了我们自己编写的代码里
network调试
页面所有的请求都会被列入network面板中，name是请求名称、status是服务器状态码、type是资源类型、initiator是什么东西发起的请求、size是资源大小、time是发起请求的时间、waterfall是瀑布流图形化的东西
这个按钮如果置灰，就不再监听页面发起的请求
clear清空请求记录
筛选请求的资源（ws是websocket）
preserve log，默认跳转页面的时候，上一页面的请求信息就会消失，如果想保留之前页面的请求信息，那么就勾上preserve log
throttling这里可以模拟网络速度
也可以自定义throttling
download是下行速度，upload是上行速度，latency是延迟
这个按钮可以配置更多的网络情况
user agent可以设置用户代理
user agent会携带在请求头上
这两个按钮、import HAR file和export HAR file,导入HAR file和导出HAR file
HAR file实际上就是一段json数据格式，保存了浏览器和服务器交互的数据。通常当客户访问网页的时候，碰到一些问题，可能是网络方面的原因，但我们又没法模拟客户的网络环境，这时候我们可以要求客户把这个HAR file下载下来，然后开发人员再在自己的浏览器导入这个HAR file，就可以模拟当时用户的网络请求
导入HAR file我们可以看到network面板下列出了用户的网络请求
我们还能看到下方有网络请求的信息
Application调试
这个面板我们可以看到存储在本地的一些storage\cookie\SQL\Cache
备注
梳理不易，转载请注明出处
