这几个前端调试技巧你可能没用过,但超级实用!

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

大家好,我是 CUGGZ。

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

  • 悬停时检查弹出窗口
  • 使用日志断点
  • 模拟可折叠设备
  • 自动完成样式
  • 切换颜色格式
  • 捕获高分辨率截图
  • 检查事件流
  • 查看和复制样式更改
  • 实时表达式
  • 调试水平滚动条

悬停时检查弹出窗口

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

要在 DevTools 中启用此功能,有两种方法:

  • 在“Elements”面板中选中触发弹出元素的项。接着打开“Styles”面板,并点击“:hover”按钮以激活悬停状态。然后,启用“Emulate a focused page”选项,这样即使你与 DevTools 交互,页面也会保持聚焦状态。
  • 打开命令菜单,运行“Show Rendering”命令,在DevTools底部打开“Rendering”抽屉。在抽屉中向下滚动,找到“Emulate a focused page”选项并勾选它。

使用日志断点

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

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

在 Firfox 中,可以在 “Debugger” 面板中使用类似的功能,只需找到想要记录日志的行号,右键点击,然后选择“Add log”即可。

模拟可折叠设备

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

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

自动完成样式

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

在Safari中,即使在声明中有拼写错误,网页检查器也会尝试模糊匹配,并建议最接近的属性-值对。

切换颜色格式

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

在Chromium和Safari浏览器中,可以通过颜色选择器从浏览器窗口外部轻松选取颜色。特别是在Safari中,还可以将颜色格式调整为display-p3。在颜色选择界面中,你会看到一条白线,它标示了sRGB的边缘。白线右上方的所有颜色都属于Display-P3色域,但在sRGB中并不可用。为了确保兼容性,可以右键点击颜色框,选择“Clamp to sRGB”功能,这将自动将其转换为 sRGB 空间中最接近的可用颜色。

捕获高分辨率截图

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

在Chromium浏览器中,操作步骤如下:

  • 在DevTools中,点击“Toggle device toolbar”图标(Cmd+Shift+M或Ctrl+Shift+M)进入响应式设计模式。

  • 在设备工具栏中,点击  中的 Add device pixel ratio 选项。

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

  • 点击 ⋮ 中的“Capture screenshot”选项以获取当前视口的高清截图,或选择“Capture full size screenshot”以捕获整个页面的高清截图。

在Firefox中:

  • 想要捕获页面的高分辨率截图,可以打开Console面板,并运行命令:screenshot --dpr 3,这样就能够以设备像素比设为3的方式获取截图。
  • 如果希望捕获整个页面的截图,只需在命令后添加--fullpage即可。此外,如果想要捕获某个可以通过选择器标识的节点的截图,可以添加--screenshot .header到命令中即可。

检查事件流

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

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

查看和复制样式更改

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

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

在Safari中:可以在“Styles”面板中对 CSS 声明应用更改,然后点击“Changes”面板以查看差异。

实时表达式

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

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

实时表达式会始终显示在控制台的顶部,便于随时查看。可以根据需要添加多个实时表达式,以便同时监控多个表达式的值。此外,如果想输入多行表达式,只需按下 Shift+Enter 即可。

调试水平滚动条

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

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

责任编辑:姜华 来源: 前端充电宝
相关推荐

2020-11-04 10:31:29

Jupyter NotPython数据分析

2017-07-26 10:08:06

FABDesign SuppAndroid

2018-09-27 15:58:06

MySQL数据库性能优化

2020-02-03 09:29:32

JavaScript代码断点

2021-01-03 16:12:35

Java工具开发

2020-01-17 20:00:25

SQL函数数据库

2022-06-08 21:08:22

微信朋友圈

2017-11-06 14:55:53

windows文件归纳

2022-11-29 07:33:15

JavaLombokRecord

2022-07-20 07:29:52

Java

2021-06-24 09:08:34

Java代码泛型

2024-03-26 00:48:38

Netty通信框架

2012-06-07 16:16:43

JavaScript

2017-03-22 19:52:16

Devops开源

2019-06-26 10:10:44

Linux终端命令

2020-10-20 18:51:43

C++IDECode

2022-04-07 07:36:04

APIJava 8JWT

2022-09-15 07:05:09

Windows电脑技巧

2023-09-26 08:16:25

分布式锁数据库

2024-03-12 10:02:31

Python内存编程
点赞
收藏

51CTO技术栈公众号