How to Locally Override Code and Test It in the Browser?

Local “Override” method in Chrome’s Dev tool

Override of the browser’s dev tool allows the best way to debug any application. Using this method, we can mock the server data, add and remove HTML, CSS, and JavaScript codes, save it locally, and run the application. This allows us to do the testing without modifying the actual source code on the server.

Let’s see how we can use the local Override feature in Chrome’s dev tools.

Step 1. Open the application in inspect mode, right-click on the application, and select ‘Inspect’.

Here, I am using a simple React application as an example.

Under the ‘Sources’ section, we can see the ‘Overrides’ option. Select and click on ‘Select folder for Overrides’.

Step 2. Now select your entire folder for overrides. Now, dev tools ask for permission to access the folder if any sensitive information is exposed and click on the ‘Allow’ button. Once done the folder is visible under the ‘Overrides’ section.

Step 3. Once we get our folder into dev tools, make changes in the respective files accordingly, save the file, and refresh the page to see the changes we have made. That’s all.

In the above screenshot, I have made changes to the EditEmployee.js file to take another input called ‘SSN’. Just add the necessary changes in the file, save, and refresh the application. Check the console for any errors and warnings. Also, we can enable or disable the Local Overrides by checking the checkbox as in the screenshot.

We can see the ‘Network’ tab for different service calls and responses and analyze the code.

Once we save the file, the same copy will be saved in the local folder, and we will not touch any of the server-side codes. There is no need to run the application through any IDE. This saves time and is easy to debug.

Please follow the links for information on Accessibility and Cross-browser compatible applications on C-sharp corner.