Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to edit Javascript in Html in Chrome Dev Tools

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?

like image 654
kevin_chen Avatar asked Mar 30 '17 02:03

kevin_chen


People also ask

Can I edit JavaScript in Chrome dev tools?

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.

How do I edit HTML in Chrome dev tools?

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.


1 Answers

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

like image 161
Molik Miah Avatar answered Sep 23 '22 14:09

Molik Miah