

Ask HN: When do you use Chrome's Javascript console? - ez77

I'm just getting started with Javascript programming, and curious about how to set up a development cycle (<i>development</i> being too big a word in this case...), in particular when to use tools such as Chrome's Javascript console.<p>The autocompletion and syntax coloring look very good (and fast!), but I'm a bit lost. After all, a nice editor or IDE also has these features, minus the interactive aspect.<p>Any pointers will be welcome. Do you know of any screencasts on this development cycle?<p>Thank you in advance.
======
apsurd
Javascript, like html, is all client side so its easy enough to code in with a
simple text editor and refresh. Chrome is now my default browser so I use the
js console for all my debugging. I just code changes, hit refresh and watch
the console. No errors generally mean the app works as intended. Syntax errors
bring up a red x and the line number. The console is also very useful for
debugging and verifying asynchronous requests. Logging to the console is also
very helpful using console.log();. Lastly the debugger helps you track down
404 requests like old paths to images and does general asset speed
optimization.

A common example would be attaching handlers to some links via jquery. I
usually start with asserting that a jquery click handle is executing. I would
console.log('works'); and refresh the page. If nothing logs, then I look if
any errors were reporting, has the jquery file loaded (the console tells you
all this).

Second thing I use a lot if ajax so I have to know if I'm getting a response
back, and what the response is. A lot of times the response can cause a 500
error and you won't see any updates from the browser side. Using the console
you can see whether or not the request was made, check headers, and response
output. An error response is conveniently reported with bold red dot to
indicate a problem.

~~~
ez77
Thank you for such a detailed answer! Would you recommend any
articles/books/blogs that walk you through these (and more) tricks of the
trade?

------
chintan
I find Firebug generally more useful for JS debugging.

Try the Chrome PageSpeed plugin - I like the "sluggishness" chart. Its Very
cool!

~~~
ez77
OK, same question under Firefox. When do you launch the Javascript console?
Could you give a brief example? Thanks!

~~~
jacabado
When something is not working properly I put a breapoint on the suspect area
(you can do this in the script viewer or by code writing <i>debugger;</i>)
then I will use the console script to inspect some variables or test the
outcomes of certain bits of the code. It's a must.

