Chrome调试技巧

前言

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的返回内容等这种这样的信息。

调试Nodejs

关于chrome调试Nodejs教程