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

有一种方法可以在Chrome开发工具中本地执行此操作。您可以逐步执行功能链的每个部分。例如，如果你有

a(), b(), c()

你想调试c()电话，你可以

• 步入（F11）
• 步出（轮班F11）
• 踏入式
• 失步

然后调试器将处于调用c()之前的状态（它可能会跳过分配或不起作用的事情。）

因此，对于上面的示例，您只需在var n;行上放置一个断点，然后开始执行步入，逐步执行以使您到达要调试的代码点，然后使用控制台调试要检查的语句。

Answer 2

您可以使用Requestly extension在生产环境中调试JS文件。

请按照以下步骤

• 安装Requestly扩展程序（http://www.requestly.in）
• 转到请求图书馆（http://www.requestly.in/library）
• 上传与生产中的文件具有相同代码的缩小/非缩小文件。您将获得上传文件的网址。
• 转到规则页面（http://www.requestly.in/rules）
• 设置重定向规则并将您的生产网址重定向到从库中获取的网址。
• 这将确保浏览器选择您的文件来代替生产环境。

现在，您可以对请求上传的文件进行更改（调试点，控制台日志），并且所有内容都将被浏览器选中。

快乐调试!!