by Will Dages
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
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).
Make your logs stick around
In the same right-click menu in the Inspector Console, you can choose to “Preserve Log Upon Navigation.” By default, the logs and errors in your console clear every time you refresh or navigate to another page. This option will keep them around, which might be useful if you wanted to compare something before and after a change, or if you have code that redirects to another page, and you need to see logs that print before the redirect.
Show a console and the element panel at the same time
Change your document size without changing your window size
You can dock the inspector to the right of the screen! Click the button in the bottom left with the dark bar on the right (click and hold to reveal the option to un-dock the inspector). Now you can resize your viewport without resizing your browser (grab and drag the divider between the console and the webpage). This is really useful for testing responsive design breakpoints, and as an added bonus, doesn’t limit your min-width (ever wondered why you can’t get your Chrome browser down below a certain width? You’re limited by your browser extensions when resizing the window).
console.log() vs. console.warning() vs. console.error()
Most of the time, using console.log() is all I need, but there are a few other methods that can help from time to time. Use console.warn() to add a bright yellow triangle in front of that log, and use console.error() to include a stack trace with your error message. (Note: there’s also a console.debug(), but I’ve never felt the need to use it over console.log())
Logging objects and arrays you can explore
This trick can be incredibly helpful. Have you ever logged an object and seen this: [object Object]? No more!
Try it out… copy and paste the code above into a console! Note also that at the bottom, you can use the filters to only show a particular type of log (defaults to “All”).
Access local variables
This one is pretty cool. Say something is happening in a function and it isn’t returning what you expected, or isn’t taking the path it should. What do you do? You may start by adding a log statement at the top of the function that prints out all the parameters that are passed to the function, and then another log inside your if/else paths. How about this instead:
If you’re familiar with using breakpoints, this is the same concept, just inline in your code. Like breakpoints, you have access to the scope in your console where the breakpoint/debugger was inserted. Even cooler? Hover over a variable in the Sources tab to reveal its value!
Un-minify (Pretty-print mode)