This document contains the steps for creating a bookmark enabling you to view any page’s JSLL “data-bi-name" tags. The instructions are chrome specific, similar steps will work in other browsers.
-
In Chrome, press CTRL+SHIFT+B to display the bookmark bar.
-
Right click on the bookmark bar and choose Add page....
-
In the Edit bookmark dialog, clear the contents of the Name field and enter something like Show JSLL Content Tags.
-
In the URL field, add the following:
javascript: document.head.insertAdjacentHTML('beforeend', '<style>[data-bi-name]:hover{outline:purple dashed!important;cursor:crosshair!important}[data-bi-name]:hover:not([style*=top]){position:relative!important}[data-bi-name]:hover::before{position:absolute!important;top:0!important;left:0!important;pointer-events:none!important;z-index:100000;padding:2px!important;line-height:100%!important;content:attr(data-bi-name)!important;color:#fff!important;background-color:purple!important;font-size:12px!important;font-family:monospace!important;font-weight:400!important;text-decoration:none!important}</style>') -
The dialog should look like this:
-
Click Save to finish creating the bookmarklet.
-
Go to a docs page... click on the new Show JSLL Content Tags button in your bookmarks bar. You should see the content tags for elements you hover over.
