8

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.

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.

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?

Cheers

Adam

bbacarat
  • 253
  • 1
  • 4
  • 16

2 Answers2

4

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).

I believe you can do the same thing with 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 console command 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.

Damon
  • 10,493
  • 16
  • 86
  • 144
  • Thanks for your help. I've taken you advice but still don't really know what I'm doing with these tools, when it comes to javascript. Think I need a lay mans tool. – bbacarat Aug 30 '11 at 21:01
  • did you watch the screencast that I linked? I know it is a bit tricky to get into, but it will pay dividends in the longrun. I've also added another potential solution to my answer. – Damon Aug 31 '11 at 14:33
  • Where is the scripts tab in chrome developers tools? – RN Kushwaha Oct 06 '15 at 05:47
  • @RNKushwaha it's called 'Sources' now. – Damon Oct 06 '15 at 19:37
1

If there is a javascript error, then the easies way is using firebug or 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.

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.

Anthony DiSanti
  • 516
  • 8
  • 9
  • Hi it's an on click event does this matter? – bbacarat Aug 30 '11 at 18:27
  • Thanks for your help. As per Damon's suggestions I've taken you advice but still don't really know what I'm doing with these tools, when it comes to javascript. Think I need a lay mans tool. – bbacarat Aug 30 '11 at 21:02
  • The onclick event will be more difficult to debug. I don't believe breakpoints can be placed directly in the html like that. My recommendation is to call a function in the onclick event and put all the code inside that function. This will allow you to put a breakpoint on the first line of the function to step through the click handler. Unfortunately, these are really the most friendly tools out there for debugging javascript. They can be a little overwhelming at first, but after you get the hang of them, they're really easy to work with, especially the Chrome Inspector. Good Luck! – Anthony DiSanti Sep 12 '11 at 15:53