Chrome DevTools中这些骚操作，你都知道吗？
最新回答
饮尽孤单
2026-04-18 23:45:48
本文将分享在 Chrome DevTools 中使用的一些实用功能和调试技巧，帮助开发者更高效地解决问题。
一. 保留日志
在刷新页面后，控制台的 Console 面板通常会被清空。若希望保留控制台中的日志信息，可以通过在设置中勾选“Preserve log”选项实现。
二. 显示重绘
在浏览器的开发者工具中，通过启用“显示重绘”选项可以观察页面在执行操作时哪些元素发生重绘。在控制台右上角的三个点中选择“More tools”选项卡，开启“Rendering”（渲染）选项。
开启“Rendering”选项后，再打开“Paint flashing”（绘制闪烁）功能。刷新页面时，绿色区域将显示为重新绘制的区域。
三. 检查动画
开发者工具不仅支持调试样式，还能用于动画调试。在控制台右上角的三个点中选择“More tools”选项卡，点击“Animations”（动画）选项卡。
当页面的动画执行时，可以在时间轨道上查看所有动画，通过点击动画可以了解执行过程及时间轴。在时间轴上定位任一时刻的动画帧，拖动左右两端的圆点可修改动画的延迟和周期，修改后可在属性面板查看相应的 CSS 样式。
四. DOM 操作的断点
在页面内容发生变化时，若想了解哪些脚本影响了它，可以通过设置 DOM 断点来实现。右键点击需要设置断点的 DOM 元素，在弹出的菜单中选择“Break on”以选择合适的断点。
断点类型包括：Break on property change（属性更改）、Break on event（事件）和 Break on execution（执行）。设置后，页面刷新时触发断点的事件将被暂停，以便进行调试。
五. 双屏模式
启用双屏模式可以在 Chrome DevTools 模拟器的双屏设备上调试网页应用，非常适合开发折叠屏手机应用。以下是开启双屏模式的步骤：
1. 点击“移动设备调试”；
2. 选择一个双屏设备；
3. 点击上方的“切换双屏模式”按钮。
通过双屏模式，开发者可以更直观地在实际设备上预览和调试网页应用。
关注我们，获取更多开发者资源和干货。
欢迎访问我们的官网体验 Mapmost——GIS、三维美术、计算机技术的综合解决方案。
热门标签
