1. $0 – $4 selectors
The last inspected element is always available in the console as $0. $1 points to the next most-recently element and so on. AngularJS developers can leverage this to retrieve the scope of elements by invoking angular.element($0).scope().
Want to inspect the DOM element? Right-click on it and select reveal in ELEMENTS panel.
The monitor function is useful for tracing function invocations and parameters. Note that for reference types (e.g. objects), the logs show [Object object] – probably due to calling toString on values. Primitive values are all good.
Turn off tracing with unmonitor or by refreshing the page.
Allows you to monitor events that happen on particular DOM elements. The first parameter is the DOM element to log event information for while the second parameter is the event (or array of events) to track. If this is undefined, then all events on that object will be logged.
As usual, deregister with unmonitorEvents.
Calling debug on a function would break invocation as soon as that function is invoked. This is very useful for those one-liners or for debugging external libraries. Calling undebug removes the breakpoint.
Note: What if some external library overrides debug? Ideally namespaceing should be used to avoid overriding globals; however, all the command line API functions are accessible via the __commandLineApi object. Try examining the object in your console.
console.log works great but makes it difficult to view tabular information. Enter console.table (table) to the rescue. It accepts property names as extra parameters for filtering out unwanted columns.
6. Keys and Values
For accessing the keys and values of objects. Combine with table for even more fun!
Want to preserve logging even when you reopen the tab? Check that box. Want to target a specific iframe? Select it from the drop down. Want to clear the log? Click the Ø button or use CTRL + L.
And that wraps it up!
Enjoyed this? Here are some more posts in this series:
5 thoughts on “Chrome dev tools deep dive : Console”