Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Custom object inspection in Chrome development console

I wonder — does Chrome development tools support something like Ruby inspect or Objective C description methods to print some meaningful string instead of just showing the object constructor name when you explore the objects in the console.

clarifying screenshot So in that case — instead of showing "Crossing, Crossing, Crossing, ..." it would show some custom string for each object (generated by a method of that object).

ps. I know that there is a console.table method which can produce some nice output, but it still would be nice to have a more universal object formatting.

like image 418
Dmitry Sokurenko Avatar asked Sep 17 '15 15:09

Dmitry Sokurenko


People also ask

How do I inspect element in Chrome console?

One of the easiest ways to inspect a specific web element in Chrome is to simply right-click on that particular element and select the Inspect option. Clicking on the Inspect option from the right-click menu will directly open the Developer tools including the editor, Console, Sources, and other tools.

How do I inspect element in console?

Right-click anywhere on the page and choose Inspect Element, or you can use the keyboard shortcut Command+Option+I.


1 Answers

The name of the feature you are looking for is custom formatters

Basically you must enable the feature in Chrome and make that during the start process of your script, you write your formatters into the magic global var window.devtoolsFormatters

The official doc:

https://docs.google.com/document/d/1FTascZXT9cxfetuPRT2eXPQKXui4nWFivUnS_335T3U/preview

like image 51
SystematicFrank Avatar answered Sep 17 '22 14:09

SystematicFrank