前言
Chrome Devtools应该是每一位做前端都会用到的一个工具吧！
菜单面板结束
Chrome菜单面板
- Elements 页面Dom元素
- Console 控制台
- Source 页面加载静态资源
- Network 网络
- Performance 设备新能加载分析
- Application 应用信息
- Security 安全分析
- Audits 审计 自动化测试工具
CSS相关的
有时我们在写网页的时候，需要模仿别人的样式，然后就是复制就好了。
直接选取查看
如我们想查看Ant Design的按钮样式，我们就可以直接选择元素，然后就能在Styles面板中看到按钮样式了。
直接选取元素
查看通过hover显示样式
比如我们喜欢一个按钮的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面板中）
选取通过JS才能显示的元素样式
通过CSS选择器寻找元素
打开开发者工具在Elements面板中，按（Ctrl + F）即可在下面看到一个“find”栏
元素搜索
在这里可以使用字符串、选择器以及Xpath寻找元素
这里也是可以直接使用类似于CSS的选择器那样查找元素的，如我们可以使用div.samples选择器来搜索以及遍历文档下所有的class为samples的div元素
直接编辑元素盒模型
在审查页面上的一个元素时，可以在Styles面板的旁边看到一个Computed面板，点击就可以看到该元素的可视化盒模型，上面有各部分的值
Computed面板
双击上面的数值即可对它们的值进行编辑
通过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之间切换颜色值。
SHIFT切换颜色值
或者可以在色谱中点击切换按钮
切换颜色值
其他
调试工具的其他功能
编辑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旁边的小方块调出该调试面板。
chrome调试box-shadow
Firefox的filter编辑器
filter是现在几乎在移动端和PC端都支持的一个新功能，而Firefox提供了一个友好的小工具让我们更加方便的编辑filter值。
一旦你的代码中有filter（提示：如果你不知道实际的语法，可以先写上filter：none）然后就可以在filter旁边看到一个黑边相间的堆叠方块，点击即可进入到filter编辑器中。
firefox的filter编辑器
可以个单个值加不同的filter，删除单个filter值，或者拖动filter重新排列它们的层次。
firefox-filter
Styles面板中编辑CSS动画
在Chrome中的Styles面板中编辑静态元素非常简单，那么编辑animation属性以及@keyframes创建动画呢？
这个时候我们就可以使用浏览器为我们提供的Animation面板了，默认是没有开启的。
开启Animation面板的步骤
这里使用https://animate.style/ 上的案例测试。
浏览器-Animation面板
查看未使用的CSS&JS
有大量的工具可以帮助我们追踪未在页面上使用的CSS，这样我们就可以选择删除它们，没必要加载它们，来提高页面的加载速度。
默认也是没有开启该面板的，开启步骤如下：
Coverage开启步骤
这不光是可以查看CSS对于JS的代码重复的也是可以查看的
Coverage的使用
常用命令和调试
打开指令面板
在Devtools打开的情况下，输入Ctrl + Shift + P 来将其激活， 不同的操作系统可能快捷键不一样，可以打开Source面板查看。
Source面板
然后可以在栏中删除默认的">"就会提示你 “键入"?"查看可用的命令”
command可用命令
-
...： 打开文件 -
!: 运行脚本 -
::前往文件 -
@：前往表示符(函数，类名) -
>： 打开某菜单功能
常用命令
性能监视器
>performance monitor
performance monitor
将显示性能监视器以及相关信息，例如CPU，JS堆大小和DOM节点。
FPS实时监控
> FPS
chrome FPS
整个页面截图
有时我们想截图真整个网页，可能需要一些软件在完成，最为方便的可以使用QQ的长截图。
QQ的长截图
键入> full然后选择
Capture full size screenshot
Capture full size screenshot
截图单个元素
键入>node 选择
Capture node screenhot
`Capture node screenhot`
DOM调试
当要调试特定元素的DOM中更改时，这可以用到这些DOM更改断点的类型
DOM断点
DOM调试
-
Subtree modifications: 子节点删除或添加时 -
Attributes modifications: 属性修改时 -
Node Removal: 节点删除时
例子
Attributes modifications
监听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）
DOM小例子
查看当前元素作用的事件
有的是有我们想看当前元素的点击事件，对应在源文件哪一行，如果是在Resource中查看源文件很难找到具体的位置。我们可以直接选取元素在Event Listeners面板中查看当前元素作用的事件有哪些，并查看对应的源码。
通过DOM找事件
黑盒脚本
所有的前端开发人员都会遇到的问题，在应用程序中会出现错误。当开始调试的时候，但是经过逐行调试的时候，调速器会跳转到不是自己的焦点文件中（如第三方库JQuery、JQuer插件库等）。
这个时候Blackboxing就可以解决这一问题，以便于可以绕过一个第三方库，当您黑箱一个源文件时，调试时代码,调试器将不会跳转到该文件(黑箱中的文件)。
原理
- 1.进入\退出\过渡绕过库代码
- 2.事件侦听器断点不会破坏库代码
- 3.调试器不会暂停代码库中设置的任何断点
所以当黑箱一个脚本时，能让你更加方便专注于自己调试代码。
设置
打开Devtools打开设置
设置黑盒机制
可以直接快捷键F1或者SHIFT + ?即可进入到设置界面。
chorme setting
现在最新的Chrome叫Igore List，以前的叫Blackboxing。
在这里可以输入添加到黑名单的脚本的文件名：
- 输入文件的名称
- 使用正则表达式来定位
- 包含特定名称的文件 如：
/jquery.js$ - 某些类型的文件 如：
.min.js$ - 列表内容 列表内容或者输入想要加入忽略的文件夹
直接在源文件中右键 —> Add script to ignore list
Add script to ignore list
事件监听器
-
1.在Source面板中
-
2.展开
Event Listener Breakpoints -
3.选择监听的事件类型，触发事件启用断点。
Event Listener Breakpoints
如上当我们监听了鼠标事件，就会跳入到断点处。
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
获取指定对象绑定的事件
getEventListeners
getComputedStyle
获取元素的样式
getComputedStyle
clear
有的时候控制台会有很多日志信息或者报错信息，这时也是可以像Linux一样清屏的
clear()
clear
copy
有时调试的时候，我们需要复制一些数据
[图片上传失败...(image-bbdacf-1616328356868)]
keys/values
打印一个对象的所有键或者所有的值
keys & values
table
Devtools提供了将对象数组打印为表格的API
table
花式Console
我们经常能在各大网站上看到一些有趣的console
简书的console
知乎的console
天猫的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')
cosole-log %c
当然也是配合其他的占位符一起使用
console-log-%s-%c
所以我们也可以模仿简书的打印
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');
美化console
对象打印
当我们需要答应对象的时候，异常要一个个的去输出，且看不到对象名称，不利于debug
console打印对象
但是其实我们也是可以使用ES6的对象结构，所谓的结构赋值
console.log({"location": location, "navigator": navigator})
// 或者简写
console.log({location, navigator})
console
断言
当你需要在特定的条件下判断时打印日子，这个将十分有用。
- 如果断言为false， 则将一个错误信息写入到控制台中。
- 如果断言是true， 则控制台不输出任何信息。
var val = 100;
console.assert(val === 102, "val does not equal 102")
console.assert
测试执行效率
var i = 0;
console.time("while loop");
while(i < 100000){
i++;
}
console.timeEnd("while loop");
console.time&console.timeEnd
分组
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(); // 结束外层
执行结果
console.group
dir
利用console.dir可以用来答应DOM节点对象
console.log(document);
这个和console.log是有点一点区别的，log打印的是DOM树形结构，而dir打印的是纯标签。
网络Network
网络请求这个面板是否非常有用的，不管是前后端协同开发还是做爬虫分析一般都会使用到这个功能。
chrome-network面板
捕捉屏幕截图
通过capture screenshots 可以查看这个时间段页面的加载情况。
capture screenshots
查看响应信息
http响应信息
这个里面可以很清楚查看Http的请求头，Http的状态码，Http的返回内容等这种这样的信息。
网友评论