Chrome 开发者工具 第二十章（使用工作区进行文件编辑和保存）

Chrome 开发者工具的工作区功能提供了一种便利的方式，允许开发者直接在浏览器中编辑文件，并将更改实时保存到本地文件系统中。这个功能对于想要快速迭代和测试代码更改的开发者来说是一个巨大的福音。

工作区的概念和设置

工作区允许你将在开发者工具中所做的更改映射到本地文件，这意味着你可以直接在开发者工具中编辑代码，并且更改会自动保存到本地文件中。这样，你就不需要在外部编辑器和开发者工具之间来回切换，从而提高工作效率。

为了设置工作区，你需要在本地运行一个 HTTP 服务器，并且在 Chrome 中打开你的本地网站。然后，在开发者工具的 “源代码/来源” 面板中，切换到工作区创个，在工作区添加一个文件夹。

Chrome 会要求你授权访问本地文件系统，一旦完成，你就可以在 “源代码/来源” 面板中看到本地文件与网络资源之间的映射。

点击“允许”按钮以授予开发者工具对目录进行读取和写入的权限后，可以看到一些文件旁边有一个绿点，这些绿点表示开发者工具已在页面的网络资源与工作区源码文件之间建立了映射。

CSS 和 JavaS