建议和技巧——Elements篇

使用标尺

在 Settings > General > Show rulers a ruler 中可以开启标尺，当鼠标悬浮在元素上面或者将其选中，标尺就会显示自动显示出来。

小技巧——页面元素篇 - 图1

CSS属性自动补全

DevTools支持CSS属性名和值的自动补全（包括带前缀的），在补全列表中你就可以看到当前元素是可以设置哪些属性的。

当你输入属性名或者其值的时候，DevTools会自动给出提示，使用上下箭头可以在提示列表中进行选择。给元素添加属性后，页面就会立刻生效。

小技巧——页面元素篇 - 图2

在 Styles 面板中，可以选择CSS颜色值，格式包括 名字(例如’red’), HSL, HEX或者RGB。按住shift键，在颜色上单击鼠标可以进行不同格式之间的切换。

如果你希望显示一个属性所有支持的值，使用Ctrl+space。

小技巧——页面元素篇 - 图3

这个提示列表与具体的属性类型相关（例如font），数字和带前缀的数值也支持。

小技巧——页面元素篇 - 图4

颜色选择器

DevTools内置了一个颜色选择器，用鼠标单击颜色的小方块，就会开启选择器。使用选择器可以选择页面中的任何颜色。（译注：这个非常给力，尤其是参考某个页面的时候）

小技巧——页面元素篇 - 图5

按住shift并单击颜色值，可以改变颜色的格式。

增加 CSS 样式

在一个css规则中大括号中间的任何位置单击鼠标都可以为当前元素添加一个新的CSS属性，添加后属性会立刻生效。

小技巧——页面元素篇 - 图6

添加完一个属性后，按tab键可以继续输入下一个属性。

在Style面板的右侧点击加号按钮，可以添加新的选择器。

注意：其实可以直接编辑选择器，在CSS选择器上单击，就可以直接修改选择器名字，一旦完成修改，之前选择器对应的属性就会应用到新的选择器上。

小技巧——页面元素篇 - 图7

新的伪类选择器同样使用类似的方式添加。注意，单击右侧的”toggle element states”按钮（加号的旁边），可以开启”Force element state”功能。这个功能非常给力，勾选对应状态，就可以强制的给当前选中的元素加特技（伪类）了。

小技巧——页面元素篇 - 图8

回到 “Matched CSS Rules” 面板, 点击CSS规则旁边的链接，可以直接定位到具体CSS文件的某一行。

小技巧——页面元素篇 - 图9

拖拽页面元素

在 Elements 面板里，可以拖拽一个元素来随意调整它的位置。

小技巧——页面元素篇 - 图10

强制元素状态

是不是有时希望强行的改变一个元素的状态?

  • 在一个子元素上右键，选择‘审查元素’
  • Elements面板中，在父元素上右键选择”Force Element State”
  • 你可以任意选择:active, :hover, :focus或者 :visited

小技巧——页面元素篇 - 图11

编写调试Sass

注意: 要在Chrome中调试Sass 需要3.3.0 (pre-release) 以上的 Sass 编译器, 支持source map生成。

处理一个带有预处理CSS的页面比较棘手，以为在DevTools中对CSS样式的修改一般不会更新Sass源码文件。这意味着如果想即时的改变样式，你需要手动的去在其他编辑器中修改源码文件。

最新的Sass工作流中这已经不再是一个问题，如果想支持Sass：

[1] 确认你的DevTools已经开启了实验室功能（译注：在地址栏输入 chrome://flags/ 开启工具实验室功能）

[2] 接着，前往设置页面，选择 Settings cog > Experiments 并勾选 “Sass stylesheet debugging” （译注：最新版本的Chrome已经将该功能移除实验室，可以忽略本步骤）

小技巧——页面元素篇 - 图12

[3] 前往 General menu > Settings > 勾选 “Enable source maps” 和 “Auto-reload CSS upon Sass save”

小技巧——页面元素篇 - 图13

timeout参数可以使用默认值。这取决于Sass编译器多久可以完成编译，你也可以禁用自动加载，而在需要的时候手动去刷新。

[4] 打开你想调试的页面

[5] 接下来，开启Sass编译器，使用如下命令sass --watch --sourcemap sass/styles.scss:styles.css，编译器会监测源码文件是否发生变化，并未每个生成的CSS文件创建source map,
如下面的控制台所示：

小技巧——页面元素篇 - 图14

确认Sass调试正确工作

[6] 如果正确配置完成，可以在Elements面板看到，每个样式后面对应的链接已经是.scss文件以及具体的代码行号了。

小技巧——页面元素篇 - 图15

[7] 点击文件名，就可以直接到Source面板中对应的源码行中，现在就可以直接在DevTools中的语法高亮编辑器中工作了。

小技巧——页面元素篇 - 图16

[8] 如果你希望在Source面板中编辑Sass文件，只要确认DevTools能够找到源文件的磁盘位置。在编辑器中右键选择”Save as”,可以用现在编辑的文件去覆盖源文件。DevTools支持文件自动加载，这样修改可以在Chrome中立刻生效了。

小技巧——页面元素篇 - 图17

想了解更多关于页面元素和样式的使用技巧，请自觉前往修改DOM样式一章。