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.
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.
I'm trying to build a chrome devTools extension (an extension to the dev tools). The main intent is to create a new sidebarpanel under the "Elements" panel, where I can manipulate data from the Elements panels.
The goal is to observe the CSS changes which the user makes in the "styles" sidebarpanel, and reflect the same in the respective file on disk (I know there is a way to achieve this using source-maps concept. But I'm trying this way though).
I'm new to writing chrome extensions and trying to understand how I can achieve this. I have gone through chrome devtools extension docs, tutplus and many other sites where there are good explainations about writing chrome devtools extensions. But I'm still trying to figure out how I can monitor/observe the styles sidebarpanel in another new panel, and get the modified style info and respective file details. So that I can persist the same to respective physical file.
Thanks!
it seems you can not do it.
you can get ElementsPanel which represents the Elements panel with chrome.devtools.panels.elements, but it only have one event: onSelectionChanged, nothing with the styles sidebar pane.
https://developer.chrome.com/extensions/devtools_panels#type-ElementsPanel
I have recently created a extension for devtools, which adds a new ExtensionPanel on devtools. Since this panel is useful only on certain pages, I wanted to show it conditionally depending on contents of current page. I can create a panel dynamically,depending on context of the page, but I was unable to find any way to close it (I've tried window.close() and panel itself doesn't have any methods like this).
So my question: Is there any way to close ExtensionPanel programmatically?
This is not supported by DevTools at the moment -- if you add a panel or sidebar, it's for the life of DevTools front-end. All stock DevTools panels are displayed unconditionally and the rationale for the lack of API methods to remove panels is to avoid confusion created by panels coming and going. If a panel is not applicable to the page being inspected at the moment, you can perhaps display a banner explaining why it's not applicable.
I write a DOM tree protecter Chrome extension to examine if the DOM tree changes. I have the js files in background_page, how can i get those console.logs() in other test html files? What I can only find now is the debug information of chrome://extensions/ when i click on generated_background_page.html. So how can I get information of other webpages? Thanks for replying.
One thing I have found very useful when debugging chrome extensions is to use the "inspect element" feature of the chrome developer tools. If you have a page or an element (such as on a popup from your extension) that you want to debug:
Open up Developer Tools
Wait for your popup to appear (if its not already up)
Switch to the Elements view on Developer Tools
Click the magnifying glass at the bottom so you can select an element
Click on an element in the page you want to debug (e.g. the popup page)
Now your Sources view and other views line up to match the element you've clicked on. The console will now let you look at variables in that context.
If you are not able to get the extension to work, there could be a whole host of reasons.
Are all your scripts loaded form the extension's directory or are you serving
them from a site? Chrome will not load scripts from an external site
unless over https AND after the site that is serving the script has
been whitelisted. See the Chrome Content Security
Policy
for more info.
To inspect the DOM, you need to inject a content script into the page that is being loaded. Are you sure you are doing this correctly? The manifest.json must be done right or else your content script will not get loaded.
For your content script and extension to communicate, you must post and receive messages. More information is available here.
Perhaps the best suggestion I have is that you follow the Chrome extension "tutorial" carefully until you have something working and then amend it to suit your needs.
In the Google Chrome developer window, there is a Network tab that shows you all the resources that a web page loads over time. Is there a way to access this data in a Google Chrome extension?
CLARIFICATION: I want to make a Chrome extension that needs to read this data and do something based on what it reads. So I should have asked, "is there a Chrome Extension API that allows this?"
There is experimental API for accessing network resources. Being experimental means that to use it users need to enable experimental API flag in their settings, plus you won't be able to submit such extension to the gallery.
Right click on the web page, select "Inspect Element", select the network tab then refresh