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

问题描述

如何保存

解决方案

您可以从Chrome开发工具本身保存CSS更改。 Chrome现在允许您将本地文件夹添加到Workspace。在允许Chrome访问文件夹并将文件夹添加到本地工作区后，您可以将Web资源映射到本地资源。

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











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













• 重新载入网页后，Chrome现在加载映射文件的本地资源。为了简化操作，Chrome只会显示本地资源（因此您不必为编辑本地资源或网络资源而感到困惑）。要保存更改，请在编辑文件时按 CTRL + S 。






ps





您可能必须打开映射文件并开始编辑才能使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 http://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屋！