前端浏览器调试详解版

最新推荐文章于 2024-05-17 05:41:42 发布

@阿猫阿狗~

最新推荐文章于 2024-05-17 05:41:42 发布

阅读量684

点赞数

文章标签：前端 javascript 开发语言

原文链接：https://blog.csdn.net/Boale_H/article/details/122370104

版权

前端浏览器调试详解版

调试工具介绍

打开调试工具的方法

如何打开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

在这里插入图片描述

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面板下列出了用户的网络请求
在这里插入图片描述