Chromium 开发工具为调试和测试 Web 应用程序提供了一个强大的工具集，但大多数人都满足于使用它来检查元素和样式。
本文将让您大开眼界，了解开发工具的真正威力以及如何利用它们为您带来优势！
1. CSS Grid & Flexbox 可视化编辑器🔎
配置Flexbox和CSS Grid可能很复杂，尤其是对于初学者。幸运的是，Chromium 开发工具有一个内置的可视化编辑器，让这个过程在公园里散步！
只需单击开发工具旁边display: flex或display: grid中的图标，即可打开可视化编辑器。
2. 盒子阴影编辑器👥
要添加看起来很棒的box-shadow，以防万一他们没有准备好设计，开发人员经常依赖反复试验，其中包括更改值和重新加载网站数百次！
Box Shadow Editor允许您直观地修改阴影并实时查看您网站上的更新！
3.图层检查器🍰
图层检查器提供站点中图层的3D 视图，可帮助您调试某些元素在网站上无法正确显示的原因！
如果您找不到图层检查器，请单击右上角的三个点> 选择更多工具>图层。
4.动画检查员😉
曾经在某个网站上看过令人难以置信的动画，但无法理解它是如何制作的？使用动画检查器，现在您可以轻松检查所做的更改，甚至修改它们的时间线！
如果您看不到动画检查器，您可以通过选择 更多工具下的动画来打开它。
5. 检查代码覆盖率🔎
想知道为什么您的网站需要很长时间才能加载？代码覆盖率工具将准确地告诉您实际使用的代码百分比，使您能够摆脱未使用的代码并提高站点的性能！
如果您看不到Coverage Inspector ，您可以通过选择 More Tools下的Coverage打开它。****
6. 限制网速⏱️
是否也想为连接速度较慢的设备提供出色的性能？您可以通过限制网络速度来测试体验。
Dev Tools中的Network 选项卡下提供了限制选项。********
7. 颜色选择器🎨
就像Box Shadow Editor一样，Color Picker允许您直观地修改元素的颜色并实时查看您网站上的更新！
要开始使用，请单击样式选项卡下颜色值左侧的颜色图标。
你知道吗，解决难题可以让你更聪明？看看我们在亚马逊上收集的谜题！
