Chrome浏览器调试 #

chrome 下的调试器里面灰色的样式是代表什么 #

注意：最后那个 width 属性是灰色的

灰色代表计算出来的样式。计算出来的样式在低版本浏览器是无法被子元素继承的，高版本浏览器则没有这个问题。

flex 与 height：100%的小坑

chrome 下的调试器里面灰色的样式是代表什么？

强制激活伪类 #

动态修改元素样式类名 #

计算样式定位到 CSS 规则 #

颜色选择器 #

另外，按住shift再点击第一个图的颜色方块，可以切换色彩模式

阴影选择器 #

animation 动画调试 #

CSS 属性值快速调整 #

复制控制台变量到剪贴板 #

网页可视化编辑 #

模拟弱网环境 #

XHR 重放 #

不一样的 Console #

截图 #

Performance #

Coverage #

Rendering #

Layers #

移动端 H5 调试 #

参考文章 #

Chrome 浏览器调试的日常使用总结