2

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.

Jake Wilson
  • 88,616
  • 93
  • 252
  • 370

1 Answers1

2

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.

Community
  • 1
  • 1
loislo
  • 14,025
  • 1
  • 28
  • 24
  • you may setup a script that sync the files to the web server regularly. Or mount the server folder over ssh with help of sshfs. (I never tried that myself.) – loislo Jun 26 '13 at 20:38
  • 1
    I would love to have an option in devtools to load from the linked workspace files on refresh instead of accepting those from the server. Then you wouldn't need to have direct access to the server in order to debug. – worldsayshi Jan 30 '14 at 14:57