Skip to main content
GameDev.net gamedev.net
🔒 Locked

[web] How to debug html/javascript properly?

Started by marc40000 Jul 25, 2010 at 3:00 PM 6 replies 1.9k views
Original Post
marc40000
marc40000
Hi !

I wrote a browser game about 10 years ago and thought I lost it, but was able to recover it from an old backup cd lately :)

It was quite easy to make it run on a current php version (I wrote it back on php3 with magic quotes on etc.). Just minor modifications though.

Back in 2000, Internet Explorer was dominating, followed by a few netscape users and hardly anyone used Opera. So, back then, I went and made it work with IE. Surprisingly, after all what has happend in the browsers history, it still works (except for screen.availWidth and availHeight got case sensitive somewhen :/). But it absolutely doesn't work on any other current browser. :(

I don't think there is too much wrong for them, some things I was able to figure out, but most of the time, it's like: when I click something, in IE it happens, but in FF just nothing happens. So my question is: Is there a tool for &#106avascript debugging that somehow tells me what's wrong? It's strange that nothing really happens instead of displaying an errormsg somewhere. I tried the firefox addons FireBug and &#106avascript Debugger so far, but the first doesn't seem to be targetting &#106avascript debugging (or I don't know how to use it correctly) while the 2nd reveals that a lot of &#106avascript functions seem to be implemented in &#106avascript itself in ff and I get lost in some internal ff &#106avascript :/<br><br>I installed the game &#111;nline if you want to have a look: <a href="http://www.confrontation-unlimited.net/cuweb">Confrontation Unlimited Web</a> It's a persistent &#111;nline strategy game with a map and units you can move around &#111;n it and build buildings.<br><br>I have to apologize because the website is in german but the game itself is in english, no idea why I did it back then :D, but the registration is as well in english: <a href="http://www.confrontation-unlimited.net/cuweb/game/anmeldung.php">registration</a> and you can login from the start page.<br><br>The registration link from above is already the first page that doesn't work in ff without any comment. If you try that page in IE, you can change the background color of your empires emblem by clicking &#111;n those color bars. In ff, that doesn't work - all the other &#106avascript I was able to make it work, like changing the layers of the emblem.<br><br>There are more of those issues inside the actual game so a general approach for debugging &#106avascript is of interest to me.<br><br>Thx :)<br> Marc
marc40000
marc40000
Ha I found out how to do it: Firefox has a "Error Console" where it writes all errors and warnings. That helped a lot - except for one case, where nothing happened and no error or warning appeared in the console. There was also one case where there is a warning and it suggest to use something else instead which would logically be the same as far as I understand it, but it actually behaves differently. So I left the warning :/

But I think it's working in IE, Firefox & Chrome now! :D (I haven't tested others)
Sander
Sander
I highly recommend installing FireBug in Firefox. It comes with a complete &#106avascript debugger (including stepping through code as it runs).
Sik_the_hedgehog
Sik_the_hedgehog
Wait, do you mean that it doesn't respond to user input? Do you rely on any events? If so, it's event shenanigans - DOM events have a completely different syntax from the events used by old browsers (and currently only IE supports the old syntax). You'll need to rewrite event code to make them work again.

Beware though, IE only supports the old syntax, so for maximum portability, you'll need to support both. Check if DOM events are available (easy, just check for addEventListener), if they don't, then resort back to old-style events. That should make events work again.

(and for the record, this is something that would not pop up on the error console)

EDIT: ugh, misread second post... Nevermind then. But still, it's useful to remember this because it can hunt you down later.
Don't pay much attention to "the hedgehog" in my nick, it's just because "Sik" was already taken =/ By the way, Sik is pronounced like seek, not like sick.
adulti
adulti
I always use firebug, but there are some difference between ie and firefox. There are times when i can not find the problems on IE.

Integrated Debugger, anybody knows more about this? Please advise.
I'm working on magento seo, sample sites: uggs
benryves
benryves
Quote:
Original post by adulti
Integrated Debugger, anybody knows more about this? Please advise.
Hit F12 to bring up IE's developer tools. (Also available under Tools→Developer Tools).
[Website] [+++ Divide By Cucumber Error. Please Reinstall Universe And Reboot +++]
cdoty
cdoty
<a href='http://www.aptana.com/">Aptana allows you to debug &#106avascript. And, it's a pretty decent IDE for &#106avascript/html/css (and supposedly PHP, but I haven't tried that yet).
Check out Super Play, the SNES inspired Game Engine: http://www.superplay.info

Topic Locked

This topic has been locked by a moderator. New replies are not allowed.

Sign in to reply to this topic.