介绍

在日常写 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) 来同时查看两部分内容,更便于修改。