1

When writing userscripts, I often want to be able to look at what Stack Exchange's Javascript is doing. Getting to the code that the browser runs is easy enough - in the Network tab, I can see network requests to, among other things:

https://cdn.sstatic.net/Js/stub.en.js?v=9f169562160d

https://cdn.sstatic.net/Js/full.en.js?v=68bef5b3498f

And other similar links. But, there are two issues:

  • The Javascript is minified, and not readable. By looking closely, I can sometimes get a sense of what a section of code is doing, but it's quite tedious. Is there a better method?
  • I'd love to be able to inject my own code into it, so I can get a better sense of what runs when, and try things out. But much of the Javascript runs inside closures, which a userscript (or typing into the console) can't affect, AFAIK. Is there a way to somehow control the response from cdn.sstatic.net, or control the request that Stack Exchange makes to it in the first place, so that I can run my modified code instead?
Improve this question

1 Answer 1

Reset to default
2

Luckily for us, Stack Exchange's unminified Javascript is available on dev.stackoverflow.com. When you have a filename of the script you want to unminify (eg, from the network tab, you see https://cdn.sstatic.net/Js/full.en.js?v=68bef5b3498f, which has a filename of full.en.js), all you need to do is append it after https://dev.stackoverflow.com/content//Js/, eg:

https://dev.stackoverflow.com/content//Js/full.en.js

This has the original variable names, indentation, and comments, so it's about as readable as possible.

This will work for most SE scripts a userscript-writer will care about, including stub, full, wmd, prettify-full, post-validation, and inline-tag-editing.

Debugging with the readable Javascript on a working SE page takes more work, but it's still doable. While it's possible to achieve by writing a userscript to intercept the creation of the <script> tags and replace them, it's a whole lot easier with Chrome Devtools. It has an option called Local Overrides which can intercept network requests made by the browser and serve a local copy of a possibly modified file, rather than serving the original file from across the web. This can be used to replace the minified online Javascript with an unminified, adjustable offline version.

To set up Local Overrides:

  1. Open the Sources panel.
  2. Open the Overrides tab.
  3. Click Setup Overrides.
  4. Select which directory you want to save your changes to.
  5. At the top of your viewport, click Allow to give DevTools read and write access to the directory.
  6. Make your changes.

Once the above is done, open the Javascript that you want to replace in the Sources panel:

screenshot

Make a small change to it (eg, add a space to the beginning), which will allow you to save it as a local copy (Control-S). Open the folder you saved it to and replace the whole file with the unminified version. Open the replaced file in your favorite code editor, and you can make changes to the unminified source, save, and then reload the Stack Exchange page to see the changes' effects live.

Some files have weird characters that cause syntax errors, like  inside full.en.js's 18_jQueryCaretPlugin.js section - these are apparently valid characters in normal .js files, but make Local Overrides choke up, so you'll have to delete them manually.

Given how large and complicated the scripts are, I highly recommend a code editor with a variable-definition finder, variable-reference finder, and parameter/type-sensing, such as VSCode.

There are a few scripts which are inline, and not in a standalone file, such as the call to StackExchange.init right before the end of the <head>. To make adjustments to these, open up the HTML source in the Page subtab:

screenshot

Then make a change and save it locally so it'll be loaded by Local Overrides.

An alternative to Chrome's Local Overrides is to install Fiddler, which can do something very similar. Set up AutoResponder rules, and you can have the system return a modified local copy of a file instead of making a network request.

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .