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

Question

Background

我在生产环境中遇到问题，我正在尝试调试。我无法放入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;行上放置一个断点，然后开始执行单步执行单步执行，单步执行，以使您到达要调试的代码点，然后使用控制台调试要检查的语句。

Answer 2

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

请按照以下步骤操作

请求
• 安装为浏览器扩展程序或桌面应用程序
• 转到请求模拟服务器并上传与生产中的文件具有相同代码的非缩小文件。复制上传文件的网址。
• 转到"规则"页面并设置重定向规则，然后将生产 URL 重定向到从模拟服务器获取的 URL。

这将确保您的文件由浏览器而不是生产环境选取。现在，您可以对在 Requestly 中上传的文件(调试点、控制台日志(进行更改，浏览器将获取所有文件。

编辑

正如OP的评论中提到的，如果您不想在Requestly模拟服务器上上传代码，则可以简单地运行本地服务器，然后像这样在Requestly中设置重定向规则

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

调试愉快！！