chrome-extensions-samples/api-samples/devtools/panels

devtools

This sample demonstrates using the devtools API to add a sidebar that displays the jQuery data associated with the selected DOM element.

Overview

This extension shows how DevTools can be expanded with new elements. It contains HTML and JavaScript files that are injected into the DevTools page to expand its functionality.

Running this extension

1. Clone this repository.
2. Load this directory in Chrome as an unpacked extension.
3. Go to https://jqueryui.com/resources/demos/draggable/default.html (a site that uses jQuery).
4. Open DevTools and select the div id="draggable" in the elements panel.
5. Find the "jQuery Properties" section and open it to access the newly added sidear.