简便的CSS热更新——使用chrome开发者工具

在前端代码调试中，经常出现频繁刷新浏览器的情况。“热更新”指的是不需要重新启动开发环境，就可以做到实时更新代码的方式，在前端开发中体现为改动后立即生效，不需要再使用F5刷新页面的方式来更新代码。

目前较常见的热更新方案有基于webpack或gulp的热更新，今天介绍一种更为简便的css热更新方案——利用chrome开发者工具的工作区实现。虽然这种方案的使用范围略有局限性，但在开发/线上调试中使用还是能在一定程度上提高我们的效率。

注意：以下内容必须在服务器（本地或远程）中实现，直接拖动html文件至浏览器中是没有效果的喔。

一、配置工作区

1、设置工作区是进行文件映射的第一步，打开chrome开发者工具(F12),选择source栏；

2、在左栏任意位置右键，点击'Add folder to workspace'；

3、选择你想作为工作区的文件夹，我选择的文件中含有一个index.css文件；

4、之后将弹出一个权限提示框，点击'允许'即可；

5、当看到Sources栏中新增了刚才我们添加的文件夹，则说明工作区配置好了。

二、设置文件映射

1、在Sources栏中选择你想进行映射的css文件，右键，选择'Map to file system resource..'

2、在弹出框中选择工作区中相应的css文件；

3、选择完成后可以看到，原先在服务器中的文件被移到了我们的工作区文件夹中；

到这里为止，我们的文件映射就设置完成了。

三、实时更新效果

配置好了工作区和文件映射，来看看最终的效果吧：

1、我们先修改本地css中的内容，在这里，我们将p标签的颜色属性改为绿色，并保存；

可以看到，页面的字体颜色也实时更新了！

2、接着我们在Elemnts栏中，手动更改h1标签的font-size属性；

3、回到工作区的文件中，可以看到，文件也被实时更新了，再也不用按F5刷新了；

四、注意事项

以下几点注意事项摘自chrome开发者工具帮助手册；

• 1、只有 Elements 面板中的样式更改会保留；对 DOM 的更改不会保留。

• 2、仅可以保存在外部 CSS 文件中定义的样式。对 element.style 或内嵌样式的更改不会保留。（如果您有内嵌样式，可以在 Sources 面板中对它们进行更改。）

• 3、如果您有映射到本地文件的 CSS 资源，在 Elements面板中进行的样式更改无需显式保存即会立即保留 - Ctrl + S 或者 Cmd + S (Mac)。

• 4、如果您正在从远程服务器（而不是本地服务器）映射文件，Chrome 会从远程服务器重新加载页面。您的更改仍将保存到磁盘，并且如果您在工作区中继续编辑，这些更改将被重新应用。

• 5、您必须在浏览器中使用映射文件的完整路径。要查看暂存版本，您的索引文件在网址中必须包含 .html。

参考文档：

chrome开发者工具帮助手册