Firefox add-on tools for checking JavaScript syntax?

Question

Not sure if there is any Firefox add-on tool for checking JavaScript syntax, var declaration, or even pre-compiling available?

I find out is very difficult to debug JavaScript in a web html page. I have to add some script there. When the scripts get very big or long, it stops working. Basically, there must be some bugs. It is very frustrating even the load event stop working. I do need some good tools to find out the bugs.

I have tried FireBug. It is good but not enough. Maybe I don't know all its features. Anyway, I need any good suggestions.

Flavone

Answer 1

This page may help you a bit as it also contains a screencast.

Debugging Javascript in Firefox with Firebug

Bleb

Answer 2

It's not strictly an Add-On (although you can obviously run it in a Firefox web page), but I've found JSLint to be helpful in exposing expression anomalies that might or might not be strictly invalid syntax (although it will catch all those, too.)

Adapa

Answer 3

My suggestion is to check you javascript with JSLint. JSLint will show you common problems in javascript code and helps you to create strict and compatible code.

YSlow includes JSLint as Tool.

Salford

Answer 4

As an alternative to FireBug check this debugger: Venkman JavaScript Debugger, has been out there for a while, and it's not bad at all...

Lollop

Answer 5

I have always been a firebug fan and it sure is one of the best debuggers out there. Any JS issue Press F12, Enable the console for catching the errors and then you can find the exact line causing the error. Add a breakpoint and you can see the exact values of variables too. Very intuitive UI..just get used to using it and it will save a lot of your time.

Tass

Answer 6

I HIGHLY recommend Rainbow. It's still in Beta and only works in FF3, but it offers syntax highlighting. That will get you half-way there when it comes to syntax.

Filial

Answer 7

I constantly use firebug with a js file that has some 15000 lines. I've had no problems with it (sometimes I have to wait a few seconds for it to scroll to the breakpoint but even then it works fine).

Unfortunately JSLint does'nt work for us. We use some third party code that while beeing "valid" has unnecessary ";" according to jsLint. The code is in the beginning of our js file and jslint stops analyzing at 3% because it thinks there are too many errors (all of them unnecessary ";".)

Ebro

Why don't you separate your script into different files at least in development mode? That way it would be easier to debug the code and even allow you to use JSLint. – Bradawl

Yeah if I really wanted to I could do it. It's too much of a hassle though. We have automated "publishing" system in place and it would be a lot of manual work to separate publish and test all our files all the time (you may call me lazy if you want). The debugging works fine so thats no issue. – Ebro

Answer 8

You're missing the point on 2 counts:

• First, being presented with a gazillion unnecessary error messages will make it impossible to find the problem in the first place.
• Secondly, the errors are unnecessary. I used to use JSLint religiously, but now it's become too much of a code Nazi and I can't use it.

I'm aware that many of the things it checks for can be disabled, but I just don't have enough time to research what I'd have to do.

The issue is the usability of the default configuration. I, like the original poster, am just looking for a way to find true JavaScript syntax errors very quickly, including on HTML pages. I'm sure that Firebug can do it, but as in the case with JSLint, I don't have the spare time to find out how.

I do, however, use Firebug for debugging, though the version I'm using (1.10.3) has a bad habit of displaying errors, but reporting an incorrect file and line number.

Dwarfish

Answer 9

Hi Gene: you could change one variable option.maxerr inside your jslint.js file into the number you want.

The default value is 50, you could change it to 500 or 1000 to suite your taste.

Ivyiwis

Answer 10

I use both the following for code validation.

• JSHint @ http://jshint.com
• JSLint FF Plugin. Get at https://addons.mozilla.org/en-us/firefox/addon/jslinter/

Alternatively, jshint and jslint plugins are available for text editors like Notepad ++, sublime etc.

Outbreak