Chrome开发人员工具未显示问题时如何查找问题

Question

我一直在学习如何使用Chrome开发者工具（CDT）进行调试。

我正在尝试向以HTML / Javascript / jQuery / MySQL编写的应用程序添加一些功能。基本上，它会使用jQuery从MySQL加载由Ajax创建的表，以及检查cookie的数字列表的方式，该数字列表表示要打开或关闭toggle（）的列。

首次加载时，它会检查Cookie并按要求地加载请求的列。但是，当我刷新表（而不是重新加载页面）并再次读取cookie时，它会暂时显示列，然后立即再次将其关闭。

使用CDT遍历javascript会把我带出代码，并在// callback开始的行中进入jQuery v3.3.1或未压缩版本的第9523行。弹跳了一下之后，它停止了，并且我的页面显示出来，没有其他列。但是CDT中没有显示任何错误，而且它的任何功能“看起来”在我眼中都是错误的。

我知道你们很多人想要的第一件事就是javascript，但是它是一个很大的程序，所以如果您遇到麻烦，我不知道如何提供一个无法正常工作的模型。此外，我对学习使用CDT来解决此类问题更感兴趣。但是我不知道下一步该怎么做，我已经看了很多YouTube视频，我问了几个朋友，但是这些都无济于事。

现在看来，它的“闪烁”问题发生在jQuery-3.3.1.js中回调函数@ 9548行的“完成”部分中。通过注释将其隔离会使情况变得更糟，似乎没有任何效果。所以我回到正题。

我应该在CDT中寻找什么？

Answer 1

如果您有代码库，请尝试在要放置断点以调试JavaScript的地方使用debugger;。

Answer 2

由于您有兴趣了解如何使用CDT调试DOM中的js / html / css问题，因此我的答案将重点放在那个您确切的问题可能会或可能不会。请注意，DOM中的显示问题并不是通常会在浏览器控制台中显示的错误-CDT调试的理想之选。

CDT中一种非常有用的技术是使用break on ...功能。我将指导您如何使用它，以及如何利用它来诊断您的特定问题。有关here的更多信息，请参见DOM。

1. 直接在页面上消失的元素上单击鼠标右键，然后单击Inspect。
2. 启动数据库刷新，这会导致表消失，同时还要密切注意在开发工具中打开的树。
3. 注意上述操作导致DOM的变化；哪些元素已更改以及如何更改。要提出的问题是：“是否隐藏了元素？”，“是否删除了元素？”。通常，更改后，CDT会以紫色短暂地突出显示对DOM树的更改。
4. 如果更改是元素删除或添加，请尝试在DOM树中缩小直接在其下发生DOM更改的最低（最特定）父元素。如果是属性修改（即display: none，visibility: hidden等），请查找发生此更改的元素。您可能需要重复上述步骤几次，然后才能准确地进行更改。
5. 刷新页面。
6. 返回CDT DOM树，右键单击步骤4中的元素，然后：如果该元素是父元素，则单击Break on... > subtree modifications。如果这是属性更改的结果元素，请右键单击该元素，然后选择Break on... > attribute modifications。 here
7. 启动导致消失的数据库刷新。如果一切顺利，CDT应该抓住您的断点，并将您指向启动对DOM进行更改的当前javascript函数。您还应该看到一个调用堆栈，其中显示了导致当前函数调用的函数调用链。
8. 由于上述步骤，您将不会总是遇到非常有用的功能。您可能会使用低级库函数（即jQuery.js）。在这种情况下，将调用堆栈返回到最后一个用户编写的.js文件，并进行调查。这始终是罪魁祸首。否则，请按照https://github.com/BenMenking/routeros-api/blob/master/routeros_api.class.php所述的步骤继续执行代码，直到遇到可能的罪魁祸首为止。

希望此信息将为您指明正确的方向，祝您好运！