We perform a few steps to use this feature. Get a better understanding of Developer tools by following the steps below.
Launch Developer Tools
menu>>more toolswhere you’ll see the Developer tools option or press the shortcut key (F12) to open developer tools.
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.
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
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.
Finally, reload the page to view the file changes and press the CTRL + R shortcut key.