浏览器调试技巧

文章将介绍几个 devtools 技巧。

缩放devtool ui

可能对于某些开发来说devtools 中的文本和按钮太小，使用起来不舒服。而浏览器也提供了可以缩放 devtools UI的方法。

devtools 的用户界面是使用 HTML、CSS 和 JavaScript 构建的，这意味着它由浏览器呈现为 web 内容。因此devtools跟web页面一样都可以通过Ctrl + +/-或者滚轮的方式来放大或缩小ui。

请添加图片描述

删除烦人的覆盖层

当今网络的很大一部分都患有一种疾病，内容被无数的横幅、广告和弹出窗口覆盖，使得我们很难真正查看或执行我们最初想要做的事情。

虽然还有其他解决方案可以做到这一点（例如在某些浏览器中使用阅读器模式），但是对于我们开发来说，可以使用更合适的技巧。

单击 devtools 中的按钮（左上角的指针图标）以选择一个元素，或者按住Ctrl + Shift + c同样可以触发那个按钮。选中要删除的令人讨厌的弹出窗口或覆盖层，按下delete键即可。

示例以CSDN官网的广告为例：

请添加图片描述

获取页面上使用的字体

当我们正在浏览一个设计精美的网站，并想了解该网站使用哪种字体；或者在项目中调试字体回退问题或缺少字形问题的时候就可以使用该技巧来准确找出用于呈现内容的字体。

基于 Chromium 的浏览器（例如 Chrome、Edge、Brave 或 Opera）：

选中想要查看字体的文本元素
打开元素栏中的计算样式
向下滚动到选项卡底部
显示渲染的字体

请添加图片描述
对于Firefox而言，在其检查器工具的侧栏中有一个字体选项卡，其中列出了用于呈现文本内容的字体。
在这里插入图片描述

检测未使用的代码

当今复杂的 Web 应用程序通常会加载大量代码，即使只需要其中一小部分来呈现首页。其中一个可以使网页快速加载的方式就是确保只加载它真正需要的JavaScript和CSS。

在基于 Chromium 的浏览器中，可以使用覆盖率工具来识别代码的哪些部分未使用。

在devtools中，使用命令菜单来作为快捷方式。

输入命令Ctrl + Shift + p打开命令输入框。
输入coverage。
选择Start instrumenting coverage and reload page指令
等待页面重新加载并显示覆盖范围报告
单击任何报告的文件以在sources栏中将其打开。

在这里插入图片描述
该文件与蓝色条和红色条一起显示在工具中，分别指示一行代码是已使用还是未使用。

请添加图片描述

禁用事件侦听器

事件侦听器有时会妨碍调试网页。如果开发者正在调查特定问题，但每次移动鼠标或使用键盘时，都会触发不相关的事件侦听器，这可能会使得更难专注于调试。

禁用事件侦听器的一种简单方法是在元素工具（或 Firefox 中的检查器）中选择它适用的元素。

在Firefox浏览器中，点击元素旁边的Event按钮，然后在出现的弹出窗口中取消选中要禁用的侦听器。

在这里插入图片描述

在基于 Chromium 的浏览器中，单击侧边栏面板中的事件侦听器选项卡，找到要删除的侦听器，然后单击删除。

在这里插入图片描述

在 IOS 上的非 Safari 浏览器上查看控制台日志

其他浏览器上可能存在无法在 Safari 中复制的错误。调试起来可能相当棘手。虽然可以通过使用 USB 将 IOS 设备连接到 Mac 来调试 Safari，但无法调试非 Safari 浏览器。

在使用 ·IOS· 时，有一种方法可以在 Chrome 和 Edge（可能还有其他基于 Chromium 的浏览器）中查看控制台日志。

流程：

在 IOS 设备上打开 Chrome 或 Edge 并转到特殊about:inspect（会自动跳转到chrome://inspect /edge://inspect）页面
单击开始记录。
保持此选项卡打开，然后打开另一个选项卡。
在新选项卡中，转到您要调试的页面。
返回上一个选项卡。就会显示控制台日志

在这里插入图片描述

复制元素样式

提取整个元素的html代码是非常简单的，右键单击该元素并选择复制 → 复制外部 HTML。但是想要提取元素的样式就比较困难了，因为它涉及到检查适用于该元素的所有 CSS 规则。

Chrome、Edge 和其他基于 Chromium 的浏览器使此步骤更快:

在元素栏中，选择要从中复制样式的元素。
右键单击所选元素。
单击复制 → 复制样式。

在这里插入图片描述

下载页面上的所有图像

如果要下载网页上的所有图像，打开devtools，粘贴以下代码，点击enter即可：

$$('img').forEach(async (img) => {
 try {
   const src = img.src;
   const fetchResponse = await fetch(src);
   const blob = await fetchResponse.blob();
   const mimeType = blob.type;
   const start = src.lastIndexOf('/') + 1;
   const end = src.indexOf('.', start);
   let name = src.substring(start, end === -1 ? undefined : end);
   name = name.replace(/[^a-zA-Z0-9]+/g, '-');
   name += '.' + mimeType.substring(mimeType.lastIndexOf('/') + 1);
   // Download the blob using a <a> element.
   const a = document.createElement('a');
   a.setAttribute('href', URL.createObjectURL(blob));
   a.setAttribute('download', name);
   a.click();
 } catch (e) {}
});