在前端代码调试中，经常出现频繁刷新浏览器的情况。“热更新”指的是不需要重新启动开发环境，就可以做到实时更新代码的方式，在前端开发中体现为改动后立即生效，不需要再使用F5刷新页面的方式来更新代码。
目前较常见的热更新方案有基于webpack或gulp的热更新，今天介绍一种更为简便的css热更新方案——利用chrome开发者工具的工作区实现。虽然这种方案的使用范围略有局限性，但在开发/线上调试中使用还是能在一定程度上提高我们的效率。
注意：以下内容必须在服务器（本地或远程）中实现，直接拖动html文件至浏览器中是没有效果的喔。
一、配置工作区1、设置工作区是进行文件映射的第一步，打开chrome开发者工具(F1),选择source栏；
、在左栏任意位置右键，点击"Addfoldertoworkspace"；
3、选择你想作为工作区的文件夹，我选择的文件中含有一个index.css文件；
4、之后将弹出一个权限提示框，点击"允许"即可；
5、当看到Sources栏中新增了刚才我们添加的文件夹，则说明工作区配置好了。
二、设置文件映射1、在Sources栏中选择你想进行映射的css文件，右键，选择"Maptofilesystemresource.."
、在弹出框中选择工作区中相应的css文件；
3、选择完成后可以看到，原先在服务器中的文件被移到了我们的工作区文件夹中；
到这里为止，我们的文件映射就设置完成了。
三、实时更新效果配置好了工作区和文件映射，来看看最终的效果吧：
1、我们先修改本地css中的内容，在这里，我们将p标签的颜色属性改为绿色，并保存；
可以看到，页面的字体颜色也实时更新了！
、接着我们在Elemnts栏中，手动更改h1标签的font-size属性；
3、回到工作区的文件中，可以看到，文件也被实时更新了，再也不用按F5刷新了；
四、注意事项以下几点注意事项摘自chrome开发者工具帮助手册；
1、只有Elements面板中的样式更改会保留；对DOM的更改不会保留。
、仅可以保存在外部CSS文件中定义的样式。对element.style或内嵌样式的更改不会保留。（如果您有内嵌样式，可以在Sources面板中对它们进行更改。）
3、如果您有映射到本地文件的CSS资源，在Elements面板中进行的样式更改无需显式保存即会立即保留-Ctrl+S或者Cmd+S(Mac)。
4、如果您正在从远程服务器（而不是本地服务器）映射文件，Chrome会从远程服务器重新加载页面。您的更改仍将保存到磁盘，并且如果您在工作区中继续编辑，这些更改将被重新应用。
5、您必须在浏览器中使用映射文件的完整路径。要查看暂存版本，您的索引文件在网址中必须包含.html。
参考文档：chrome开发者工具帮助手册
关于本文：作者:京东成都研究院-JSHOP研发部朱思逸
赞赏