如何永久保存在 Chrome DevTools 中所做的 CSS 更改？

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

问题陈述：

无法保存在Google Chrome 开发者工具的样式面板，尽管文档表明它应该在资源中可见

解决方案：

Chrome 现在提供了将本地文件夹添加到其工作区的功能。通过利用此功能，您可以将 Web 资源映射到本地资源，并直接从开发人员工具保存 CSS 更改。

步骤：

1. 将文件夹添加到工作区：

   • 导航到开发人员工具的“源”面板。
   • 右键单击左侧面板，然后选择“将文件夹添加到工作区”。
   • 选择包含 CSS 文件的文件夹。

2. 授予 Chrome访问：

   • 将出现一条提示，请求访问该文件夹的权限。
   • 授予 Chrome 访问权限。

3. 将网络映射到本地资源：

   • 重新加载页面。
   • 在源面板中找到相应的映射文件。
   • 右键单击文件名，然后选择“映射”到文件系统资源。”
   • 导航到本地文件并选择

4. 保存更改：

   • 在映射文件中进行 CSS 更改。
   • 按 CTRL S 保存

附加说明：

• 您可能需要打开并编辑映射文件才能启动应用程序本地更改。
• 如果您没有看到“样式”面板，请单击“样式”面板中的三点图标元素面板的右上角，然后选择“显示样式”。

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