Chrome DevTools中这些骚操作，你都知道吗？

作者：Seven
大家好，我是 Seven
今天来分享 Chrome DevTools 中一些非常实用的功能和调试技巧！

一. 保留日志

当我们刷新完页面之后，通常控制台的 Console 面板就会被清空。如果想保留控制台的日志，就可以在设置中勾选 Preserve log 选项以保留控制台中的日志。

保留日志设置，图源：@Seven

二. 显示重绘

在浏览器的开发者工具中可以通过开启显示重绘选项以查看页面在执行操作时哪些元素会发生重绘。在控制台右上角三个点中的 More tools 选项中开启 Rendering 选项卡：

重绘开启界面，图源：@Seven

开启 Rendering（渲染）选项后，开启 Paint flashing：

重绘显示效果，图源：@Seven

当刷新页面时，显示绿色的区域就是重新绘制区域。

三. 检查动画

Chrome 的开发者工具不仅可以调试样式，还可以调试动画，可以在控制台右上角三个点中的 More tools 选项中开启 Animations 选项卡：

动画调试工具，图源：@Seven

当页面的动画执行时，就会在时间轨道上查看所有的动画，点击其中一个动画可以懂得执行过程以及时间轴：

动画调试效果，图源：@Seven

我们可以在时间轴上定位到任一时刻的动画帧，也可以拖动左右两端的圆点来修改动画的延迟和周期，修改之后可以在属性面板看到对应的 CSS 样式。

四. DOM操作的段点

当页面的内容发生变化时，如果想要知道是哪些脚本影响了它，就可以给DOM设置断点。我们可以右键点击需要设置断点的DOM元素，在弹出的菜单中点击Break on以选择合适的断点。

DOM设置断点，图源：@Seven

可以看到，Break on中有三个选项：
●Subtree Modifications：子节点（内容、属性）修改通知，常用在子节点内容发生变化后，来定位源码；
●Attributes Modifications：当前节点的属性修改通知，常用在节点的 className 等属性被修改后，来定位源码了；
●Node Removal：当前节点移动时通知，常用在节点被移除时，定位源码。

五. 双屏模式

通过启用双屏模式，可以在 Chrome DevTools 模拟器的双屏设备上调试你的 web 应用。这对于开发要适配折叠屏手机的应用是非常有用的。

双屏开启效果，图源：@Seven

那该如何启用该功能呢？可以通过以下步骤来开启此功能：
1在任意页面打开 Chrome 浏览器的 DevTools；
2点击右上角设置图标 -> 选中左侧 Experiments -> 勾选 Emulation: Support dual-screen mode；

双屏设置界面，图源：@Seven

3、重启浏览器的 DevTools；
4、①切换到移动设备调试 -> ②选择一个双屏设备 -> ③点击上方的切换双屏模式。

双屏开启效果，图源：@Seven

 关注Mapmost，持续更新GIS、三维美术、计算机技术干货

Mapmost是一套以三维地图和时空计算为特色的数字孪生底座平台,包含了空间数据管理工具(Studio)、应用开发工具(SDK)、应用创作工具（Alpha）。平台能力已覆盖城市时空数据的集成、多源数据资源的发布管理，以及数字孪生应用开发工具链，满足企业开发者用户快速搭建数字孪生场景的切实需求，助力实现行业领先。

欢迎进入官网体验使用：Mapmost——让人与机器联合创作成为新常态

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。微信公众号：Mapmost