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

Question

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

User · Answer

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.

enter image description here

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.

enter image description here

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

User · Answer

FYI  If you re using inline styles or modifying the DOM directly  for instance adding an element   workspaces don t solve this problem  That s because the DOM is living in memory and there s not an actual file associated with the active state of the DOM   For that  I like to take a  before  and  after  snapshot of the dom from the console   copy document getElementsByTagName  html   0  outerHTML   Then I place it in a diff tool to see my changes     Full article  https   medium com  theroccob get-code-out-of-chrome-devtools-and-into-your-editor-defaf5651b4a

User · Answer

To answer the last part of your question about any extensions that can save changes  there is hotfix  It allows you to save changes from Chrome Dev Tools directly to GitHub  From there you can set up a post-receive hook on GitHub to automatically update your website

User · Answer

Tincr Chrome extension is easier to install  no need to run node server  AND also comes with LiveReload like functionality out the box  Talk about bi-directional editing      Tin cr Website  Chrome Web Store Link  Andy s Blog Article

User · Answer

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

User · Answer

As long as you haven t been sticking the CSS in element style   Go to a style you have added  There should be a link saying inspector-stylesheet     Click on that  and it will open up all the CSS that you have added in the sources panel  Copy and paste it - yay    If you have been using element style  You can just right-click on your HTML element  click Edit as HTML and then copy and paste the HTML with the inline styles

User · Answer

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

User · Answer

UPDATE 2019  As other answers are bit outdated  I ll add updated one here  In latest version there s no need to map the chrome folder to filesystem     So  suppose I have a web folder containing HTML CSS JS files in desktop which i want to be updated when I make changes in chrome    1  You d need a running local server like node etc  alternatively this vscode extension creates the server for you  live server VSCode extension  install it  run the server   2  load the html page in chrome from running local server   3  Open devTools- Sources- Filesystem- Add folder to workspace    4  Add the folder which is used in running local server  No additional mapping is required in latest chrome  Ta-da   More on it Edit Files With Workspaces  Note that the changes made on the styles tab will NOT reflect on the filesystem files   Instead you need to go to devtools- source- your folder and then make your changes there and reload the page to see the effect

User · Answer

I know it is an old post  but I save it this way     Go to Sources pane  Click Show Navigator  to show the navigator pane on left   Click the CSS file you want   It will open in the editor  with all changes you made  Right click on editor and Save your changes    You can also see Local Modifications to see your revisions  very interesting feature  Also work with scripts

User · Answer

Now that Chrome 18 was released last week with the required APIs  I published my chrome extension in the Chrome web store  The extension automatically saves changes in CSS or JS in Developer tools into the local disk  Go check it out

User · Answer

DevTools tech writer and developer advocate here   Starting in Chrome 65  Local Overrides is a new  lightweight way to do this  This is a different feature than Workspaces    Set up Overrides   Go to Sources panel  Go to Overrides tab  Click Select Folder For Overrides  Select which directory you want to save your changes to  At the top of your viewport  click Allow to give DevTools read and write access to the directory  Make your changes  In the GIF below  you can see that the background rosybrown change persists across page loads      How overrides work  When you make a change in DevTools  DevTools saves the change to a modified copy of the file on your computer  When you reload the page  DevTools serves the modified file  rather than the network resource   The difference between overrides and workspaces  Workspaces is designed to let you use DevTools as your IDE  It maps your repository code to the network code  using source maps  The real benefit is if you re minifying your code  or using code that needs to get transpiled  like SCSS  then the changes you make in DevTools  usually  get mapped back into your original source code  Overrides  on the other hand  let you modify and save any file on the web  It s a good solution if you just want to quickly experiment with changes  and save those changes across page loads

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

Examples related to html

Examples related to css

Examples related to google-chrome

Examples related to google-chrome-extension

Examples related to google-chrome-devtools