CSS 开发的 一些调试技巧DevTools(谷歌)

1.通过CSS选择器搜索元素

你也许知道你可以用内置功能(CTRL + F 或者 CMD + F)在 Elements 面板搜索一个元素。但注意看 “find” 栏,如下图:

正如我在截图中指出的那样,你可以通过字符串、选择器以及 XPath 寻找元素。之前我一直都在使用字符串,直到最近我才意识到我可以使用选择器。

你不一定要使用你 CSS 中用过的选择器,它可以是任意合法的 CSS 选择器。查找功能将告诉你选择器是否与任何元素匹配。这对查找元素很有用,还有助于测试选择器是否有效。

2.可以在Computed 面板直接编辑盒模型:(开发者工具允许你直接编辑盒模型)

如果你审查了页面上的一个元素,请在右侧面板单击 Styles 面板旁的 Computed 面板。你将看到该元素的可视化盒模型图示,上面有各部分的数值并进行编辑:

3.在style面板进行css的数值的递增或递减:

数值可以以不同的方式递增或递减。

上方向键 / 下方向键可以使属性值以 1 递增 / 递减

ALT + 上方向键 / 下方向键可以使属性值以 0.1 递增 / 递减

SHIFT + 上方向键 / 下方向键可以使属性值以 10 递增 / 递减

CTRL + 上方向键 / 下方向键可以使属性值以 100 递增 / 递减

如下图:

4.Sources面板的文本编辑器功能

猜你喜欢

转载自www.cnblogs.com/xiao-peng-ji/p/11984756.html