How to determine if I have a javascript conflict on my site?

Question

I am currently moving the website from self-hosted to CMS. The current site uses a modal pop-up script called SqueezeBox.js I copied the code exactly as it looks on the current website, however the modal pop-up does not start when I click on the thumbnail.

Looking at the code in the header, I noticed that the CMS I use also causes a number of other javascript files, and I wonder if one of them causes a conflict.

What is the best way to find out if this is so? I tried Firefox Plugin Web Developer, but I see nothing in the error console. However, I am not 100% sure that I use it correctly. Can anyone else point me towards an easy to use javascript conflict detector?

Greetings

Adam

Answer 1

If you have Google Chrome, open the "Developer Tools" and you can go to the "scripts" tab, open your javascript files and find a click handler .. click on the side of the code to set a breakpoint, then when the code reaches this place (if you click it, for example), it will stop, and then in the Developer Tools you will see what functions are called when you go through the code. You can also hover over any variable in the code window to see its value. Very comfortably! Then you can see if it gets into your plugin at all (you can also do this by setting a breakpoint inside the plugin in a place, such as the first line, which will always be available when it starts).

I believe you can do the same with Firebug

This is a slightly different thinking process to enter (step forward, step over, enable breakpoints, etc.), but it is extremely useful.

An easier way to check for problems is to add a warning ("im working"); or something similar to code, you are not sure if it works. You can also warn the variable to find out what the value is. You can also use the console command to print it in the firebug console. They do what they disable / debug for you, except when debugging you do not need to change the code.

Answer 2

If there is a javascript error, then the easies path uses firebug or the Chrome Inspector (right-click on the thumbnail and select "Inspect Item"). Click the console tab and refresh the page. If there is an error, it will be reported in the console and will contain a link to the corresponding line.

If an error message is not reported, then the code logic prevents the window from being displayed. You will need to go through the code to find the error. See which function is called from the thumbnail click handler. Go to this function in any tool and place a breakpoint on the first line of the function. Click the thumbnail again and the code will stop at that line. From there, you can go through the code and see which code branch is followed. Probably, a performance check at some point does not work and makes the code bomb.