Different “clickable” log items in Chorome Dev Tools console

人盡茶涼 提交于 2019-12-11 19:44:12

问题


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.



来源:https://stackoverflow.com/questions/18178896/different-clickable-log-items-in-chorome-dev-tools-console

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!