how to edit Javascript in Html in Chrome Dev Tools

Question

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 1

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

Answer 2

All you need to do is double-click the script you're viewing in the dev tools Elements tab (ie your *.html file). You can also right-click and select 'Edit as HTML' Here is an overview for editing html in dev tools.

When you're done, you can save the edits by right-clicking and selecting "Save" or "Save As".

Hope this helps!