介绍

在日常写 DEMO 时需要一步步调试，接着将修改的内容复制保存到编辑器中，这样的操作很繁杂。更好的形式是修改玩浏览器的样式后，本地同时变更，所见即所得。

步骤

1. 添加工作区

首先在启动的页面按下 F12 或（Ctrl + Shift + i）即可打开开发者工具。

将当前的开发者工具切换到 Sources 下，再将子内容切换至 Filesystem，点击提示 Add folder to workspaces 添加当前页面的项目（文件）目录。

2. 编辑内容

将内容添加至工作区后，可以观察到当前页面关联的文件右下角会有一个小绿点。

切换回 Element 标签，审查一个关联了 CSS 的元素，可以看到元素使用的 class 样式来源的文件右下角有一个的小绿点，表示该部分内容已关联。

修改内容：

color: red;
/* 修改为 */
color: mediumpurple;

可以观察到浏览器的样式已经修改，回到编辑器检查，发现编辑器的内容也已经被修改了。

3. 更多编辑

在上一步演示了如何修改 CSS 的样式，但是修改 HTML 和 JavaScript 就不是那么容易的事情了。

首先要了解一个概念，DOM Tree 不等价于 HTML。当我们编辑 Element 中的内容修改的是渲染后的结果，其结果受多种因素影响，往往无法确认该修改哪一步，所以浏览器也无从处理。

当然编辑还是可以编辑的，回到 Sources 标签，点击对应的文件，直接进行修改，回到编辑器后就可以发现修改生效了，当拥有双屏的时候这种操作效率更低。

JavaScript 同理，当然在 Element 和 Sources 之间切换也是比较麻烦的事情，所以可以在 Element 标签页按下 Ctrl + Shift + p 接着输入 qs（quick source） 来同时查看两部分内容，更便于修改。