The console is one of favorite places. The REPL environment is a quick way to validate JavaScript expressions. However, there is a lot more it can do. Read on.
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.
2. Monitor
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.
3. MonitorEvents
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.
4. Debug
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.
5. Console.Table
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!
7. Others
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:
CodeKraft 
5 thoughts on “Chrome dev tools deep dive : Console”