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

 

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. 允许Chrome访问

  • 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.

    • ps

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

    New versions of Chrome have a feature called workspaces which addresses this issue. You can define which paths on your webserver correspond to which paths on your system, then edit and save with just ctrl-s.

    See: http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/

    You're looking in the wrong section of "Resources".

    It's not under "Local Storage", it's under "Frames":

    The above screenshot shows a diff of the original styles against the new modifications made in the devtools. You can right-click the item in the left pane and save it back to disk.

    链接地址: http://www.djcxy.com/p/91130.html

    上一篇: 带有js和谷歌浏览器的Xpath

    下一篇: 如何保存Chrome开发人员工具的样式面板的CSS更改？