I've built a chrome devtools extension, and I'm now porting it to firefox. Even if the logic works perfectly, I've got a problem with styling. In Google Chrome I could just press CTRL+SHIFT+J with a devtools window focused to open a new devtools window that let me inspect my extension and the other devtools panels. Is there a similar feature for firefox? How should I debug the styling and DOM of my devtools extension?
Debugging extension's own pages and code can be done via about:debugging
More info: Debugging
Related
Whenever i click on flutter devtools it opens a browser window.
What should i do to use devtools? It asks for some kind of URL.
enter image description here
I'm developing a VS Code extension that uses a webview. Previously I could inspect and debug my webview using the Developer: Open webview developer tools command, which would open a new window with the Webview developer tools.
In VS Code 1.56 however, this command no longer opens a new window. What's going on and how can I debug my webview?
VS Code 1.56 updates the majority of webviews to use normal <iframe> elements instead of Electron's <webview> tag. This lets you use VS Code's standard, top-level developer tools ( which can be opened with the Developer: Toggle developer tools command) to debug and inspect your webviews:
This has a few benefits over Developer: Open webview developer tools:
You can inspect multiple webviews from the same developer tools instance
The developer tools no longer close when the webview goes away
Errors and console messages from webviews are clearly printed in the standard developer console
Caveat
In VS Code 1.56, Webviews that enable search (with .enableFindWidget) are still implemented using a <webview> tag, so you must still use the Developer: Open webview developer tools command to debug and inspect them.
We plan on migrating all webviews to use iframes sometime after 1.56
Chrome Devtools has a "command menu" (Ctrl+Shift+p) which offers the ability to take a screenshot of the site / selected node. Is there a way to access this functionality through the devtools console?
Is there a way to access this functionality through the devtools console?
DevTools tech writer here. To answer your question narrowly, no, this is not possible.
Puppeteer is a good solution for automated screenshots.
https://github.com/GoogleChrome/puppeteer/blob/v1.3.0/docs/api.md#pagescreenshotoptions
In the WebView that is based on default browser of android my website isn't loading correctly, How can I load it using chrome at least in the case that chrome is installed?
Note that I don't want execute chrome browser I want to embed it inside of the application layout. Any ideas?
I think what you are asking is not possible. The default browser used within the webview is defined within the Android OS so your only option if you wanted to use Chrome is via an intent which would open it externally
I am trying to reuse a part of the Elements tab in DevTools in my own Chrome Extension.
Do I need to use the Chrome DevTools SDK http://code.google.com/p/chromedevtools/wiki/ChromeDevToolsSdk ?
I think the Chrome DevTools SDK will not help for you. You can read chrome.devtools.inspectedWindow api here. I wish it will help you.
Unfortunately the code for the elements panel tree view is not available in your chrome extension.
The SDK will not help you either.
You'll have to build the UI yourself.