Quick Source Tool in Microsoft Edge

The Quick Source Tool is used to edit or view files on the web page. This is a lite version of the Sources tool used alongside other DevTools without the need for switching tabs. You can override the files according to your needs and view the changes live on the web page.

Benefits of Quick Source Tool

The various benefits of Quick Source Tool are:

• UI is very simple: The Quick Sources Tool acts as a lite version of the Sources Tool and only has its editor. The sidebars for debugging and file/folder structure are not present in Quick Sources Tool as its goal use is to only view and edit the code.
• Option for finding and replacing: You have the option to find patterns in the code and replace them with some other text. You also get the option to match the case and use regular expressions.
• Formatting code: There is a format option present at the bottom of the tool used to format the code to look pretty. Normally the codes are minified to reduce load time, so it becomes unable to read you can use the format option to make it readable.
• Use alongside other tools: The main reason this tool is created is to use it while working with other DevTools so that the developers are not required to switch between the Sources tool. For this, the DevTools drawer section is used when this tool is opened and used while working with other DevTools.
• Additional Information: You get the line number, column number, and coverage information about the opened file at the bottom of the tool.

How to open Quick Source Tool in Edge?

The Quick Source Tool is present in the DevTools in Edge. To open it follow these steps:

Step 1: Right-click on the web page and select Inspect to open DevTools.

Step 2: Press the add button and select Quick Source from the list. You can also do this in the drawer section, press the Esc key on your keyboard, and then select Quick source from the add button.

Opening Quick Source Tool in Edge

About the Quick Source Tool

• You can open a file by pressing “Ctrl+P” and then searching and selecting the required file. All open files will have their own tab which is useful to navigate around and you can also close the tab using the cross icon in each tab.
• At the bottom, you will find the line, column, and coverage information of the respective file. At the left, there is a format button “{ }” which is used to format the code.
• You can’t edit the file at first when you open it. To edit it click on the file and select Override content.
• On the left of the line numbers, you can add breakpoints to that specific line for debugging purposes.

UI of Quick Source Tool

Showing usage of Quick Source Tool

Let’s use the tool on the GFG site and view various files on the page.

Step 1: Using Edge open the GFG site and locate the Quick Source Tool.

Step 2: Open a file and select the Override content to edit the contents of the file.

Step 3: Make some changes to the code according to your needs. 

Usage of Quick Source Tool

Conclusion

To view and modify code while working with DevTools other than Sources Tool, Edge provides Quick Source tool which is used to only view and edit the code of the respective file. You can search around the code or format the code for proper viewing.