Chrome DevTools 实用技巧大全(收藏)

1. 动态修改元素样式类名
2. 强制激活伪类
3. 计算样式定位到 CSS 规则
4. 颜色选择器
5. 阴影选择器
6. CSS 属性值快速调整
7. animation 动画调试
8. 复制控制台变量到剪贴板
9. 网页可视化编辑
10. 模拟弱网环境
11. XHR 重放
12. 不一样的 Console
• console.log( ) | info( ) | debug( ) | warn( ) | error( )
• 占位符
• Console 也支持 CSS
• 表格形式展示 JSON 数据
• log 组合
13. 截图
14. Performance
15. Source Tab
16. Rendering
17. Layers
18. 总结

我们前端在日常开发中会经常遇到程序 BUG，为了快速解决 BUG，因此就需要灵活运用 Chrome DevTools 调试工具，所以今天就整理关于 Chrome 浏览器的调试方法，有需取之。

动态修改元素样式类名

增删类名在条件逻辑中比较常见，通过 devtools 可以直接动态修改/激活/禁用类名。

1. 在 DOM 树中选中元素
2. 点击激活.cls
3. 可通过选择框动态修改是否使用该类名
4. 可通过Add new class输入框动态添加已定义类名

总结

Chrome 浏览器为 WEB 应用开发者提供了功能丰富的开发调试工具，本文叙述了部分工具的使用场景、方法以及个人理解，工具只是作为开发的辅助，想要高效率地开发和解决 BUG，还需要在开发实践过程中不断积累并总结经验。