How to edit JavaScript code in your browser and see the changes in real time?

Did you face a situation where you wished that you could edit JavaScript live on the browser to make experimental changes in your code? Have you ever made modifications in JavaScript code without rewriting the file and reloading the web page to see the changes in real-time. Read on to know how to edit JavaScript code in your browser and see the changes in real-time?

Editing JavaScript code in real-time is possible in Chrome and Chromium based browsers. After loading a web page completely, press the F12 key to open the developer tools, then open the 'Sources' tab. Now open any Javascript file loaded on the browser and you can directly edit it by clicking anywhere in that file. After making modifications press Ctrl+S to save the changes. The browser will automatically take in the new code. If there are some syntax errors in your code then it will display them in the console. So keep an eye on the console whenever you apply changes.

If the part of the code you modify is going to be executed by future events then you can see the effect of the modification. There is no point in changing the code that is not going to be executed in future events on that web page. For example, the code that is getting executed while the page is loading and making modifications to that code has no effect.

Hope the article was helpful. We would love to hear your feedback, views, and your tips regarding Javascript Development. Learn more about our Drupal Support services.