转眼就毕业了，大家都各奔前程，同学有走读研，有走后端，有走测试，前端就我一个人了，所以肩负起那些走南闯北的同学的希望，解决他们遇到的前端Bug问题，然后发现好多同学都不会借助浏览器调试找出问题的所在，超级心累
因此留下这篇日志，为了方便我前端小白的那些同学更快解决问题。
此文只介绍Google的Chrome DevTools，其他浏览器大同小异，请自己探索。
Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具，可用来对网站进行迭代、调试和分析。
打开Chrome 开发者工具
- 在页面元素上右键点击，选择 “检查”
- 使用 快捷键 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)
我就拿我的知乎主页来介绍吧，开发者工具打开之后
我们先了解一下开发者工具的面板介绍：
- 设备模式
当你的项目是移动适配时，你可以根据这个选项设置你的设备类型，包括IPhone6/7/X等设备
- 元素面板
你可以选择开发者工具中的左上角的那个Button，或者Windows下使用快捷键Shift+Ctrl+C
检查应用到元素的样式
- 与元素匹配的选择器的关联样式。
- User Agent 样式表清晰标记，并且在网页上经常被 CSS 替换。
- 已被级联规则替换的规则将显示为带删除线的文本。
- 继承的样式将在“Inherited from
”标头下显示为一组。点击标头中的 DOM 节点可以导航到其在 DOM 树视图中的位置。 （CSS 2.1 属性表显示了哪些属性是可以继承的。） - 灰色的条目不是已定义的规则，而是在运行时计算的规则。
如图示，当你在点击该Button时，鼠标在页面上选择任意元素，Element中会自动对齐到相应的位置，那么我们接着讲元素的其他操作
比如，我们想知道页面上这个提问按钮的颜色是什么，我想改变，但是不知道什么颜色好看呀，我可以在页面上边看效果，边确认自己的想法
- 取色器。请参阅取色器了解更多信息。
- 当前颜色。当前值的可视表示。
- 当前值。当前颜色的十六进制、RGBA 或 HSL 表示。
- 调色板。请参阅调色板了解更多信息。
- 着色和阴影选择器。
- 色调选择器。
- 不透明度选择器。
- 颜色值选择器。点击可以在 RGBA、HSL 和十六进制之间切换。
- 调色板选择器。点击可以选择不同的模板。
接下来，我们讲讲如何查找类名及其样式，并在页面上修改
比如，我们要找页面上一个叫做UserAvatar的类名，然后在页面上查看他的样式，并进行一些样式的修改
你可以实时的修改HTML元素和CSS样式，当然这些浏览器也会有相应的提示。
HTML元素右击可以修改相对应的属性值
接下来就是见名知意，大家可以自己尝试下其他的功能。
在你选择到你要查看的元素后，你可以在开发者工具中看到你选择HTML，包括类名，然后你可以看到该元素类的样式
使用 Computed 窗格检查和编辑当前元素的框模型参数，该元素是在计算后的表现（包括margin，border，padding，这里需要理解一下盒子模型）， 框模型中的所有值均可修改，只需点击它们即可。
在 Styles 窗格中，点击您修改的文件。DevTools 会将您带到 Sources 面板，很多时候你的代码都是被压缩的状态，你可以点击左下角的{}将其进行格式化
添加、启用和停用 CSS 类
我们接着来看这个提问这个Button，点击 .cls 按钮可以查看与当前选定元素关联的所有 CSS 类。 从这里，您可以执行以下操作：
- 启用或停用当前与元素关联的类。
- 向元素添加新类。
添加或移除动态样式（伪类）
有的时候，我们需要查看一些伪类或者动态元素样式在触发之后的状态，例如a标签hover之后的状态,例如，我们将页面中<a class="AppHeader-navItem" href="//www.zhihu.com/">首页</a>在触发hover之后的颜色和字体更改为color:red;font-size:20px;
从图示可知，我们在选择hover之后，之前灰色的样式变成正常转态，也就是这部分样式生效了，或者右击该元素选择进行下列操作也可以实现
Styles 窗格提供了一个用于向样式规则添加 color 和 background-color 声明的快捷方式。样式规则的右下角有一个由三个点组成的图标。您需要将鼠标悬停到样式规则上才能看到这个图标。这5个图标可以通过提示得知它们的作用
第一招，关于设备模式以及元素面板的招式，基本上已经学完了，大家可以尝试一下，我们第二招再见