Update Source File When CSS Is Changed Through Chrome Developer Tools

Update source file when CSS is changed through Chrome developer tools

I just learnt that it is possible. Here are the instructions (or view this page for up-to-date instructions):

• Open Chrome Developer Tools
• Click on Settings icon (the ⠇ icon at the top right corner of dev tools)
• Click on Workspace tab
• Click on Add folder button and choose the local folder that contains the desired files (e.g. C:\www\project\)
• If a warning appears, click Allow

Next step:

• Open the desired webpage (e.g. http://localhost/project/)
• Open the Sources tab in dev tools
• Open the Navigator panel if necessary (it is the left column in sources tab, click left triangle icon just below the top left corner of dev tools to open it)
• Scroll down to the bottom of the list where you will find the workspace folder added earlier
• Expand the folder and locate the desired file (e.g. css/styles.css)
• Right click on the file and choose Map to network resource...
• A list will popup that shows a complete or filtered list of files loaded by the webpage
• Choose the URL that corresponds to the selected local file (e.g. http://localhost/project/css/styles.css)
• When a warning appears about restarting dev tools, click OK

Now you can:

• Inspect an element and edit its CSS, the changes will be saved to local file immediately
• Edit a mapped file in source panel, the changes will be saved to local file when you Save the file
• Edit a mapped file in you favorite editor outside chrome; when you switch back to Chrome it will reload the file/update the styles automatically

How to get a summary of your CSS changes in Chrome dev tools?

You can see all changes via the Changes Drawer

In Dev Tools, you can locate the Changes Drawer via either:

• A) Open Command Palette (Ctrl + Shift + P) and type "changes"

  
  
  
  

• B) Open Drawer (Esc), click on the more options menu (triple dot), and select Changes

  

Further Reading

• How to get a summary of your CSS changes in Chrome dev tools?
• Export CSS changes from inspector (webkit, firebug, etc)

Updates

• Dev Tools 98 added More precise changes to automatically pretty prints changes
• Issue #1296143 opened User-Select: none in Changes drawer makes it very hard to utilize

Chrome Dev Tools - Modify javascript and reload

This is a bit of a work around, but one way you can achieve this is by adding a breakpoint at the start of the javascript file or block you want to manipulate.

Then when you reload, the debugger will pause on that breakpoint, and you can make any changes you want to the source, save the file and then run the debugger through the modified code.

But as everyone has said, next reload the changes will be gone - at least it lets you run some slightly modified JS client side.

How to force Chrome browser to reload .css file while debugging in Visual Studio?

There are much more complicated solutions, but a very easy, simple one is just to add a random query string to your CSS include.

Such as src="/css/styles.css?v={random number/string}"

If you're using php or another server-side language, you can do this automatically with time(). So it would be styles.css?v=<?=time();?>

This way, the query string will be new every single time. Like I said, there are much more complicated solutions that are more dynamic, but in testing purposes this method is top (IMO).

---

Related Topics