How to Edit JavaScript in Browser
You can edit and save changes in JavaScript source code files using browsers. Usually, developers need to debug the code live at runtime. With the help of Developer Tools of the browser, we can easily edit our local stored files and debug our code.
This article will discuss the feature of Developer tools in popular browsers such as Google Chrome and Mozilla Firefox and how to use that feature to edit our JavaScript files.
Edit JavaScript in Google Chrome
Google Chrome provides the most efficient and excellent way to make changes in JavaScript code. We can also associate a folder with the Google Chrome Developer tool’s workspace.
We perform a few steps to use this feature. Get a better understanding of Developer tools by following the steps below.
-
Launch Developer Tools
Load JavaScript local/server file on Google Chrome. Go to
menu>>more toolswhere you’ll see the Developer tools option or press the shortcut key (F12) to open developer tools. -
Source Tab
Navigate the source tab and examine the file explorer to determine which file we are looking for to make changes. We can edit and make changes in our file, but we lose all changes if we refresh or reload our page.
If you are worried, there is no problem since we can save our changes in the next steps.
-
Folder Association with Workspace
Add folder to the workspace by clicking the Filesystem tab, Google Chrome will ask for confirmation, and we need to Allow the access permission. By using a single click, we can open files of our system from the explorer.
-
Edit and Save
Finally, we can now edit our code and save the changes by pressing the CTRL + S keys, then refresh the browser.
Edit JavaScript in Mozilla Firefox
Mozilla Firefox provides us with other plugins to edit the JavaScript inside the browser to achieve the same functionality.
We will examine how features such as Firebug can debug JavaScript code in a few steps. We can also view the highlighted syntax errors.
-
Install Firebug Plugin
First, we need to install the Firebug plugin from the add-on themes inside the menu. From the menu, navigate to plugin and search by name ‘Firebug’ and install.
-
Create and Open Page to Edit
We can write our JavaScript code in word pad, notepad, etc.
We need to load our created HTML page and open the Firebug console to create an HTML file. Then navigate to the script tab to view the JavaScript code of that page source.
-
Breakpoint Debugging
To terminate the code execution, we can use breakpoint; we can also specify the scope of code to visualize the errors. This is very useful for debugging.
-
Update Changed Variables
We can click on the Step over button; Firebug updates all the variables until we terminate the execution of the breakpoint. Look at the values displayed by the Firebug console on the Watch Window.
-
View/Load Changes
Finally, reload the page to view the file changes and press the CTRL + R shortcut key.