mirror of
https://github.com/GoogleChrome/chrome-extensions-samples.git
synced 2026-03-30 13:59:35 +07:00
be334066a2
* devtools sample * Added readme * Updated readme * Changed folder structure * Update devtools.html * Update devtools.js * Update devtools.js * Update api-samples/devtools/chrome-query/chrome-query.md Co-authored-by: Joe Medley <jmedley@google.com> * Changed folder name * readme name change --------- Co-authored-by: Joe Medley <jmedley@google.com>
16 lines
806 B
Markdown
16 lines
806 B
Markdown
# 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.
|