开发者工具

---

在日常的开发过程中，我们可能需要不断的调试我们的代码，这个时候，如果一直在编辑器和网页中进行切换的话，会极大的降低我们的效率，所以我们要学会使用Chrome的开发者工具来进行调试。(图看不清楚的就拖出来看)

通过点击网页上的空白部分调出菜单，选择检查进入工具或者使用其他快捷键
下图就是默认的开发者工具（所在位置可以点击右上方的三个点进行设置）

概述

在1的中，右边按钮的作用是进入响应式设计模式，我们可以在这里对不同分辨率的机器进行模拟，这个时候显示内容的部分会变得很小，我们可以在上方输入需要的分辨率数据，或者是直接点击横条上的默认设置进行设计。

在调试HTML和CSS的过程中我们基本只需要使用第一个Element的窗口，后面的几个Tab我们以后学习JS和调试性能等的时候会再用到。

HTML

默认显示的视图中，左边一部分是我们的HTML文档结构，我们可以点击小箭头打开节点或收缩节点，当鼠标知道某一个元素时，在网页中会将对应的部分内容进行浅蓝色背景的高亮显示（padding，margin等是不一样的颜色），上图就是在我鼠标指到3位置时2显示的高亮效果。

与此同时，当我们需要在网页中找某一个元素，但是并不想在树中一层一层的找的时候，可以使用1左边的按钮或者使用Ctrl+Shift+C的快捷键快速的在网页中选择我们需要的节点，当点击一个高亮元素过后，会在文档中展开节点并获取焦点。

如果我们想要编辑某一个节点的内容的话，我们可以点击右键选择，Edit As HTML或者直接双击，其中的节点都会被当成普通的文本编辑，编辑完成后当作html解析。

在最下方的4是我们此时获取焦点的节点的层级结构，我们可以点击其中任意一个节点，此时选中的焦点便会跳转（所谓选中的焦点，可以理解成我们在右边显示的属性）

CSS

头部

在5这一行中，我们暂时只需要使用前面两个，第一个就是我们默认选中显示的style，当这个选项卡启动时，我们下方将显示选中节点的CSS属性，当然，这里的CSS属性都是设置值。对应的，右边的computed选项卡下就是我们每个元素css属性经过计算过后的具体值，比如我将父元素的宽度设置为1000px，子元素设置width:50%，这个时候，我们经过计算的宽度就是500px。

在6的位置
1.:hover按钮可以选择节点的状态，:hover，active等等，所以我们要观察hover状态的时候就可以解放自己的双手了，将此处的状态设置为hover的话，元素就会一直保持状态，其他的状态也是一样的。
2.第二个是进行动画调试的，我们展示不会用到
旁边的.cls可以用于给节点添加一个class，进行添加过后的class也会添加到DOM的class属性当中。
3.最右边的加号可以依据当前节点的标签和class，id等添加一个样式，注意这个样式是添加到一个叫做inspector-stylesheet的样式表中的。

主体

在7，8这一块是我们调试的重头部分，就是我们节点的css样式，从上到下优先级依次降低，第一个element.style样式就是我们在文档中设置的css，过后是我们添加的inspector-stylesheet样式，在之后的就是我们根据引用和属性覆盖的一层层css样式了，在这些样式里面，被划了横线的就是被注释掉，显示为浅灰色的就是不起作用（存在优先级更高的）的css属性，所以我们在自己写的css中注释掉的一些代码也会显示出来。

在7中，右边显示的是这个样式的来源文件和行数，我们可以通过点击大括号内的属性对他们进行编辑，也可以点击一个属性后面的空白处选择新建一行书写新的属性，在开发工作中，我们需要进行微调的时候，这样做可以极大的提高我们的工作效率。

在8中，左上角显示了一个inherit from，这就是我们从祖辈元素继承的属性，在这里更改属性的话，理所应当的也会改变祖先元素的样式。

好好学习，天天向上，第二期调试JS的出来了会在这里加个链接的