Google chrome devtools 如何在Chrome中调试长脚本？

我有一个页面有一个

脚本
标签。该标记中的脚本非常长，但我想调试它。不幸的是，我无法滚动到控制台中的相关位置，因为在一定长度后，脚本根本不显示，请参阅附件：


正如你所看到的，它以

return !filt...

实际函数如下所示：

            this.validate = function(filters) {
                for (var filter in filters) {
                    if (!innerValidation(filters[filter].filterType, filters[filter].evaluatedValue, data[filters[filter].key])) {
                        return filters[filter].isOr;
                    }
                }
                return !filters[filter].isOr;
            };

问：为什么Chrome会截短我的脚本，如何改变

请注意，我知道我可以从外部文件加载它，但实际上我很想知道这种行为的原因。
如果您有一个长脚本，最好将其放入自己的文件中。这将为您提供最佳的调试体验

“元素”面板会截断大型脚本以帮助保持快速运行，并且无法撤消此操作。因此，您需要使用一些外部调试工具来尝试实现这一点，但即使如此，它们中的大多数也能最好地处理外部脚本文件

如果使用内联脚本，则应该非常短。对于任何大小合适的脚本块，请将其分配到自己的文件中。
如果脚本较长，最好将其分配到自己的文件中。这将为您提供最佳的调试体验

“元素”面板会截断大型脚本以帮助保持快速运行，并且无法撤消此操作。因此，您需要使用一些外部调试工具来尝试实现这一点，但即使如此，它们中的大多数也能最好地处理外部脚本文件

如果使用内联脚本，则应该非常短。对于任何大小合适的脚本块，请将其分配到自己的文件中。
脚本的显示被截断，但它仍然正确地解析和运行代码。您应该能够在相关主机下的“源”选项卡中查看完整代码，并在其中放置断点。
脚本的显示被截断，但它仍然正确解析和运行代码。您应该能够在相关主机下的Sources选项卡中查看完整代码，并在其中放置断点。
在我的控制台中，我可以看到完整代码，您使用的是哪个版本的chrome？您可以将其放在js文件中吗？@DanielA.White，我可以放置，但我实际上对答案感兴趣，因为第三方脚本的使用并不总是一个选项。请看问题的最后一句话。@dest，您使用的脚本有多大？在我的控制台中，我可以看到完整的代码，您使用的是哪个版本的chrome？能否将其放入js文件中？@DanielA.White，我可以将其放入，但我实际上对答案感兴趣，因为第三方脚本的使用并不总是一个选项。请参阅问题的最后一句。@dest，您使用的脚本有多大？Garbee，我们不是在讨论外部文件的优缺点。我们正在讨论脚本已经在页面中的情况。例如，您可能想要调试一个您没有开发的页面，以研究它是如何工作的。因此，您的答案的本质可以归结为“这种行为是由于加速了控制台的加载，并且它是不可更改的”。您是否有支持您的声明的来源？没有关于截断原因的公开数据。它可能起源于很久以前的WebKit。从维护人员的角度考虑，您需要考虑当有人执行5k行内联脚本时会发生什么。您需要在语法上突出显示它，如果面板中出现样式recalc，则在运行时重新突出显示。除非您将视图限制在合理的范围内，否则这将消耗时间。我部分同意您的观点，尤其是您的观点，即开发工具不应被强制加载该大小的页面，但是，如果有一个标志支持将完整视图作为一个选项，并将false作为其默认值，那就更好了。事实上，我知道目前唯一的替代方法是在dev工具的sources选项卡中查找脚本，请参阅公认的答案。然而，这样做的用户体验并不是最高的：）Chrome的理想是不提供选项，除非有非常好的理由这样做。这样，实际使用数据驱动决策，而不是成千上万试图以稍微不同的方式做事的人的愿望。如果我们总是像通常所说的那样使用“简单标志”，我们将有数百个选项和代码路径，没有人能够有效地维护。这很公平：）Garbee，我们不是在讨论外部文件的优缺点。我们正在讨论脚本已经在页面中的情况。例如，您可能想要调试一个您没有开发的页面，以研究它是如何工作的。因此，您的答案的本质可以归结为“这种行为是由于加速了控制台的加载，并且它是不可更改的”。您是否有支持您的声明的来源？没有关于截断原因的公开数据。它可能起源于很久以前的WebKit。从维护人员的角度考虑，您需要考虑当有人执行5k行内联脚本时会发生什么。您需要在语法上突出显示它，如果面板中出现样式recalc，则在运行时重新突出显示。除非您将视图限制在合理的范围内，否则这将消耗时间。我部分同意您的观点，尤其是您的观点，即开发工具不应被强制加载该大小的页面，但是，如果有一个标志支持将完整视图作为一个选项，并将false作为其默认值，那就更好了。事实上，我知道目前唯一的替代方法是在dev工具的sources选项卡中查找脚本，请参阅公认的答案。然而，这样做的用户体验并不是最高的：）Chrome的理想是不提供选项，除非有非常好的理由这样做。这样，实际使用数据驱动决策，而不是成千上万试图以稍微不同的方式做事的人的愿望。如果我们总是像经常看到的那样做“简单标志”