how to edit Javascript in Html in Chrome Dev Tools

javascript google-chrome-devtools javascript-debugger
kevin_chen picture kevin_chen · Mar 30, 2017 · Viewed 12.2k times · Source

We can edit and execute JavaScript code from the *.js file in the Sources panel of Chrome DevTools. However, if the js code comes from the *.html file, how can we edit and execute them besides adding breakpoints?

Answer

Molik Miah picture Molik Miah · Mar 30, 2017

In Chrome Dev Tools you can setup a 'workspace' and when you make changes to a file it will save locally and also show changes in the browser.

Please follow this Google guide on setting it up. It's easy to follow and with screenshots, if you need further help then please message back.

Link with instructions: https://developers.google.com/web/tools/setup/setup-workflow

Related questions

How to force Chrome debugging tools to debug in pretty code?

Although I used pretty code and had set up the breakpoints in "Pretty code" tab, debugger keeps working in minified code. (I can't see exactly where I am and need to continuously switch between source and "pretty code"). On same …

Read More
Running code snippets from Google Chrome console command line, using (experimental) code snippets feature?

Reference: Using the new code snippets feature in google chrome I am using the code snippets in google chrome, so say I have a snippet file. check_consistency.js Is there an api or a global object through which we …

Read More
How to get Chrome debugger to break or error when working on undefined variables

My Javascript code (hundreds of lines) hangs Chrome and when I debug the issue I find out that a variable was undefined. I don't get errors in the console. So this is making my debugging more time consuming because there …

Read More