How to Programmatically Open the Devtools from a Google Chrome Extension

Is there any way to open devtool panel in chrome browser using user created extension

Are you using a Canary or Dev version of chrome browser?

from the documentation:

1. Make sure you're using either Canary (which you can use at the same time as other Chrome channels) or the Dev channel. Although the experimental APIs might work in other versions, we need your feedback on the latest incarnation of the APIs, which you can find in Canary and on the Dev channel.

You would also need to enable the experimental API in your browser

3. Enable the experimental API in your browser. You can do this in either of two ways:
   Go to chrome://flags, find "Experimental Extension APIs", click its "Enable" link, and restart Chrome. From now on, unless you return to that page and disable experimental APIs, you'll be able to run extensions and apps that use experimental APIs.
   Specify the --enable-experimental-extension-apis flag each time you launch the browser. On Windows, you can do this by modifying the properties of the shortcut that you use to launch Google Chrome. For example:
   path_to_chrome.exe --enable-experimental-extension-apis

https://developer.chrome.com/extensions/experimental

You might want to read this too.
Can I programmatically open the devtools from a Google Chrome extension?

Is there a way to open chrome devtools and ensure that console tab is selected

Yes, you can use command + option + j to always open the Console!
https://developer.chrome.com/docs/devtools/open/#console

Open Safari / Google Chrome developer tools programmatically from JavaScript

Simply: You can't.

The Dev Tools are not sandboxed (unlike any web page), thus granting sandboxed environments the power to open and control an unsandboxed environment is a major security design flaw.

I hope this answers your question :-)

From my devtools extension, can I programmatically access the sources panel?

You can use chrome.debugger to access the Chrome DevTools Protocol from your extension. However, the chrome.debugger page I linked to says that you can't use DevTools and chrome.debugger at the same time. So you might be able to read the list of files and construct links in your Extension and then have those links open up DevTools but you won't be able to keep them both open at the same time. Another approach might be to just surface all the relevant information / actions in your Extension. Next step from here would be to investigate the Chrome DevTools Protocol to see if it supports everything you need to do. It should because DevTools exclusively uses this protocol to communicate with the browser. So anything DevTools can do, you can do via the protocol.

---

Related Topics