Hi there,

I'm trying to debug some javascript which is in a file which is loaded by my page.tpl.php. Placing a breakpoint on the line which loads the file in Firefox seems to do nothing whatsoever - the debugger doesn't pause on the line of code.

I'm guessing that I must be going about this incorrectly. Any ideas?

Thanks, Rich

Comments

RichieRich’s picture

bump..

jaypan’s picture

What do you mean by a breakpoint?

Contact me to contract me for D7 -> D10/11 migrations.

RichieRich’s picture

A debugging breakpoint. You place these markers on lines of code which you want to step into etc.

jaypan’s picture

Lets see your code.

Contact me to contract me for D7 -> D10/11 migrations.

RichieRich’s picture

I've managed to get it working now but I still don't know how to debug javascript in an external file. I wanted to debug the file 'myscript.js' from Firefox. If anybody knows how to do this I'd love to hear from them as I have no doubt that it will come in handy later. This is the page with the 'myscript.js' file.

http://www.ishigaki-japan.com/maps/places_of_interest

jaypan’s picture

I debug syntax errors by looking at what error appears in Firebug. I debug logic errors by checking the data in variables by outputting said data to a div on the screen.

Contact me to contract me for D7 -> D10/11 migrations.

RichieRich’s picture

Okay. That's a bit of an old-school approach as you have to modify the html design in order to debug, but then again it may be required if you can't step into the files directly.

If the script is visible in the html document you can just use firebug to add breakpoints and watches on variables which is much easier than outputting variables to divs, but I guess that you might know this already.

RichieRich’s picture

I just found this description on another website. Works perfectly. You can debug any external script if you do this in firebug:

1. Click on the 'Script' tab.
2. Click on the 'all' drop down in the upper left hand corner above the script code content window.
3. Select 'Show Static Scripts'.
4. Click on the dropdown button just to the right of what now says 'static' (By default, it should show the name of your current web page). You should now see a list of files associated with the current web page including any external JS files.
5. Select the JavaScript file you are interested in and it's code will display in the content window. From there, you should be able to set breakpoints as normal.

I'm impressed by how good firebug is for debugging - just hover over variables and you get values etc. Rather like using Visual Studio.

jaypan’s picture

Thats a good little bit of info.

As for my approach though - Its part of a library I include myself when building scripts. add a call to debug(variable) and it inserts whatever data I'm working with right after the opening body tag. Old school? Maybe, but works like a charm and I use it all the time.

Contact me to contract me for D7 -> D10/11 migrations.

RichieRich’s picture

Well, it sounds like what you've done is quite clever but why not just use firebug's debugger for all that? Surely it's easier and more effective.

I said 'old school' because outputting the value of variables was something that I used to do in my old c++ days at uni before I started to use environments that have debugging facilities. Having said that I'm completely new to javascript.

Anonymous’s picture

Aptana is a good Integrated Development Environment that I was just introduced to. It allows you to step into functions as well as edit code in the same application.

Slideshow for configuring it with Drupal.