如何保存在 Chrome DevTools 的样式面板中所做的 CSS 更改？

从 Chrome 开发者工具样式面板保存 CSS 更改

在 Google Chrome 开发者工具中，您可能会遇到通过样式面板进行 CSS 更改的问题无法出现在资源面板中。在本地处理 CSS 文件时，这可能会特别令人沮丧。

为了解决这种情况，Chrome 引入了一种解决方法，其中包括将本地文件夹添加到工作区。通过这样做，您可以将 Web 资源映射到本地资源，从而允许您在本地编辑和保存更改。

保存 CSS 更改的步骤：

1. 将文件夹添加到工作区： 右键单击​​“源”选项卡的左侧面板，然后选择“将文件夹添加到工作区。”
2. 允许 Chrome 访问： 授予 Chrome 访问您要添加的文件夹的权限。
3. 映射网络资源： 选择网络资源在网络选项卡中并将其映射到相应的本地资源。
4. 进行更改：重新加载页面并在本地编辑 CSS 文件。
5. 保存更改：按“Ctrl S”(Windows) 或“Cmd S”(Mac) 保存更改。

其他提示：

• 您可能有打开映射文件并进行一些更改以触发 Chrome 对本地资源的识别。
• Chrome 的工作区功能最初通过 Canary 通道提供，但现在已集成到浏览器的稳定版本中。

第三方插件

Chrome 内置功能提供了一个解决方案，您还可以考虑使用外部附加组件来保存 CSS 更改。目前，与 Firebug 广泛的 CSS 更改保存工具不同，Chrome 的可用选项有限。然而，LiveReload 和 Stylus 等第三方工具提供类似的功能，可以增强您的开发工作流程。

以上是如何保存在 Chrome DevTools 的样式面板中所做的 CSS 更改？的详细内容。更多信息请关注PHP中文网其他相关文章！