Archive for category: tips

console.log(’8 Javascript Debugging Tips’);


by
21 Mar
March 21, 2013

The webkit developer tools are the single most helpful front-end development resource I have. I use them every day, and wanted to share a few tricks I use to track down bugs or unexpected behaviors in my javascript code. My browser of choice is Chrome,  so all examples and screenshots below will be pulled from the Chrome console.

First, if you’re still using Alerts to give yourself feedback, please stop. The unobtrusive console.log statement will give you feedback that can be much more descriptive, and sticks around for as long as you want it to. To get started, use the shortcut CMD+Option+J (Windows: CTRL+SHIFT+J) to pull up the Chrome console any time. Alternatively, you can right click the page and hit ‘Inspect Element’ to bring the panel up, then select the ‘Console’ tab.

Logging All HTTP Requests Automatically

Screenshot of the javascript console right-click options

Right click in the console to bring up these options

This one is simple, but can save a lot of manual logging, and potentially reveal some unwanted/unexpected/unnecessary network calls. You can right click in your Console to reveal the option to “Log XMLHttpRequests.” This will show you a twirl-down stack of calls that resulted in the sending, and finishing of an XMLHttpRequest (like a jQuery $.ajax() call). Read more →

© Copyright 2017 Findaway. All rights reserved.