如何保存 Chrome 开发者工具样式面板的 CSS 更改? [英] How to save CSS changes of Styles panel of Chrome Developer Tools?

问题描述

如何保存

解决方案

您可以从 Chrome Dev Tools 本身保存您的 CSS 更改.Chrome 现在允许您将本地文件夹添加到您的工作区.允许 Chrome 访问文件夹并将文件夹添加到本地工作区后，您可以将网络资源映射到本地资源.

• 导航到开发者工具的源"面板，右键单击左侧面板(列出文件的位置)并选择将文件夹添加到工作区.您可以通过单击元素"面板中所选元素的每个 CSS 规则右上角的样式表，快速访问源"面板中的样式表.

• 添加文件夹后，您必须授予 Chrome 访问该文件夹的权限.

• 接下来，您需要将网络资源映射到本地资源.

• 重新加载页面后，Chrome 现在会加载映射文件的本地资源.为简单起见，Chrome 仅向您显示本地资源(因此您不会对是编辑本地资源还是网络资源感到困惑).要保存更改，请在编辑文件时按 CTRL + S.

附上

您可能需要打开映射文件并开始编辑才能让 Chrome 应用本地版本(日期 201604.12).

How to save CSS changes of Styles panel of Google Chrome Developer Tools?

At tool's website it's mentioned that we can see all change in resource panel

But I'm working locally on a CSS file but changes are not showing in Resource panel for me

By the way Do you know any add-ons , tools to save css changes of Chrome Developer tools? I know for Firebug there are many https://stackoverflow.com/search?q=firebug+CSS+changes+save

解决方案

You can save your CSS changes from Chrome Dev Tools itself. Chrome now allows you to add local folders to your Workspace. After allowing Chrome access to the folder and adding the folder to the local workspace, you can map a web resource to a local resource.

• Navigate to the Sources panel of the Developer Tools, Right-click in the left panel (where the files are listed) and select Add Folder to Workspace. You can get to a stylesheet in the Sources panel quickly by clicking the stylesheet at the top-right of each CSS rule for a selected element in the Elements panel.

• After adding the folder, you'll have to give Chrome access to the folder.

• Next, you need to map the network resource to the local resource.

• After reloading the page, Chrome now loads the local resources for the mapped files. To make things simpler, Chrome only shows you the local resources (so you don't get confused on as to whether you are editing the local or the network resource). To save your changes, press CTRL + S when editing the file.

p.s.

You may have to open the mapped file(s) and start editing to get Chrome apply the local version (date 201604.12).

这篇关于如何保存 Chrome 开发者工具样式面板的 CSS 更改?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！