在前端开发过程中，通常有一部分时间是在调整CSS样式，使用好Chrome Devtools会大大提高调试或者开发的效率。
本文主要内容会分为两部分：
- 基础：如何使用Chrome Devtools 调试页面元素的样式
- 主题：如何使用Chrome Devtools 调试页面中动态显示的元素的样式
其中第一部分主要是照顾部分读者不熟悉Chrome Devtools的基本使用方法，如果你已经是“老司机”完全可以直接阅读第二部分
[基础]如何使用Chrome Devtools 调试页面元素的样式
以知乎文章页面为例
FreewheelLee：为什么你的 z-index 又不管用了——最通俗易懂的 z-index 的使用讲解zhuanlan.zhihu.com
假设我们要调试头像相关的样式，首先是定位到对应的html元素，有两种方式：
- 鼠标悬浮在头像上，右键，选择最后的审查(Inspect）
视频演示：
知乎视频www.zhihu.com2. Mac 使用 command + option + i （windows快捷键 ctrl + option + i) 打开，然后使用Devtools 左上角的选取按钮，再点击头像元素
视频演示：
知乎视频www.zhihu.com定位到元素后，查看下面的 Styles，就可以看到当前元素的样式和它们的来源了
接下来可以做很多操作，比如增加自定义的样式来测试效果、取消某些class带来的样式等等
视频演示：
知乎视频www.zhihu.com现实开发中，我们可以使用这种方式直接调试css，达到自己满意的效果后，把css样式再真正写回到代码里 —— 而不是每次在代码中更改css，刷新页面查看效果，来回往复地操作。
如何使用Chrome Devtools 调试页面中动态显示的元素的样式
上面的方法适用于大多数开发场景，即 html 元素是静态的，在Devtools中可以直接定位到。
但是有时候调试对象是动态显示的html元素时，上面的方法就不管用了。
比如当鼠标悬浮到我的头像上时，会出现一个悬浮卡片显示我的信息。一旦鼠标移开，那个卡片就自动消失了。假如我们需要调试悬浮卡片的样式，上面的基础方法就行不通。
视频演示：
知乎视频www.zhihu.com在讨论解决方案前，读者们先思考一下这种动态显示的元素通常是怎么实现的？
业界常见的实现方法有两种：
- 其实这些元素一早就存在html中了，只是使用了某些css样式将其“隐藏”起来 —— 比如设置display属性、设置位置使其不在视野内等。
- 需要动态显示时，即时地将元素创建出来并插入到合适的位置。
但无论哪种方式，通常都有一个共同点 —— 触发显示/隐藏的元素（比如本例中的头像元素）的状态在动态元素（比如本例的信息卡片）显示/隐藏时也会有所变化（尤其是属性）
视频演示：
知乎视频www.zhihu.com当鼠标悬浮在头像上和移开的时候，在Devtools里可以看到有个div元素的aria-expanded会在 true 和 false 之间切换。
利用这个特点，使用Devtools的 条件断点功能 就能定位到元素了
先视频演示再讲解：
知乎视频www.zhihu.com步骤分解：
- 在这个例子中，找到刚刚那个aria-expanded属性来回变化的div
- 右键点击，选择 break on - attributions modification，点击，就会在 Devtools 里看到一个蓝色的断点
- 鼠标移动到界面头像上，此时div的属性即将变化（aria-expanded将变为 true )，因此断点被触发，页面就停止了。
- 点击界面上方的蓝色三角符号，表示允许页面继续运作，此时信息卡片就会出现
- 切回Devtools 的 Elements（元素）tab，点击左上角的选取，点击信息卡片，我们惊喜地发现成功定位到卡片元素了
- 鼠标移到 Devtools ，此时页面认为鼠标移走了，会触发div 的属性变化（aria-expanded将变为 false )，又触发了断点，这次就不要点击蓝色三角符号了，我们希望页面停留在当前状态（卡片出现的状态）
- 接下来就是调试卡片css的时间了，比如在视频中我修改了字体的大小和颜色，完美！
Bonus:
针对动态创建元素并插入html的实现，有时候我们可以使用 break on - subtree modification 的条件断点来暂停页面运行。但这个方案的难点在于如何找到合适的元素设置断点，以及断点可能会被触发多次，比较麻烦。读者可以自行尝试。
总结
今天的文章介绍了 Chrome Devtools 调试 css 的功能，尤其是动态元素的极端case，很多人（包括曾经的我）都比较困扰。希望对大家有帮助、启发！
其实这只是 Chrome Devtools 功能的冰山一角，还有其他很多有用的功能，欢迎读者去自行学习。也欢迎留言评论你们最想了解的功能，或者遇到的困难，后续我可能会多写几篇相关的文章。
参考链接：
https://www.youtube.com/watch?v=Z3HGJsNLQ1E&ab_channel=LearnCode.academy
https://developers.google.com/web/tools/chrome-devtools/css
6272
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
