Edit Source File Directly in Chrome

Posted By : Manisha Kirodiwal | 29-May-2018

Sometimes for a developer, it is hard to finding and fixing errors can be difficult. You may be urged to randomly use console.log () in an attempt to make your code work properly.

 

Earlier we use separate applications for development and browsing but now its almost come to an end. We can edit source files directly in Chrome and it will save the result to a local file. So that Changes can be applied immediately without refreshing the browser.It saves are time a lot.

 

Following local saving of code technique should work in newer versions of Chrome, but now we can edit and save only JavaScript files. HTML and CSS are almost sure to be supported at last.

 

Follow the following steps:

 

1: Launch Developer Tools

 

Open Chrome, load the page from your local file system/server

Open Google Developer Tools using the Tools menu or press Ctrl + Shift + I / Cmd + Shift + I.

Navigate to the Source tab, and then click the Sources icon or press Ctrl + O to select your JavaScript file.

 

2: Edit Your Code

 

Now jump right in your file and edit your code. Google Chrome provides a very useful property list that helps you find the right line - press Ctrl + Shift + O / Cmd + Shift + O:

 

3: Save the File

 

Press Ctrl + S / Cmd + S to save your new changes.

This change updates the file in the memory and applies the new changes hand to hand. Note, however, that the code does not restart, so changes in initialization variables are not overridden.

If you want to save the changes to the original code file, right-click the edit and select Save or Save as... When done, you need to refresh the page and the code script restarts.

 

4: Undo Your Mistakes

 

Has your update caused some issues? Right-click on the chrome dev tool editor and select Local changes .... The bottom pane shows all current changes and using this you can return.

This Chrome's developer tools can not take the place of the current editor, but these tools are useful if working on different system or want quick and edits. So using this editor and its local save functionality you can save your time and can fix/check your quick bugs.

About Author

Author Image
Manisha Kirodiwal

Manisha is a Web Application developer and she is good in working with Angular, TypeScript , JavaScript and Jquery. In free time she loves to dance and cooking.

Request for Proposal

Name is required

Comment is required

Sending message..