当 Chrome 开发者工具没有显示问题时如何找到问题答案

【问题标题】：How to find a problem when Chrome Developer Tools doesn't show one当 Chrome 开发者工具没有显示问题时如何找到问题
【发布时间】：2019-07-13 13:05:30
【问题描述】：

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

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

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

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

我知道你们很多人想要的第一件事是 javascript，但它是一个相当大的程序，所以我不知道如何提供一个不工作的、工作的模型，如果你得到了偏差。此外，我对学习使用 CDT 来解决此类问题更感兴趣。但我不知道下一步该做什么，我看了一堆 YouTube 视频，问了几个朋友，但都没有多大帮助。

现在看来，它“闪烁”的问题发生在 jQuery-3.3.1.js 的第 9548 行回调函数的“完整”部分。通过注释掉它来隔离它会使事情变得更糟，似乎没有任何效果。所以我又回到了原点。

在 CDT 中我应该注意什么？

【问题讨论】：

这听起来像是屏幕闪烁的常见问题（它有一个不同的术语，但我忘记了），默认 html 显示元素，然后 javascript 隐藏它们。 “修复”此问题的典型方法是默认隐藏它们，并让 javascript 在需要时显示它们，从而消除它短暂显示它们而您不需要显示它们的情况。
@Taplar 我真的很喜欢你的回答，所以我试了一下。我输入了两次切换列的相同代码。我在很多地方都试过了，包括之前和之后。不幸的是，这并没有解决问题。屏幕闪烁是对正在发生的事情的一个很好的描述，所以我会在这个想法上停留一段时间。
听起来你可能误解了我默认隐藏它们的意思。这指的是使用 css 来设置默认隐藏的元素，一旦页面加载。然后在必要时取消隐藏它们成为 javascripts 的工作。
@Taplar 我也会尝试一下。同时。现在看来，它“闪烁”的问题发生在 jQuery-3.3.1.js 的第 9548 行回调函数的“完整”部分。通过注释掉它来隔离它会使事情变得更糟，似乎没有任何效果。所以我又回到了原点。
据我了解，您在 devtools 中没有看到任何错误，因为没有。闪烁不是错误，它只是按照代码执行的顺序显示、隐藏和刷新事物的结果。因此，您只需跟踪代码的各个阶段并找出闪烁发生的原因。如果没有看到您的任何代码，任何人都很难提供帮助。看看你能不能创建一个minimal, complete, and verifiable example。

标签： jquery google-chrome-devtools

【解决方案1】：

如果您有代码库，请尝试使用 debugger; 来放置断点以调试 JavaScript。

【讨论】：

【解决方案2】：

由于您有兴趣了解如何使用 CDT 调试 DOM 中的 js/html/css 问题，我的回答将集中在那个，而不是您的确切问题可能是也可能不是。请注意，DOM 中的显示问题不是通常会出现在浏览器控制台中的错误——这是 CDT 调试的完美候选者。

CDT 中一个非常有用的技术是使用break on ... 功能。我将引导您了解如何使用它，以及如何利用它来诊断您的特定问题。有关我将要介绍的内容的更多信息，请访问 here。

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

希望这些信息能为您指明正确的方向，祝您好运！

【讨论】：