I do an Extension for Google Chrome and have some problems with it. I need to add a contextMenu item to devtool > network
How can I do it? I just found instructions only how to add an easy contextMenu, not in devtool (https://developer.chrome.com/extensions/contextMenus#method-create).
This is not possible, Chrome does not provide APIs to extend the context menu of Network tab of DevTools, or anything else in the Network tab.
As an alternative, you can add your own tab to Dev Tools and use chrome.devtools.network to populate your own UI.
Related
So I have recently started working on building a Google chrome extension, and found the entire landscape fascinating to say the least. While I was checking to understand how some of these extensions work, I found that many of them have blocked 'inspect element'. I found only 'Adblock Plus' which allows it.
My question:
Are there any more complex interesting chrome extensions that allow inspection?
Any way to find such extensions or how to get around the ones that have blocked viewing?
As a beginner, I would appreciate any advice or tips in this area.
You can inspect and debug all extensions right in the browser.
You may need to use a different method of invoking devtools.
To inspect the popup you can enable developer mode switch in chrome://extensions and then right-click the extension's icon in the toolbar or click ... inside the puzzle piece menu that lists all extensions, then choose Inspect popup.
Similarly, to inspect something shown in the tab, you can open devtools via the standard hotkeys like (F12 or Ctrl-Shift-i in PC) when the cursor is focused on the toolbar even if the page actively intercepts these hotkeys and/or the context menu.
You can also open devtools from the browser menu "More tools".
There's also chrome://inspect.
Is is possible to add a new sidebar to the network panel in Chrome devtools?
I have checked the chrome devtools API documentation (https://developer.chrome.com/extensions/devtools_panels) but there only seems to be mention of the elements and sources panels.
Just wondering if maybe someone knows if it is possible to gain access to the other panels?
My goal is to add a new tab after the timing tab that can show some relevant information about this specific request and its contents.
I am writing a Dev tools extension to add a subpanel to Elements panel.
Extension is called 'Redder' ( see the image)
Is there a way to reach this extension with keyboard.
Right now chrome has a short cut keys to launch Dev tools and switch between main panels but not the sub panels (https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/shortcuts?hl=en#accessing-devtools)
Also, is there a way to assign shortcut key to go to my extension panel directly after launching Devtools?
Good question, but I don't think it's possible.
Even if you made a shortcut listener, there is no API to programmatically switch to your panel.
it is possible to add/open Google Chrome native panel or window (something like firebug or like chrome dev tool) from extension level or maybe it is possible to add new tab to dev tool ?
it is possible to add/open Google Chrome native panel or window (something like firebug or like chrome dev tool) from extension level
No.
or maybe it is possible to add new tab to dev tool ?
Yes. Declare a devtools_page in your extension's manifest, and use the chrome.devtools.panels API to "add a new tab".
Is there a way to programmatically toggle the console from inside a custom devtools panel?
What's happening is that on the stock panels, you can press Esc to toggle the bottom console panel; but it seems that inside a custom devtools panel, this doesn't work.
The fallback would be to catch the key press and toggle it programmatically but I can't figure out how to do the second part.
I dug through some of the "official" code for devtools and found the _toggleConsoleButtonClicked method attached to the WebInspector object but I can't find how to access that object from my context.
Any pointers would be appreciated!
For context, I'm working with the Backbone devtools extension.
PS: there are more keyboard shortcuts that stop working. Things like Ctrl/Cmd+[number] to switch to a different panel, Ctrl/Cmd+R to reload the page. That might mean that it's more of a feature request for Chrome than something I'm missing. In the meantime, if you have ideas for some of these, I'll take them!
You have to enable Developer Mode in chrome://extensions/. Here is a nice tutorial to debug Chrome extensions http://developer.chrome.com/extensions/tut_debugging.html
I found this issue relative to your question:
https://bugs.chromium.org/p/chromium/issues/detail?id=445240
I don't know where is it now...