The most effective way to debug other website’s Javascript files

This is probably a few people use, but just share, maybe some time someone needs it? I am not good at writing, so if I write stupid with confusing people, I hope everyone sympathizes?

I often do some extensions for Chrome, so playing with other websites' code is too normal. However, with some Javascript (JS) files that have been minify, it is not easy to debug it. Even though Chrome has a function of Pretty Print , it does not fail, because sometimes the part you need to debug is intermingled with other sections, making debugging very time consuming. Not to mention every time F5, all previous changes are lost (some pages cannot be edited).

So I thought of this way? Apply it for the first time as a Savetify tool.

Nothing super, simply write a Chrome extension to redirect requests of JS files to debug their files on the computer.

The code is also simple, only 2 files, and a directory. Structure like this:

Let me explain each file.

Manifest.json

If anyone has ever done Chrome extension then this file is nothing special. If you do not know anything, find out these two things: web_accessible_resources (allow websites to access files in extension) and chrome.webRequest (used to handle HTTP Request related matters)

Background.js

Solve problems in Scalable Social Network - Register now!
Solve problems in Scalable Social Network – Register now!

This file is also very simple. Its mission is that whenever there is a request file at http://abcxyz.com/abcxyz.js , the extension will redirect it to the file at the link.   files / abcxyz.js (located in the extension directory). Therefore, you can freely edit the content of the file abcxyz.js and the web will also change accordingly. One advantage of this way is that when F5 will take effect immediately, there is no need to enter chrome: // extensions to Reload manually after every change.

Conclusion

This method not only applies to JS files but also for all other requests, such as JSON, even POST requests (there are some restrictions) … And it is rumored to support CORS, no need to edit nothing more.

One obvious limitation is that if the path of the JS file on the web changes, you must go to the extension to change it properly. And if the live changes anything, you must manually update the file again on the computer. It's quite inconvenient, but if you only need to debug it in a short time, it will meet your needs.

Note that if you don't use it anymore, turn it off. Because it always runs in the background to listen to all requests ( <all_urls> ), it will be quite expensive. This is an example, so I leave it for everyone to easily imagine, but better then need a domain request, just ask for that domain right.

Sorry for being lazy so I can't put a specific example into the article, but I can read it through a quick reading.

Hope some people find it useful? In the future, I will write more notes about how I have studied how to download on Spotify.

ITZone via Quan Le

Share the news now