前言
Chrome Devtools应该是每一位做前端都会用到的一个工具吧!
菜单面板结束

- Elements 页面Dom元素
- Console 控制台
- Source 页面加载静态资源
- Network 网络
- Performance 设备新能加载分析
- Application 应用信息
- Security 安全分析
- Audits 审计 自动化测试工具
CSS相关的
有时我们在写网页的时候,需要模仿别人的样式,然后就是复制就好了。
直接选取查看
如我们想查看Ant Design的按钮样式,我们就可以直接选择元素,然后就能在Styles面板中看到按钮样式了。

查看通过hover显示样式
比如我们喜欢一个按钮的hover样式,但是按钮只有在hover的时候才会显示。

查看样式在源文件的位置
通过上面的两个小例子,基本的元素查找。但是我们如何快速复制别人的样式呢?
- 1.我们可以直接在Styles面板中,鼠标左键选取样式,然后Ctrl + c 复制就好了。

- 2.通过查看源文件直接复制。

选取通过JS才显示的元素CSS
在开发工具中的Elements面板查找大多数的元素的css其实并不难。大多数情况下可以直接鼠标右键该元素,点击检查,然后就能在Elements面板中找到它;或者按F12通过左上方的↖箭头选取元素,然后在Styles中就能看到该元素的样式了。
但是有些元素是基于JavaScript的,只有用户进行了操作了才会显示,如:通过click,mouseover等事件。这个时候我们就无法用过审查元素快速查找到元素和查找样式了。
解决方案:
- 打开开发者工具(按F12或者Ctrl + Shift + I)
- 打开Source面板
- 执行用户操作让元素可见(如鼠标悬停)
- 在元素可见的情况下按下F8(与“暂停脚本执行”按钮相同)
- 点击左上方的“选取元素”按钮
- 选择页面的元素(此时会自动进入到Elements面板中)

通过CSS选择器寻找元素
打开开发者工具在Elements面板中,按(Ctrl + F)即可在下面看到一个“find”栏

在这里可以使用字符串、选择器以及Xpath寻找元素
这里也是可以直接使用类似于CSS的选择器那样查找元素的,如我们可以使用div.samples
选择器来搜索以及遍历文档下所有的class为samples的div元素

直接编辑元素盒模型
在审查页面上的一个元素时,可以在Styles面板的旁边看到一个Computed面板,点击就可以看到该元素的可视化盒模型,上面有各部分的值

双击上面的数值即可对它们的值进行编辑

在Style面板地增减属性值
我们选取元素后再Style面板中可以直接更改元素的属性值, 点击属性值然后输入我们想要的值如: “50px"这里是必须带单位的。

但是其实我们可以让数值以不同的方式递增递减的
- 上方向键(↑)/下方向键(↓)可以让值以1递增/1递减
- ALT + 上方向键(↑)/下方向键(↓) 可以让属性值以 0.1递增 / 0.1递减
- SHIFT + 上方向键(↑)/下方向键(↓) 可以让属性值以 10 递增 / 10 递减
- CTRL + 上方向键(↑)/下方向键(↓) 可以让属性值以 100 递增 / 100 递减

开发工具颜色功能
在CSS中处理颜色是经常会遇到的,而开发者工具刚好可以方便快捷的编辑、测试颜色值。
1.对比度
首先,在开发者工具中查看选取选取元素,并在Style面板中查看元素的Colors属性时(background-color是没有对比度的),可以点击颜色值旁边的颜色采集器。在颜色采集器中,可以看到对比度选项,指示你所选择的文本颜色搭配背景颜色是否有可访问的对比度。

颜色采集器在色谱中显示两条弯曲的白线,第一条白线表示最小可接受对比度开始和结束位置,第二条白线表示次于第一个的最小接受对比度开始和结束位置。
2.调色板
除了可访问性功能外,还可以访问不同的调色板,包括Material,Custom,CSS Variables,Page colors。

3.切换颜色值语法
在Styles面板中会显示CSS里写的颜色的语法,但是开发工具可以通过按住SHIFT然后点击颜色小方块,在HEX,RGBA,HSLA之间切换颜色值。

或者可以在色谱中点击切换按钮

其他

编辑CSS阴影
text-shadow和box-shadow的css手写有时无法直观预测到它的效果,以及语法也容易忘记,且两种语法略有不同。
好在Chrome的开发者工具可以让我们方便的调试text-shadow和box-shadow的内外阴影。

上面这个Dome是使用的QQ浏览器演示的。
但是最新版的Chrome好像舍弃了直接给元素添加text-shadow和box-shadow的功能,但如果你的元素有作用了text-shadow或者box-shadow依然可以点击box-shadow或者text-shadow旁边的小方块调出该调试面板。

