我在工作中不得不调试一些特别恶心的看不见原因的Javascript问题。了解像Chrome这样的开发者工具的完整深度肯定是有帮助的。毫无疑问,需要一些创造力来找到可能导致问题的地方,但是有一些提示:
追踪事件监听器
在Chrome的元素视图下,尝试检查一个元素(右键,检查),然后,在开发者视图的右侧向下滚动到事件监听器。在这里,您可以查看哪些代码文件已经连接到一个事件上。通常,这只会让你指向一个从你正在寻找的非常阴险的代码中间框架,但有时它会指向正确的方向。
捕获DOM修改
我看到的许多不受欢迎的影响是因为某些东西改变了页面上我不想要的一些值或属性。每当发生这种情况时,您可以右键单击元素(在元素视图下)并说“断点”以及您要查找的特定情况。当Chrome遇到断点时,您可以向下查看堆栈跟踪,直到找到应该不被调用的可识别内容。
在达到十个投票后编辑!
捕获JS对象修改
如果您感兴趣的更改是在代码内部而不是在UI中进行的,则事情会变得更加棘手。这种情况所指的是您知道在代码中的某个地方发生了令人非常恼火的事情,就像下面的例子一样。
company.data.myObject.parameter = undefined
在这种情况下,你知道myObject
仍然是同一个对象,但它正在被修改,可能是无意中。为此,我经常插入以下代码段,有时只是通过开发者控制台在修改发生之前的某个时间点添加。
Object.defineProperty(company.data.myObject, 'parameter', {
set: (val) => {
debugger;
}
});
这包括箭头函数——你只是用它进行调试,Chrome 支持它,所以最好节省按键次数。这将会在某行代码尝试修改 myObject
的“parameter
”属性时冻结你的调试器。如果你可以从先前的断点运行此代码行,则不一定需要全局引用该变量。
否则,如果我只有 HTML 代码并想将其与 JavaScript 代码联系起来,我通常只会查找识别特征,例如“id”元素,并在我的开发目录中搜索所有 JS 文件。通常,我可以很快找到它。