如何确定我的网站上是否存在 javascript 冲突？

How do I identify if I have a javascript conflict on my website?

提问by bbacarat

I'm currently moving a website from self hosted onto a CMS system. The current site uses a modal popup script called SqueezeBox.js I've copied the code across exactly how it looks on the current website, however the modal popup box isn't triggering when I click on a thumbnail image.

我目前正在将网站从自托管转移到 CMS 系统上。当前站点使用名为 SqueezeBox.js 的模态弹出脚本我已经将代码复制到当前网站上的外观，但是当我单击缩略图时不会触发模态弹出框。

Looking at the code in the header I've spotted that the CMS I'm using is also calling a number of other javascript files and I'm wondering if one of them is causing a conflict.

查看标题中的代码，我发现我正在使用的 CMS 还调用了许多其他 javascript 文件，我想知道其中一个是否导致了冲突。

What's the best way to find out if this is the case? I've tried Firefox's plugin Web Developer but can't see anything in the Error Console. However I'm not 100% sure I'm using it correctly. Can anyone else point me in the direction of a simple to use javascript conflict detector?

确定是否属于这种情况的最佳方法是什么？我尝试过 Firefox 的插件 Web Developer，但在错误控制台中看不到任何内容。但是，我不是 100% 确定我是否正确使用它。其他任何人都可以向我指出一个简单易用的 javascript 冲突检测器的方向吗？

Cheers

干杯

Adam

亚当

采纳答案by Damon

If you have Google Chrome, open up the Developer Tools and you can go into the 'scripts' tab, open up your javascript files and look for the click handler.. click along the side of the code to set a breakpoint, then when the code reaches that spot (if you click it, for example), it will pause, and then in the Developer Tools you can see what functions are being called where as you step through the code. You can also hover over any variable in the code window to see its value. Very handy! You can then see if it's getting into your plugin at all (you can do this as well by setting a breakpoint inside the plugin at a place like the first line that will always be accessed when its run).

如果你有谷歌浏览器，打开开发者工具，你可以进入“脚本”选项卡，打开你的 javascript 文件并查找点击处理程序..点击代码的一侧以设置断点，然后当代码到达该位置（例如，如果您单击它），它将暂停，然后在开发人员工具中，您可以在逐步执行代码时看到正在调用哪些函数。您还可以将鼠标悬停在代码窗口中的任何变量上以查看其值。非常便利！然后，您可以查看它是否完全进入了您的插件（您也可以通过在插件内的某个地方设置断点来做到这一点，例如在运行时将始终访问的第一行）。

I believe you can do the same thing with Firebug

我相信你可以用 Firebug 做同样的事情

It's a bit of a different thinking process to get into (step into, step over, turning breakpoints on and off etc) but it's extremely useful.

这是一个有点不同的思考过程（步入，跳过，打开和关闭断点等），但它非常有用。

A more simple way of checking where problems are occuring is by adding an alert('im working); or something similar to code you're not sure if it's working. You can also alert a variable to see what the value is at that point. You can also use consolecommand to print it to firebug's console. These are doing things that breakpoints/debugging do for you except with the debugging you don't need to change your code.

检查问题发生位置的更简单方法是添加警报（'我正在工作）; 或类似于代码的东西，您不确定它是否有效。您还可以提醒变量以查看该点的值。您还可以使用控制台命令将其打印到 firebug 的控制台。这些是断点/调试为您做的事情，除了调试您不需要更改代码。

回答by Anthony DiSanti

If there is a javascript error, then the easies way is using firebugor the Chrome Inspector (right click on the thumbnail and choose "Inspect element"). Open the console tab of either and refresh the page. If there is an error, it will be reported in the console and provide a link to the relevant line.

如果出现 javascript 错误，那么最简单的方法是使用firebug或 Chrome Inspector（右键单击缩略图并选择“检查元素”）。打开任一控制台选项卡并刷新页面。如果有错误，会在控制台中报告并提供相关行的链接。

If there is no error being reported, then the code's logic is preventing the box from being displayed. You'll need to step through the code to find the error. Look at what function is being called from the click handler of the thumbnail image. Go to that function in either tool and place a breakpoint on the first line of the function. Click the thumbnail again and the code will pause on that line. From there you can step through the code and see which code branch is followed. There's likely a sanity check at some point that fails and causes the code to bomb out.

如果没有报告错误，则代码的逻辑正在阻止显示该框。您需要单步执行代码以查找错误。查看从缩略图的单击处理程序调用了什么函数。在任一工具中转到该函数并在该函数的第一行放置一个断点。再次单击缩略图，代码将在该行暂停。从那里您可以逐步执行代码并查看遵循哪个代码分支。可能在某个时候进行的健全性检查失败并导致代码爆炸。