Firefox的filter编辑器
filter是现在几乎在移动端和PC端都支持的一个新功能,而Firefox提供了一个友好的小工具让我们更加方便的编辑filter值。
一旦你的代码中有filter(提示:如果你不知道实际的语法,可以先写上filter:none)然后就可以在filter旁边看到一个黑边相间的堆叠方块,点击即可进入到filter编辑器中。

可以个单个值加不同的filter,删除单个filter值,或者拖动filter重新排列它们的层次。

Styles面板中编辑CSS动画
在Chrome中的Styles面板中编辑静态元素非常简单,那么编辑animation属性以及@keyframes创建动画呢?
这个时候我们就可以使用浏览器为我们提供的Animation面板了,默认是没有开启的。

这里使用https://animate.style/ 上的案例测试。

查看未使用的CSS&JS
有大量的工具可以帮助我们追踪未在页面上使用的CSS,这样我们就可以选择删除它们,没必要加载它们,来提高页面的加载速度。
默认也是没有开启该面板的,开启步骤如下:

这不光是可以查看CSS对于JS的代码重复的也是可以查看的

常用命令和调试
打开指令面板
在Devtools打开的情况下,输入Ctrl + Shift + P
来将其激活, 不同的操作系统可能快捷键不一样,可以打开Source面板查看。

然后可以在栏中删除默认的">"就会提示你 “键入"?"查看可用的命令”

-
...
: 打开文件 -
!
: 运行脚本 -
:
:前往文件 -
@
:前往表示符(函数,类名) -
>
: 打开某菜单功能
常用命令
性能监视器
>performance monitor

将显示性能监视器以及相关信息,例如CPU,JS堆大小和DOM节点。
FPS实时监控
> FPS

整个页面截图
有时我们想截图真整个网页,可能需要一些软件在完成,最为方便的可以使用QQ的长截图。

键入> full
然后选择
Capture full size screenshot

截图单个元素
键入>node
选择
Capture node screenhot

DOM调试
当要调试特定元素的DOM中更改时,这可以用到这些DOM更改断点的类型
DOM断点

-
Subtree modifications
: 子节点删除或添加时 -
Attributes modifications
: 属性修改时 -
Node Removal
: 节点删除时
例子

监听input的属性变化,来触发断点调试。
DOM增删复制
-
Add attribute
: 为当前元素添加属性 -
Eidit as HTML
: 编辑当前元素的HTML标签 -
Duplicate element
: 复制当前元素,并粘贴到当前元素下放 -
Delete element
: 删除选中的DOM元素 -
Hide element
:隐藏当前DOM元素 -
Expand recursively
: 无论页面层级多深都能全部打开 -
Collapse children
: 这个和Expand recursively
相反,会将子元素全部折叠起来。 -
Capture node screenhot
: 截图当前元素 -
scroll into view
:将页面滚动到元素 -
Store as global variable
: 将当前选定的元素添加到全局变量中,类似于使用document.querySelector()
选取当前元素(JS)

查看当前元素作用的事件
有的是有我们想看当前元素的点击事件,对应在源文件哪一行,如果是在Resource中查看源文件很难找到具体的位置。我们可以直接选取元素在Event Listeners
面板中查看当前元素作用的事件有哪些,并查看对应的源码。

黑盒脚本
所有的前端开发人员都会遇到的问题,在应用程序中会出现错误。当开始调试的时候,但是经过逐行调试的时候,调速器会跳转到不是自己的焦点文件中(如第三方库JQuery、JQuer插件库等)。
这个时候Blackboxing就可以解决这一问题,以便于可以绕过一个第三方库,当您黑箱一个源文件时,调试时代码,调试器将不会跳转到该文件(黑箱中的文件)。
原理
- 1.进入\退出\过渡绕过库代码
- 2.事件侦听器断点不会破坏库代码
- 3.调试器不会暂停代码库中设置的任何断点
所以当黑箱一个脚本时,能让你更加方便专注于自己调试代码。
设置
打开Devtools打开设置

可以直接快捷键F1
或者SHIFT + ?
即可进入到设置界面。

现在最新的Chrome叫Igore List
,以前的叫Blackboxing
。
在这里可以输入添加到黑名单的脚本的文件名:
- 输入文件的名称
- 使用正则表达式来定位
- 包含特定名称的文件 如:
/jquery.js$
- 某些类型的文件 如:
.min.js$
- 列表内容 列表内容或者输入想要加入忽略的文件夹
直接在源文件中右键 —> Add script to ignore list

事件监听器
-
1.在Source面板中
-
2.展开
Event Listener Breakpoints
-
3.选择监听的事件类型,触发事件启用断点。

如上当我们监听了鼠标事件,就会跳入到断点处。
Overrides
在新的chrome中,我们可以使用本地资源覆盖网页所使用的资源,可以使用本地的CSS覆盖网页上CSS文件,修改样式。或者添加JSON文件模拟Mock虚拟数据。
使用步骤
- 1.打开Devtools工具的Source面板
Sources -> Overrides
- 2.我们可以在本地磁盘中建立一个文件夹,专门用local Override的根目录。
控制台指令
使用控制台指令我们使用的最多应该就是Console了,进行日志打印。其实Console控制台可以像Linux一样使用很多命令,甚至可以用于临时的脚本脚本调试。
$ 选择器
这里的$
符号类似于JQuery的选择器,其实也是document.querySelecotr()
的简写。

