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

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!!