5 ms·
Ask HN: When do you use Chrome's Javascript console?
I'm just getting started with Javascript programming, and curious about how to set up a development cycle (development being too big a word in this case...), in particular when to use tools such as Chrome's Javascript console.
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.
Any pointers will be welcome. Do you know of any screencasts on this development cycle?
Thank you in advance.
- chintan 16y agoI find Firebug generally more useful for JS debugging. Try the Chrome PageSpeed plugin - I like the "sluggishness" chart. Its Very cool!
- ez77 16y agoOK, same question under Firefox. When do you launch the Javascript console? Could you give a brief example? Thanks!
- jacabado 16y agoWhen 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.
- apsurd 16y agoJavascript, 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 16y agoThank you for such a detailed answer! Would you recommend any articles/books/blogs that walk you through these (and more) tricks of the trade?