Different “clickable” log items in Chorome Dev Too

问题:

When I console.log a javascript object or array in Chrome Dev Tools I get a nice and clickable "drilldown" tree representation where I can inspect the various values, their keys and values with all the syntax highlighting, (i) icon, .length shown etc.

Is there some extension API for doing/changing this behaviour so it is different for some other classes/instances? My idea was to format Clojure data structures so one can inspect them the same way.

EDIT: I know I can do a simple formatting in console.log via %c etc., but that is only a tiny fraction of what I want to do.

So far I wasn't successful with googling. If you know where is the correct Chrome extension API written, can you please point me to the right direction?

回答1:

There are no current extension APIs for customizing console output. https://code.google.com/p/chromium/issues/detail?id=142783 tracks that item. The team is open to a patch for this, if you'd like to look into tackling the implementation.

回答2:

What you can do is to override console.log and, when object you are interested in is being printed out, use own function for printing it. To achieve something similar to the default object output you should probably use console.group and console text formatting (shown bellow).

See the official docs for more tips on using the Console.