Debugging minified JavaScript function with commas in Chrome

Question

Background

I have an issue in a production environment that I'm trying to debug. I can't place in debugger or console.log statements since the issue is happening only in a production environment. I can view the prettified code in Chrome.

Source vs. Minified

When I look at the source code, it looks like this:

functionWhatever = function (text, copy) {
    var range;
    if (document.selection) {
        range = document.body.createTextRange();
        range.moveToElementText(clipboardtext);
        range.select();
    } else if (window.getSelection) {
        range = document.createRange();
        range.selectNodeContents(clipboardtext);
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
...
},

But in Chrome's development tools, the prettified code looks like this:

u = function(e, t) {
    var n;
    document.selection ? (n = document.body.createTextRange(),
    n.moveToElementText(e),
    n.select()) : window.getSelection && (n = document.createRange(),
    n.selectNodeContents(e),
    window.getSelection().removeAllRanges(),
    window.getSelection().addRange(n)),
    ...
},

Question

I am not able to set a breakpoint on one of the lines that end in a comma in the minimized code. How can I (or is there a way to) debug one of those lines?

Answer 1

There is a way to do it natively within Chrome Development tools. You can step-in step-out for each part of the chain of functions. For example, if you have

a(), b(), c()

and you want to debug the c() call, you can

• step-in (F11)
• step-out (shift F11)
• step-in
• step-out

and then the debugger will be at the state just before the call to c() (It may skip assignments or things that aren't functions.)

So for the above example, you just put a breakpoint on the var n; line, then start performing step-in, step-out to get you to the point of the code you want to debug, then use the console to debug the statements you want to inspect.

Answer 2

You can use Requestly extension to debug your JS files in your production environment.

Follow these steps

• Install Requestly as a browser extension or desktop app
• Go to Requestly Mock Server and Upload the non-minified file that has the same code as the file in production. Copy the URL of the uploaded file.
• Go to the Rules page and Set up a Redirect Rule and redirect your production URL to the URL obtained from the Mock Server.

This will make sure that your file is picked by the browser instead of the production environment. Now you can make changes to the file uploaded in Requestly (debug point, console log) and it all will be picked up by the browser.

Edit

As mentioned in the comment by OP, If you don't want to upload your code on Requestly Mock Server, you can simple run a local server and just set up a Redirect Rule in Requestly like this

URL Equals/Contains <your_production_JS_URL>
Redirect to <your_localserver_JS_URL>

Happy debugging!!