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

by

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.
    Allow chrome access

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

More Related Contents:

  1. Hide scroll bar, but while still being able to scroll
  2. Google Chrome form autofill and its yellow background
  3. Favicon not showing up in Google Chrome [duplicate]
  4. Resource interpreted as stylesheet but transferred with MIME type text/html (seems not related with web server)
  5. Google Fonts are not rendering on Google Chrome
  6. Tools to selectively Copy HTML+CSS+JS From A Specific Element of DOM [closed]
  7. Chrome rendering issue. Fixed position anchor with UL in body
  8. Turn off Chrome/Safari spell checking by HTML/css [duplicate]
  9. Prevent “overscrolling” of web page
  10. Stop CSS transition from firing on page load
  11. What is shadow root
  12. canvas default size
  13. Chrome: Automatic shift of web elements
  14. Chrome does not expand flex parent according to children’s content [duplicate]
  15. Prevent scroll-bar from adding-up to the Width of page on Chrome
  16. How can you hide the arrow that is displayed by default on the HTML5 element in Chrome?
  17. Different implementation of Flexbox in Firefox and Chrome
  18. chrome/safari display border around image
  19. text-decoration not working for visited state link
  20. 100vh height when address bar is shown – Chrome Mobile
  21. number input – always show spin buttons
  22. Select size attribute size not working in Chrome/Safari?
  23. Browser is not displaying images
  24. How can I select an element with multiple classes in jQuery?
  25. Grid properties not working on elements inside grid container
  26. Hide html horizontal but not vertical scrollbar
  27. Scrolling to an Anchor using Transition/CSS3
  28. Can a ::before selector be used with a ?
  29. Selecting the last element among various nested containers
  30. Rendering a hierarchy of “OPTION”s in a “SELECT” tag

Leave a Comment