CODEWITHSUNDEEP
javascriptdebugginggoogle-chromegoogle-chrome-devtools
Jake Wilson
Jake Wilson

Reputation: 91193

Maintain JS debug code & reloading browser

I use Google Chrome Dev Tools to troubleshoot or debug JavaScript. I add break points and use watches, but a lot of the times it's convenient to just insert console.log(value) here and there in the script.

The problem is that when the page has to be refreshed in order to see the JS changes (and the console.log() calls), then the console.log() calls have been removed when the page reloads. Obviously this is because I didn't edit the actual source file itself.

Is it possible to maintain edits to JS files and still reload the page?

There are a lot of cases where I'm looking at other people's JS, learning and understanding it, so editing the source code is not even a possibility. Other times, when working on my own code, I might be debugging JS code on a live server, to editing my source to put in random console.log()'s is not desirable.

I know that Dev Tools has an auto save feature where the changes you make can save the actual source files (as long as the files are on a filesystem that is available to your computer). But that doesn't help in my case.

Upvotes: 3

Views: 169

Answers (1)

loislo
loislo

Reputation: 14119

There is 'workspace' feature in DevTools. It allows you to map the source files on your disk to the scripts of your page. So when you apply your changes to the page's javascript they also will be saved to the disk. If your web server serves these files from this folder then you will get the changed files after reload.

Upvotes: 2

Related Questions