# 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](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked).
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.