Chrome DevTools API Complete Reference
3 min readchrome.devtools API Reference
The chrome.devtools API extends Chrome DevTools with custom panels, sidebars, and network tools.
Overview
- Create custom DevTools panels alongside built-in ones (Elements, Console, Network)
- Add sidebar panes to existing panels like Elements
- Interact with the inspected page using eval and reload
- Monitor network requests and responses
- No permission required (use
devtools_pagekey in manifest) - Only available when DevTools is open
Manifest Configuration
{ "devtools_page": "devtools.html" }
<script src="devtools.js"></script>
chrome.devtools.panels
panels.create(title, iconPath, pagePath, callback)
Creates a new panel in DevTools.
chrome.devtools.panels.create("My Panel", "icon.png", "panel.html", p => { });
panels.elements.createSidebarPane(title, callback)
Adds a sidebar pane to the Elements panel.
chrome.devtools.panels.elements.createSidebarPane("Info", s => s.setObject({ x: 1 }));
panels.themeName
Returns current theme: "default" or "dark".
ExtensionPanel Events
- onShown: Fired when panel becomes visible
- onHidden: Fired when panel is hidden
ExtensionSidebarPane Methods
- setObject(object, rootTitle?): Set JSON object display
- setExpression(expression, rootTitle?): Evaluate expression
- setPage(pagePath): Display HTML page
chrome.devtools.inspectedWindow
inspectedWindow.tabId
ID of the inspected tab.
inspectedWindow.eval(expression, callback)
Evaluates JavaScript in the context of the inspected page.
chrome.devtools.inspectedWindow.eval("document.title", (r, e) => { if(!e) console.log(r); });
inspectedWindow.reload(options, callback)
Reloads page. Options: ignoreCache, userAgent, injectedScript.
inspectedWindow.getResources(callback)
Returns list of resources on the page.
chrome.devtools.network
network.getHAR(callback)
Returns HAR log containing all network requests.
network.onRequestFinished
Event fired when a network request completes.
chrome.devtools.network.onRequestFinished.addListener(r => {
console.log(r.request.url, r.response.status);
r.getContent((c, enc) => { /* body */ });
});
network.onNavigated
Event fired when page navigates to a new URL.
chrome.devtools.network.onNavigated.addListener(url => console.log(url));
Communication Patterns
Extension to Inspected Page
chrome.devtools.inspectedWindow.eval("window.customFunction()", fn);
Extension to Service Worker
// devtools.js
chrome.runtime.sendMessage({ action: "data", payload: "hello" });
// background.js
chrome.runtime.onMessage.addListener(m => console.log(m.payload));
Code Examples
Custom Debug Panel
chrome.devtools.panels.create("Debug", null, "panel.html", p => p.onShown.addListener(w => { }));
Elements Sidebar Extension
chrome.devtools.panels.elements.createSidebarPane("CSS", s =>
chrome.devtools.panels.elements.onSelectionChanged.addListener(() => s.setExpression("$0.style.cssText"))
);
Network Request Logger
chrome.devtools.network.onRequestFinished.addListener(r => console.log(r.request.url, r.response.status));
Cross-References
- DevTools Extensions Guide
- DevTools Panels Pattern
- Chrome Extensions Documentation
Frequently Asked Questions
How do I create a DevTools extension?
Add “devtools_page” in manifest.json and create an HTML page that loads your JavaScript to interact with DevTools.
What can I do with DevTools API?
You can create custom panels, add sidebar panes, access network request data, and instrument page execution.
Part of the Chrome Extension Guide by theluckystrike. Built at zovo.one.