Chrome dev tools deep dive : Console


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.

selectors

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.

monitorTurn 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.

monitorEvents4. 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.

debug

5. 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.

table6. Keys and Values

For accessing the keys and values of objects. Combine with table for even more fun!

keys

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.

MISC

And that wraps it up!

Enjoyed this? Here are some more posts in this series:

  1. Chrome dev tools deep dive : Elements
  2. Chrome dev tools deep dive : Sources
  3. Chrome dev tools deep dive : Network

0 Comments

·

Leave a Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s