CSS 开发必知必会的好多浏览器调试技巧

大多数开发者基本都使用浏览器的开发者工具调试前端，虽然使用了好几年 Chrome 的开发者工具，但仍然会遇到从未见过的技巧和功能。

一些是有关于工作流与调试的简单技巧，另一些则是最近几年推出的新功能。它们大多数基于 Chrome 的开发者工具。

通过 CSS 选择器寻找元素

在开发者工具的 Elements 面板查找大多数元素的 CSS 并不困难。大多数情况下你只需要右键该元素，点击检查，然后（如有必要）仔细点在 Elements 面板找到它进行编辑。

你也许知道你可以用内置功能（CTRL + F 或者 CMD + F）在 Elements 面板搜索一个元素。但注意看 “find” 栏，它会给你以下提示：

你可以通过字符串、选择器以及 XPath 寻找元素，之前我一直都在使用字符串，直到最近我才意识到我可以使用选择器。

下面是一个使用 body > div 选择器来搜索以及遍历 body 所有直接子 div 元素的 demo：

如上所述，这些搜索可以通过任意合法选择器完成，类似于 JavsScript 的 querySelector() 和 querySelectorAll() 方法。

直接编辑盒模型

盒模型是你开始使用 CSS 首先学习的东西之一。由于这是 CSS 布局的一个重要部分，开发者工具允许你直接编辑盒模型。

如果你审查了页面上的一个元素，请在右侧面板单击 Styles 面板旁的 Computed 面板。你将看到该元素的可视化盒模型图示，上面有各部分的数值，可以通过双击任意编辑它们的值：

所做的任何更改都会以与在 Styles 面板中编辑 CSS 时相同的方式反映在页面上。

在 Styles 面板递增或递减属性值

你可能已经意识到可以在 Styles 面板中编辑 CSS。只需单击属性或值，然后键入更改即可。但也许你没有意识到数值可以以不同的方式递增或递减。

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

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

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

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

使用 CTRL 键进行多项选择

如果需要在单个文件中选择多个区域，可以通过按住 CTRL 键并选择所需内容来完成此操作，即使它不是连续文本也是如此。

在上面的 demo 中，我在 Sources 面板中选择了 main.css 文件的三个任意部分，然后将它们粘贴回文档中。此外，你还可以通过多个光标在多个地方进行同时输入，使用 CTRL 键单击多个位置即可。

使用 ALT 键选择列

有的时候，你可能希望选择一列文本，但通常情况下无法办到。某些文本编辑器允许你使用 ALT 键来完成此操作，在 Sources 面板中也是如此。

使用 CTRL + SHIFT + O 组合键通过 CSS 选择器搜索元素

在 Sources 面板打开文件后，按下 CTRL + SHIFT + O 组合键，可以打开一个输入框让你跳转到任意地方，这是 Sublime 一个著名的功能。

按下 CTRL + SHIFT + O 之后，你可以输入你在本文件中想查找元素的 CSS 选择器，开发者工具会给你提供匹配选项，点击可跳转到文件的指定位置。

开发者工具的颜色功能

在 CSS 中处理颜色值是常态。开发者工具让可以你更简单地编辑、测试颜色值。

对比度

首先，开发者工具有查看可访问性功能，当你在 Styles 面板看到 Color 属性值时，你可以点击颜色值旁边的方块打开颜色采集器。在颜色采集器里面，你将看到对比度选项指示你所选择的文本颜色搭配背景是否有可访问的对比度。

如上所示，颜色采集器在色谱中显示出弯曲的白线。这个线表示最小可接受对比度开始和结束的位置。当我将颜色值移到白线上方时，对比度旁的绿勾将会消失，表明对比度较差。

调色板

除了查看可访问性的功能之外，你还可以访问不同的调色板，包括 Material Design 调色板以及与当前查看页面关联的调色板。

切换颜色值语法

最后，在开发者工具中一个鲜为人知的小知识是在查看颜色值时你可以切换颜色值的语法。默认情况下，Styles 面板会显示 CSS 里写的颜色的语法。但是开发者工具允许你按住 shift，点击颜色值左边的小方块，在 hex、RGBA 以及 HSLA 之间切换颜色值的语法：

编辑 CSS 阴影

text-shadow 和 box-shadow 的 CSS 手写起来很乏味，语法很容易忘记，且两种阴影的语法略有不同。

方便的是，Chrome 的开发者工具允许你使用可视化编辑器添加 text-shadow 或 box-shadow。

如上所示，你可以用 Styles 面板中任意样式右下角的选项栏给任意元素添加 text-shadow 或 box-shadow。阴影添加后，你可以用可视化编辑器编辑不同的属性值。已存在的阴影可以通过点击属性值左边的小方块重新呼出可视化编辑器。

如果您觉得这篇文章对您有所帮助，请多多转发评论收藏点赞，关注我，后续还会有更多精彩文章分享给您。

如果您在编程学习上有所困惑，后台私信我“学习”帮您解决。

文章来源: https://www.toutiao.com/group/6720743147099390478/