在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;上放置一个断点即可var n; 行，然后开始执行逐步，渐进式操作，以使您到达要调试的代码点，然后使用控制台调试要检查的语句。

Answer 2

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

跟着这些步骤

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

现在，您可以更改请求中上载的文件（调试点，控制台日志），所有这些文件都将被浏览器提取。

调试愉快！！