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?
Step 1: Launch Developer ToolsYou can open and edit CSS and JavaScript files in this view, but any changes will be lost as soon as you refresh the page.
Chrome DevTools: Edit HTML in the Console Panel of DevToolsLog a DOM node to the console. Right click on it. Select Edit as HTML or Edit Text. Notice the DOM is updated on the page and also the Elements Panel.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With