Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lawrencec/webinspectorextensions
Examples to learn how to extend WebInspector
https://github.com/lawrencec/webinspectorextensions
Last synced: 3 months ago
JSON representation
Examples to learn how to extend WebInspector
- Host: GitHub
- URL: https://github.com/lawrencec/webinspectorextensions
- Owner: lawrencec
- Created: 2012-01-04T00:26:10.000Z (about 13 years ago)
- Default Branch: master
- Last Pushed: 2012-01-04T16:03:26.000Z (about 13 years ago)
- Last Synced: 2024-10-04T18:54:37.950Z (4 months ago)
- Language: JavaScript
- Homepage:
- Size: 93.8 KB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
- Audit: Audit/Readme.md
Awesome Lists containing this project
README
# WebInspectorExtensions
I found the [official documentation and examples](http://code.google.com/chrome/extensions/experimental.html) for extending the web inspector functional but unclear. So this repo is mainly
examples found in the documentation with its filesystem refactored (for clarity) and in some cases, refactored js which might better reflect how it might be used in the wild (as opposed as just as code example).
All this is my learning curve in understanding how to extend the webinspector; expect ineffiencies etc.
Current examples are:
* Basic - Extends the developer tools, show relationship between background and devtools pages.
* Audit - Extends the Developer Tools, adding an audit category that finds broken links on the inspected page.
* ElementsSidebar - Extends the Developer Tools, adding a sidebar that displays WAI-ARIA information about the inspected element.
* Panel - Example of how to add a panel to web inspector and retrieve and render information about the inspected window.
## Usage:
Make sure that the 'Experimental Extensions API' is enabled in the 'chrome://flags/' page.
Load the extensions page and load an extension by clicking on the 'Load unpacked extension' - select the extension directory to choose the extension to load e.g the ElementsSidebar directory.