Maintain JS debug code & reloading browser

Question

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.

Community · Accepted Answer · 2017-05-23 10:25:31Z

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.

edited May 23, 2017 at 10:25

CommunityBot

11 silver badge

answered Jun 26, 2013 at 20:29

loislo

14.1k1 gold badge30 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

loislo Over a year ago

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

worldsayshi Over a year ago

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.

Collectives™ on Stack Overflow

Maintain JS debug code & reloading browser

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related