diff --git a/api-samples/devtools/panels/chrome-query/chrome-query.md b/api-samples/devtools/panels/chrome-query/chrome-query.md index 1eba02b5..fffe6010 100644 --- a/api-samples/devtools/panels/chrome-query/chrome-query.md +++ b/api-samples/devtools/panels/chrome-query/chrome-query.md @@ -5,3 +5,11 @@ This sample demonstrates using the devtools API to add a sidebar that displays t ## Overview The devtools window can be expanded with new elements created by the user. The extension contains html and js 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.