1. 如何打开 Chrome 调试工具
谷歌浏览器自带的调试工具比较好用，使用方式：打开浏览器，鼠标在界面任意地方右击，然后在弹出框选择检查就可以打开。
或者使用快捷方式F12也可以打开
在调试工具界面的右上角有三个圆点 ... ，点击它，可以根据自己的喜好选择调试工具停靠的位置：
2. 如何选定元素
方法一
在工具栏左上方的 元素（有的电脑上是 elements ） 中点击需要调试的元素就可以选中，这时在右侧的 样式 栏中就能看见选中的元素设置了哪些样式，以谷歌浏览器首页的 logo 为例：
方法二
点击工具栏左上角类似箭头的按钮后，直接在网页中点击需要调试的元素也可以选中，这时箭头的颜色会从黑色变为蓝色：
3. 如何控制样式
需要注意的是，在调试工具中修改的样式并不会生效，调试工具中修改的仅仅只是当前调试的效果，要想永久保留此效果，需要在代码中做同样的修改。
- 修改属性值：直接点击要修改的属性值就可以输入要修改的内容，数值类的属性值还可以使用鼠标滚轮或键盘的向上/向下键调节大小。
- 添加属性：在上一个属性的分号后点击一下，就可以直接添加属性，比如添加一个 color 属性:
- 控制样式生效：点击属性前的复选框就可以选择让哪个属性生效，不让哪个属性生效，例如不让高度和宽度生效：
4. 样式排错小技巧
在开发中，常常会遇到这样一种情况，明明设置了样式，但它在页面中就是不生效，这时我们可以选中对应的元素，然后在样式栏中检查设置的是否合适，通常有两个小技巧可以用来排查，利用好工具能够解决一大半问题：
技巧1 查看设置的样式上是否有删除线,如果有，那就是样式失效了，要么是样式被注释了，要么就是样式被覆盖了，需要返回代码中检查。
技巧2 检查样式前是否有带感叹号的小三角形，这是样式报错。
在代码中找到该样式，看看是不是样式写错了，常见的错误有：1）属性值后面没有写分号；2）写了分号，但是是中文标点；3）属性名或属性值的单词拼写错误。
以上三种常见错误，一般代码编译器会有提示
