During the development of Web side projects, occasionally there will be problems in the local test environment, but problems in the online environment. You can use Overrides in Chrome to debug online and find out the FixBug~

Premise: Chrome must have every front-end development bar!!

Create a new folder

Used to save online code for debugging

Developer tool –Overrides

Open Chrome developer tools Sources –> OverridesClick +Select Folder for Overrides, and then Select the new folder you just created. At the top of chrome, there is a prompt: Click Permit, click Permit, click Permit. Important things say three times. So the browser has our folder.

Debug style CSS

Debug styles directly in the developer tools, usually after refreshing the debugged style will disappear.

We change this text to red, the original color is #86868b, normally after refreshing, the color will change back to #86868b, now use overrides to prevent this situation ~

First go to Sources–> Page and right-click Save for Overrides

For example, if you change the color of the text now and refresh it again, it will still be red, and will not change back to the original #86868b.

So if you don’t want to debug directly in the browser you can go to the editor and open up the folder that you just created that has the code file that we just saved for Overrides and the code that we just modified on the page or you can just type in there and change the style

Debug JS

If you want to console the interface to see if it returns a BUG, you can use this method. In the same way as in Sources–>page, you can find the js file that you want to debug. Then right click Save for Overrides (I’ve already clicked on it so it doesn’t show up)

Then the editor opens the folder you created and finds the JS file you just saved. js will be compiled after it is packed, format the document first.

Although compiled, the page is still written by itself, so you always know where to debug a place and a method. For example, the method used for the winning list is getObtainList. Search the method, edit the code, and console to print the returned list.

Overrides debugging looks something like this

Remember to close overrides after debugging, otherwise the file in overrides will be loaded first when you open the page next time, and the thing you debug will remain forever

Click on this to close overrdies!

Part of a development tip ~ thank the family