这是一篇番外，主要用于平复一下回家以后面对堆成山的工作的我那从天堂掉到地狱般伤痛的心情…

很多人在写代码的时候都会遇到这个问题，就是“为什么我的 CSS 没效果？”、“为什么我的 CSS 出来跟我写的不一样？”，而在看别人的页面的时候，我们有时也会想要知道，“哇噢，这么炫酷，他是怎么做的”或者“这里究竟是padding还是margin？”等等问题，其实这些问题都可以自己找到答案，方法则是使用浏览器自带的开发者工具。

现在的主流浏览器都配有开发者工具，只要按下F12就可以打开，所有的前端工程师都会使用这个工具来调试自己的页面，其实里面的功能是非常非常强大的。下面我将以Chrome为代表介绍，其它浏览的工具大同小异，看一下就会啦~~

PS:本文属于番外，可能有前文中尚未涉及的内容…不必惊慌反正你总有一天会学到的~

#调试窗口

首先在你想要查看的元素上点击右键–>审查元素（如果网页禁止了右键，可以直接按F12），此时浏览器会被分割开来弹出一个调试窗口（下图右侧）。当然如果你使用了最新版的Chrome，默认弹出的窗口会在模拟器状态，主要用于手机、平板和响应式设计的代码调试，如果不需要的话可以点击调试菜单左上角的手机小图标（下图橙色区域左边数第二个）关掉该模式。

而如果你的调试窗口出现在了屏幕下方，可以点击调试菜单右上角的分屏图标（下图橙色区域右数第二个）。我个人比较推崇这种左右布局，比较方便检索。

整个右半边的窗口就是调试窗口，根据其功能我大致划分成了4个区。

• 菜单栏（橙色）
• DOM结构（绿色）
• 元素信息（紫色）
• 元素布局（黄色）

菜单栏

菜单栏在前文已经介绍了两个功能——切换设备模式和切换调试窗口位置。其实中间那些英文单词的标签，对于前端样式调试来说都是用不到的。而最重要的可能就是菜单中的第一个“放大镜”工具（在某些浏览器中可能显示为一个标靶的样子）。

单击一下放大镜，图标会变为蓝色（此时便为激活状态），然后把鼠标移动到左侧的页面中，你会发现鼠标所到之处的元素会被或蓝或绿或黄的颜色高亮，当它高亮到你想要查看的元素时，单击左键，调试工具就会自动帮你定位元素并获取相关信息了。

DOM结构树

你可以简单地把DOM结构理解为网页的源代码，但它是以“元素”为单位进行管理的。

在我们选中某个元素之后，在这个DOM结构窗口中的对应代码就会被高亮，意思是说，我们在查看这个元素的信息。在截图中，我选中的是轮播图下方的小广告的第一张。

在某些情况下，使用放大镜工具是无法选中你想要的元素的（还记得网页元素的层层叠层层吗？这个工具只能帮我们选中鼠标所在的最上面那一层，下面的是选不到的）。这种时候你就要在DOM窗口中手动寻找~

另外当你鼠标在DOM结构上移动的时候，鼠标所指向的对应的元素同样会在左侧的窗口中高亮。

元素信息

有Styles、Event Listeners等等标签，当然其他的我们也用不到，只要看 Styles 就可以了。

在这里我们会发现代码被分成了若干行。第一行为element.style，意思是行内样式（也就是写在元素内style属性中的样式），后面的若干行是该元素的样式来源，依据不同的选择器而分开。

元素布局

如果你的调试窗口是在屏幕下方，那么这个区域会出现在元素信息之后，我觉得对于设计师来说，这个区块可能是最最重要（也是易懂的）。

它首先展示了该元素的盒模型，蓝色是内容区域，数字表示宽度和高度，我截图的这个元素没有padding、border和margin，所以它们都是“-”，如果任意一个属性有被赋值（只要不是0），对应的位置就会显示数字。

而它下面展示的就是应用在该元素上的所有样式属性（Show inherited properties是显示继承属性，偶尔，如果你找不到你想找的元素，可以勾上这个选框）。

查看、排查与调试

代码不生效有无限种可能，所以我们也要有一定的顺序。

是谁的样式

在我上面的截图中，我们看到img元素的属性中并没有margin或者padding值，但是它与它上下左右的元素都不挨着，如果我们想知道是哪个元素的哪个属性造成了这种状况，我们就需要在 DOM 树中向上查找，查看img的父元素、祖先元素。

一路向上，发现li元素中有margin-right属性，正是这个属性值造成了图片右边的间隙。当然你们可以用相似的方法找一找，这张图片上边、下边及左侧的间隙是谁造成的。

样式被应用了吗？

选中你的元素，在“元素信息”中查看选择器，比如你为那个元素写了一个名为 foo 的 class，那你在窗口中找到 .foo 了吗？

如果没有，要么是你 html 中的 class 拼错了，要么是你的 css 文件中有拼写错误或者语法错误（比如该写的反括号没有写，分号冒号写错了等等…）

样式应用了却不生效？

你可能会注意到了，元素信息中有些样式被划了横线，还有一些是灰色的。灰色代表浏览器不识别（比如 webkit 内核的 Chrome 是无法识别 -moz- 前缀的 css 属性的。划了横线则代表该属性被覆盖。

CSS 有其一系列的优先级设置，当然详细说起来就话太长太长了，各位可以随用随百度。这里要提醒一句的是，!important虽然很万能流逼，但是覆盖起来太困难了（这是优先级处于核弹级别的语句），js都奈何不了，所以一定要慎用慎用（能不用就别用…）

如果想知道属性是被谁覆盖的，则可以在右侧布局信息的下方，找到你想查看的属性，点击打开下拉三角，就会出现所有在该元素上生效的属性，当然只有最上面一条显示了，而下面的若干条都会被划上横线，属性的右侧会有该属性来源的 css 文件。在使用了 css 框架或者多个 css 文件的时候，这个工具会帮你快速定位到出问题的属性。

还有一种情况，是在样式属性前面出现了一个黄色三角的警示标志，那意思就是…你拼错啦 -v-

调试

你还在修改文件，保存，F5的调试过程吗？那你是在太~~~OUT了！试着在元素信息窗口中的 element.style 里单击一下，这时会出现一个输入框。随便输入一个属性比如…宽度（width），当你输入了 wi 几个字之后，它就会帮你自动补上了！有没有！很流逼！！然后回车，此时属性名已经帮你输入好，输入框弹到了冒号后面，在这里输入属性值，再次回车。有没有觉得，调试本应该如此轻松直观？

当然你也可以点击属性前面的小勾勾，临时禁用某一个属性。浏览器甚至允许你临时新建一个类，点击element.style最右边的加号，你就可以输入选择器，并输入属性。添加、修改、删除，都可以在浏览器中完成，并且操作直观。

在你完成调整之后，把对应的值抄回去就行了……呃对，浏览器只能帮你查看效果，但是不能帮你保存，当你刷新页面之后，你之前输入的所有内容就都消失了。