前端开发小技巧汇总

未经授权，禁止转载，转载请注明出处！

大家好，我是 CUGGZ。

今天来分享一些不太常用，但是非常实用的前端调试技巧，希望对你有所帮助！

悬停时检查弹出窗口

你是否曾经为检查只在悬停时出现的弹出元素（如 tooltip、下拉菜单等）而苦恼？这些元素一旦页面失去焦点就会消失，导致检查变得异常困难。Chromium浏览器提供的「Emulate a focused page」功能正是为了解决这个问题，确保在使用 DevTools 时页面保持聚焦状态。

要在 DevTools 中启用此功能，有两种方法：

1. 在「Elements」面板中选中触发弹出元素的项。接着打开「 styles」面板，并点击「:hover」按钮以激活悬停状态。然后，启用「Emulate a focused page」选项，这样即使你与 DevTools 交互，页面也会保持聚焦状态。

2. 打开命令菜单，运行「Show Rendering」命令，在DevTools底部打开「Rendering」抽屉。在抽屉中向下滚动，找到「Emulate a focused page」选项并勾选它。

使用日志断点

如果你习惯使用 console.log() 来调试代码，那么现在有一个更优雅的方法可以在控制台中查看日志输出，可以避免在代码中添加大量的 console.log() 语句。特别是在调试生产代码时，这一方法格外有用。

对于 Chromium 浏览器，可以在「Sources」面板中打开脚本，然后右键点击想要记录日志的行号，并选择「Add logpoint…」。在弹出的窗口中，输入想要在控制台中显示的消息，并插入想要记录的变量。这样，当代码执行到这一行时，相应的日志信息就会出现在控制台中，而无需修改原始代码。

模拟可折叠设备

近年来，可折叠设备成为市场上的新宠。但由于它们具有两个由缝隙分隔的屏幕，因此在可折叠屏幕上，应用可能与在单屏设备上看起来有所不同。为了提供更出色的用户体验，我们需要充分利用可折叠屏幕周围的空间，并围绕双屏的约束条件来设计网站。幸运的是，一些浏览器提供了模拟可折叠设备或双屏设备的功能，让我们能够更直观地了解网站在不同模式下的显示效果。

在Chromium浏览器中，可以进入设备仿真模式并选择可折叠设备。一旦选中，工具栏上将会出现额外的按钮。通过这些按钮，可以轻松切换竖屏和横屏模式，或者切换到单屏和双屏模式，从而查看网站在不同布局下的外观。

自动完成样式

Chromium浏览器具有一项强大的功能：当只输入值时，DevTools 会自动推荐最匹配的 属性-值 对。比如，只需输入「bold」，DevTools 就会推荐「font-weight: bold」作为首选样式，

切换颜色格式

所有主流浏览器的 DevTools 都支持通过按住Shift键并点击颜色预览框来切换编写的颜色格式，从而在各种颜色格式（如十六进制、rgb、hsl、hwb）之间循环选择。此外，还可以在颜色选择器中使用上下箭头键来更改颜色格式。

捕获高分辨率截图

如果你无法访问高分辨率设备，通常需要借助浏览器扩展、第三方服务或Node.js库来捕获网站的高清截图。但借助 DevTools，可以直接在浏览器内为整个页面或视口捕获高分辨率截图，无需额外工具。

在Chromium浏览器中，操作步骤如下：

1. 在DevTools中，点击「Toggle device toolbar」图标（Cmd+Shift+M或Ctrl+Shift+M）进入响应式设计模式。

2. 在设备工具栏中，点击 ⋮ 中的 Add device pixel ratio 选项。

3. 在视口顶部的操作栏中，从新增的DPR下拉菜单中选择合适的DPR值。默认值为2，可以根据需要选择更高的值，例如 3。

4. 点击 ⋮ 中的「Capture screenshot」选项以获取当前视口的高清截图，或选择「Capture full size screenshot」以捕获整个页面的高清截图。

检查事件流

如果你的 Web 应用通过服务器发送事件（Server-Sent Events, SSE）从服务器接收一系列的事件流，你或许需要能够在 DevTools 中检查这些传入的事件流。SSE 的行为与传统请求-响应模式有所不同，因此，在 Network 面板中你只会看到一个请求。

不过，在Chromium浏览器中，你依然能够轻松地检查传入的事件流。只需打开对应的请求，然后导航至「EventStream」标签页即可。此外，这个标签页还会捕获服务器通过XHR和Fetch发送的事件，让你能够全面了解事件流的动态。与网络面板类似，还可以使用正则表达式来过滤流，或清除表格中的项。

查看和复制样式更改

DevTools 允许你调整页面样式并实时预览效果。但逐一识别并手动复制修改过的样式到编辑器中是相当的麻烦。如果你常需要在编辑器和 DevTools 间来回切换以复制样式变更，那么这里有一个更便捷的方法。

在Firefox中 ：只需在「Rules」面板中对CSS声明进行所需调整，然后开启「Changes」选项卡，即可快速查看所有已变更样式的差异。点击「Copy All Changes」按钮，即可一键复制这些修改过的样式，之前的声明会自动以注释形式保留，方便对比和整合。

实时表达式

如果你经常需要在控制台中重复输入相同的JavaScript表达式，那么实时表达式功能将大大简化你的工作流程。这一功能类似于调试器中的监视功能，能够实时计算你在与网页交互时所使用的表达式值。

在 Chromium 浏览器中，只需点击控制台中的眼睛图标，即可轻松创建一个实时表达式。随后将出现一个文本框供你输入表达式。只需在文本框中输入表达式，然后按下 Enter 键，即可实时查看计算结果。

调试水平滚动条

在前端开发过程中，不期望出现的水平滚动条常常成为调试的难点，尤其是当需要定位导致溢出的具体元素时。幸运的是， Firefox 提供了独特的方法来轻松识别这些元素。

在 Firefox 的「Inspector」面板中，系统会自动为具有滚动条的元素添加 scroll 标识。只需点击这个标识，Firefox 就会立即高亮显示那些导致容器产生滚动条的元素，并为其加上 overflow 的标识。

往期回顾