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.
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.
https://confluence.atlassian.com/display/CAPTURE/Taking+screenshots says
"Keyboard shortcut
Capture for JIRA allows you to configure a keyboard shortcut to take a screenshot at any time. This allows you to capture bugs that might only occur during mouse interaction.
The configuration can be set in the server settings overlay in the browser extension's sidebar."
I cannot figure this out.
It's a setting in the browser extension, not in the JIRA add-on.
In your JIRA, in the "Capture" menu at the top, there's a link to install the browser extension. Make sure you've installed the extension first.
Then, when you open the extension, you can click the settings icon at the bottom. That will display the settings panel where you can configure your shortcut keys:
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.
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...
I'm playing with new-style packaged apps in Chrome 24, and I don't see any way to bring up Developer Tools to do debugging.
What's the recommended strategy for debugging?
go to here
chrome://inspect/
find the page you want
Starting on Chrome 24, you can right click and inspect your page or inspect the background page.
If your app doesn't have any open window to right click, you can go to chrome://extensions and use the Inspect Views links, from where you can open Developer Tools for any of your app pages, including those in the background.
Before Chrome 24, the only difference is that the background page could only be inspected using the chrome://extensions link, there was no "Inspect background page" in the right click menu.
UPDATE: If you want to debug an app installed from the Chrome Web Store, you need to enable the flag "Enable debugging for packed apps" in the chrome:flags page:
After that, right click will work on any app.
I've been able to right click the content area and inspect an element to get the dev tools to come up.