javascript - 在 Chrome 中使用逗号调试缩小的 JavaScript 函数

Question

背景

我在尝试调试的生产环境中遇到问题。我无法在 debugger 或 console.log 语句中放置，因为该问题仅发生在生产环境中。我可以在 Chrome 中查看美化后的代码。

源代码与缩小版

当我查看源代码时，它看起来是这样的:

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);
...
},

但是在Chrome的开发工具中，美化后的代码是这样的:

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)),
    ...
},

问题

我无法在最小化代码中以逗号结尾的行之一设置断点。我如何(或有没有办法)调试其中的一行？

Answer 1

有一种方法可以在 Chrome 开发工具中本地执行此操作。您可以为函数链的每个部分执行步进步出。例如，如果您有

a(), b(), c()

并且你想调试c()调用，你可以

• 介入 (F11)
• 跳出(转移 F11)
• 介入
• 走出去

然后调试器将处于调用 c() 之前的状态(它可能会跳过赋值或不是函数的东西。)

所以对于上面的例子，你只需要在var n;行下一个断点，然后开始执行step-in，step-out就可以到达你想要的代码点debug，然后使用控制台调试要检查的语句。