小知识，大挑战！本文正在参与「程序员必备小知识」创作活动
本文已参与 「掘力星计划」 ，赢取创作大礼包，挑战创作激励金。
devtools 设置
f12 右上角齿轮
1、修改主题（黑/白/跟随系统）
2、指定开发面板的语言，好处是方便理解各项菜单，坏处是没有熟悉的味道（指自开发以来都是英文面板）
元素/节点 （element）
在这个选项卡里，主要是对 html 的元素节点、样式、事件做操作
固定元素交互效果
有时候，我们需要调试的样式，是 :hover, :active, :focus 这类需要动态交互才会显示的样式。常规的方式是修改样式后，手动去交互触发，再调试效果，略显麻烦
现在，如图例，右键需要交互的 <a> 节点， 强制执行状态 -> :hover，直接将交互的效果固定下来，我们可以在右侧找到对应的 :hover 样式慢慢调整
或者，我们换一种方式来固定这个交互效果：
- 选中对应的元素
- 点击样式调整最上方的工具栏中的
:hov - 勾选对应的触发状态
- 在对应的样式里调整
为元素添加条件断点
如图示，右键元素，发生中断的条件 -> 3条件任选
- 子树修改，通过 js dom 操作添加关联了此事件的元素节点下时会触发断点
- 属性修改，对关联此事件的元素执行 js 代码
document.getElementById('demo').setAttribute('attr', 'val')后会触发断点 - 移除节点，例如
id="demo"的元素关联此事件，调用document.getElementById('demo').remove()删除此节点会触发断点
注意点：上述的触发事件，都是在 js 变更 dom 后触发，① 如果直接在开发面板中修改 html 是不会触发；② js 的 document.getElementById('demo').value = 1 不会触发属性修改事件；③ 在面板中直接通过右键菜单 删除元素 不会触发移除节点的事件
控制台（console）
切换 iframe 层
控制台的操作作用域，默认都是 top 层，有时候我们调试页面存在嵌套的情况，这时候我们切换到具体的操作的 iframe，就能操作对应的作用域的数据
添加实时表达式
点击 👁 弹出输入框，我们输入需要监听的表达式，然后在控制台修改表达式中的属性值，表达式会动态变化。大家可以挖掘出其他更加强大的用法
异常级别显示分类
根据自己的需要，让控制台显示哪些数据
来源（source）
重头戏，这里面的每个二级菜单都有大用途
网页
页面上使用到了各项资源，例如 js、css、img 等等，都会按照路径，以树形的方式排列显示在这里
有时，我们调试别人的站点上的 js 代码，可能是压缩过后的，也可能是格式非常的混乱，不便于我们阅读，在打开的 js 文件左下角有个双花括号的按钮，点击后，devtools 会给我们新开一个格式化好后的文件副本以供阅读
文件系统
根据官方的文档描述，如果是 vue-cli 构建的项目，可以将 vue 项目添加到这个工作区，然后就可以在 devtools 里编辑完源码后，效果自动更新，即 所见即所得
替换
一个非常实用的功能。比如，我们在 生产环境 下，有异常需要处理。我们最常做的方案有两种
① 将生产环境的相关数据备份到本地，再修改、测试
② 直接在本机盲改，检查确认无误后更新到生产环境，运气好的话一把过，运气不好就来回折腾
现在又一个更加优秀的方案，我们直接用本地的文件覆盖生产环境的待修复的文件，在本机进行测试，确认无误后更新到生产环境直接一把过！
- 在 替换 菜单下，添加一个文件夹，这个路径下将会存放调试的副本文件
- 添加文件夹的时候，devtools 会弹窗提示，确认即可
- 编辑任意文件，然后
ctrl + s保存的时候，devtools 会自动将副本文件存放到步骤 ①创建的目录下
也可以参考下方的 GIF 效果
代码块
可以理解为，谷歌浏览器为我们保存一些 js 代码片段。但我们需要时，可以右键对应的代码片段让他运行
创作不易，期待大家的鼓励❤~