? 选择器
这个其实就是document.querySelectorAll()
的简写, 返回一个数组标签元素
?(".btn")
$x选择器
$x(path)
返回与给定的xpath表达式匹配的DOM元素数组。
例子
$x('//h1[@class="title"]');
// 选取页面上class为title的h1标签
$x("//p[a]");
// 选取页面上p标签下包含a标签的所有元素
getEventListeners
获取指定对象绑定的事件

getComputedStyle
获取元素的样式

clear
有的时候控制台会有很多日志信息或者报错信息,这时也是可以像Linux一样清屏的
clear()

copy
有时调试的时候,我们需要复制一些数据
[图片上传失败...(image-bbdacf-1616328356868)]
keys/values
打印一个对象的所有键或者所有的值

table
Devtools提供了将对象数组打印为表格的API

花式Console
我们经常能在各大网站上看到一些有趣的console



console

变量打印
使用%s
, %o
, ·%d
和%c
var text = "测试文本";
console.log(`${text}`); // 使用ES6模板字符串输出变量
console.log("打印 %s", text); // 使用 %s 打印字符串
var obj = {"name": "曌明", "age": 18};
console.log("打印 %o", obj);
var num = 1024;
console.log("打印 %d", num);

%c 打印
这个%c
比较特殊,可用于改写输出样式。
console.log('%c 测试文本', 'font-size:50px; background: ; text-shadow: 10px 10px 10px red')

当然也是配合其他的占位符一起使用

所以我们也可以模仿简书的打印
console.log('%c Environment %c production',
'padding: 1px; border-radius: 3px 0 0 3px; color: #fff;background:#606060;',
'padding: 1px; border-radius: 0 3px 3px 0; color: #fff;background:#42c02e'
);
console.log('%c Platform %c shakespeare',
'padding: 1px; border-radius: 3px 0 0 3px; color: #fff;background:#606060;',
'padding: 1px; border-radius: 0 3px 3px 0; color: #fff;background:#1475b2'
);
console.log('%c Version %c 1.1.0',
'padding: 1px; border-radius: 3px 0 0 3px; color: #fff;background:#606060;',
'padding: 1px; border-radius: 0 3px 3px 0; color: #fff;background:#1475b2'
);
console.log('%c Build Date %c 2021-03-11T08:05:31.530Z',
'padding: 1px; border-radius: 3px 0 0 3px; color: #fff;background:#606060;',
'padding: 1px; border-radius: 0 3px 3px 0; color: #fff;background:#1475b2'
);
console.log('%c Auth ',
'color: white; background-color: #2274A5',
'Login page rendered');
console.log('%c GraphQL ',
'color: white; background-color: #95B46A',
'Get user details');
console.log('%c Error ',
'color: white; background-color: #D33F49',
'Error getting user details');

对象打印
当我们需要答应对象的时候,异常要一个个的去输出,且看不到对象名称,不利于debug

但是其实我们也是可以使用ES6的对象结构,所谓的结构赋值
console.log({"location": location, "navigator": navigator})
// 或者简写
console.log({location, navigator})

断言
当你需要在特定的条件下判断时打印日子,这个将十分有用。
- 如果断言为false, 则将一个错误信息写入到控制台中。
- 如果断言是true, 则控制台不输出任何信息。
var val = 100;
console.assert(val === 102, "val does not equal 102")

测试执行效率
var i = 0;
console.time("while loop");
while(i < 100000){
i++;
}
console.timeEnd("while loop");

分组
console.group('用户列表');
console.log('name: 曌明');
console.log('job: student');
// 内层0
console.group('地址');
console.log('Street: 123 街');
console.log('City: 湖北');
console.log('State: 在职');
console.groupEnd(); // 结束内层0
// 内层1
console.group("爱好")
console.log('hobby1: play football');
console.log('hobby2: play basketball');
console.log('hobby3: play badminton');
console.groupEnd(); // 结束内层1
console.groupEnd(); // 结束外层
执行结果

dir
利用console.dir
可以用来答应DOM节点对象
console.log(document);
这个和console.log
是有点一点区别的,log打印的是DOM树形结构,而dir打印的是纯标签。
网络Network
网络请求这个面板是否非常有用的,不管是前后端协同开发还是做爬虫分析一般都会使用到这个功能。

捕捉屏幕截图
通过capture screenshots 可以查看这个时间段页面的加载情况。

查看响应信息

这个里面可以很清楚查看Http的请求头,Http的状态码,Http的返回内容等这种这样的信息。
网友评论