如何在本地保存在 Chrome DevTools 中所做的 CSS 更改？

保存通过 Chrome DevTools 样式面板所做的 CSS 更改

使用 Google Chrome 开发者工具中的样式面板处理本地 CSS 文件时，用户可能会遇到更改未反映在资源面板中的问题。本文提供了此问题的解决方案。

为了在本地保存 CSS 更改，Chrome 允许您将本地文件夹集成到工作区中。以下是分步指南：

1. 将文件夹添加到工作区： 在 DevTools 的“源”面板中，右键单击左侧面板，然后选择“将文件夹添加到工作区” ."
2. 允许 Chrome 权限： 授予 Chrome 访问已添加的权限
3. 映射资源：导航到网络选项卡，右键单击 CSS 文件路径，然后选择“映射到本地”。

一旦您映射资源后，Chrome 将在页面重新加载时优先加载映射文件的本地版本。现在，您可以通过按标准 Ctrl S 快捷键来保存更改。

其他保存选项：

为了增加灵活性，请考虑使用扩展程序或工具来保存通过以下方式进行的 CSS 更改Chrome DevTools：

• LiveReload： 检测 CSS 更改并自动重新加载浏览器窗口。
• CSS 重新加载器： 提供用户友好的界面来保存更改，包括打开和关闭活动更改的选项。
• 重新加载 CSS： 一个极简扩展，让您只需单击一下即可重新加载 CSS 文件。

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