在Chrome中调试带逗号的压缩JavaScript函数

Question

背景

我在生产环境中遇到了一个我尝试调试的问题。由于该问题仅在生产环境中发生，因此我无法放置debugger或console.log语句。我可以在 Chrome 中查看漂亮的代码。

源码 vs. 压缩代码

当我查看源代码时，它看起来像这样：

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

问题

我无法在以逗号结尾的一行最小化代码上设置断点。有什么方法可以在这些行中进行调试吗？

- shakin

Answer 1

在Chrome开发工具中，有一种原生的方法可以做到这一点。您可以逐步进入和退出每个函数链的部分。例如，如果您有 a()，b()，c() 并且想要调试 c() 调用，则可以：

• 步入 (F11)
• 步出 (shift F11)
• 步入
• 步出

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

因此，对于上面的示例，您只需在 var n; 行上设置断点，然后开始执行步入、步出操作，以便到达要调试的代码点，然后使用控制台调试要检查的语句即可。

- shakin

Answer 2

你可以使用Requestly扩展程序来在生产环境中调试JS文件。

按照以下步骤操作：

• 安装Requestly浏览器扩展程序或桌面应用程序
• 转到Requestly模拟服务器，上传与生产文件具有相同代码的非压缩文件。复制已上传文件的URL。
• 进入规则页面，设置重定向规则并将生产URL重定向到从模拟服务器获取的URL。

这将确保浏览器选择文件而不是生产环境。现在，您可以更改在Requestly中上传的文件（调试点，控制台日志），并且所有更改都将被浏览器捕获。

编辑

正如OP在评论中提到的那样，如果您不想将代码上传到Requestly Mock服务器上，您可以简单地运行一个本地服务器，并在Requestly中设置一个重定向规则，就像这样。

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

愉快地调试吧！

- Akhil ojha

---

我所工作的公司出于专有原因不允许将代码上传到第三方网站。 - shakin

@shakin Requestly使用Google Drive存储您的文件，因此您的数据随时随地都在您身边。即使现在您正在使用CDN来托管您的JavaScript，如果您使用上述方法，则将存储在您的Google Drive中。 - Sachin Jain

已更新答案，包括最新信息 - Mockserver，并添加了一个带有本地服务器的编辑部分。 - Sachin Jain