这是我参与「第四届青训营 」笔记创作活动的第11天
今天来聊一聊前端开发调试中的神奇——浏览器开发者工具，本文将以 Chrome 浏览器的开发者工具为例进行介绍。
开始使用
以谷歌浏览器为例，在浏览器浏览网页时，我们可以从右上角的“自定义及控制”->“更多工具”->“开发者工具”打开开发者工具。
我们也可以更便捷地使用按快捷键 Ctrl+Shift+I 或者 F12 打开。
需要注意的是，网页页面和开发者工具是一一对应的，所以我们在开发者工具中所做的调试和修改都只会对打开开发者工具的那个页面生效。
打开开发者工具后，我们可以在右上角选择开发者工具的停靠位置，可以停靠在页面的左、右、底部，也可以独立成一个窗口以免影响页面的长宽比。
开发者工具页面布局
打开独立窗口的开发者工具，我们可以看到整个页面可以分为顶部主导航栏、左上的页面元素、右上的元素样式、底部的控制台副标签。
修改元素样式
使用开发者工具左上角的选择工具，或使用快捷键 Ctrl+Shift+C 打开选择工具，在页面上点击需要选中的元素，HTML 代码页就会自动跳转到该元素所在的代码行，并在右侧显示其样式：
双击 HTML 代码可以修改元素的属性值，右键还可以进行添加属性等操作，在右侧可以看到该元素继承的和自身的各种样式，同样也是双击修改。
其他相关操作：
- 点击右侧样式标签页上方的“.cls”可添加类样式
- 勾选/取消类名可以控制该类样式是否生效
- 双击一段样式代码的空白处可以添加新的样式
- 双击样式属性名或属性值可以进行编辑
- 计算样式中可以查看元素盒子以及各种计算样式，点击灰色箭头可以跳转到 CSS 代码中对应的规则
- 点击右侧样式标签页上方的“.hov”可强制激活伪类
- 在 DOM 树右键菜单，选择 Force State 也可以强制激活伪类
Console
在 js 代码中使用 console 语句，当代码执行到此处时就会在控制台输出一段信息，用法如下：
- console.log，输出一段日志文本
- console.warn，输出一段警告文本，使用明黄色强调
- console.error，输出一段错误文本，使用红色强调
- console.debug，输出一段 debug 文本
- console.info，输出一段信息，默认不显示在控制台
- console.table，以表格形式展示 JSON 对象和数组
- console.dir，以文件树形式展示 JSON 对象属性
- 占位符，使用 console.log 时，可以通过占位符为文本添加样式：
- %s，字符串占位符
- %o，JSON 对象占位符
- %c，样式占位符
- %d，数字占位符
