similar to react extension and other chrome extensions (react-redux). how do i add a new tab in chrome dev tool?
see the GraphQL custom tab added by graphql chrome extension?
Related
Is there an extension to open the chrome dev tools? I know there is a shortcut (clr+shift+c) but I would prefer to click on the extension icon to open the dev tools element inspector. I have searched a lot on the chrome web store and on stack but couldn't find any references to such an extension. Any help regarding this would be great.
Is it possible to open Chrome Developer Tools to inspect a Chrome App ?
All debuggable targets are listed under chrome://inspect/. See the 'Apps' tab.
I managed to do it by following instructions to debug postman chrome app:
Go to chrome://flags/
Search for Debugging for packed apps
Enable this flag
Restart chrome
Then go to your app, right-click anywhere inside of it, and click on the option menu inspect.
To open it by context menu, enable at chrome://flags/#debug-packed-apps
If the app blocks the context menu, find it at chrome://extensions (developer mode) or the Apps and Extensions Developer Tool.
I have a chrome extension that works in a new tab in Google Chrome Developer Tool. When I dock/undock my extension refreshes but other tabs does not.
How can I prevent refresh when I dock/undock devtool?
This was fixed by updates of Google Chrome.
When you click a target='_blank' link, it naturally opens a new tab in Google Chrome. For particular sites, I need to use the Chrome Developer Tools to examine the http requests for any new tabs that are opened.
Whenever you have Chrome Dev Tools open on your current page and then click a link that opens a new tab, Chrome Dev Tools are not opened on the new page by default. Opening Chrome Dev Tools at this point is too late because the tools do not capture the http requests for the page.
Also, in many cases, these new tabs go through a series of redirects before reaching the final page, so I cannot simply reload the page after opening Chrome Dev Tools.
The only workaround I can think of is, in the case that the site I'm working on is on a local development server, I can temporarily change the link from target='_blank' to target='_self', but this is unrealistic for a site with thousands of links or for a site that I have no control over the code.
Is it possible to set Chrome Dev Tools to automatically open with every new tab (opened either manually or via target='_blank'?
I'm not sure as of which Chrome version this changed, but if you click on the Settings wheel on dev tools:
You'll see a Global section with a checkmark for "Auto-Open DevTools for popups", which works for opening target="_blank" links with a devtools window:
It's possible to auto open devtools for all the new tabs instead of just target = _blank. When launching google chrome, pass the flag --auto-open-devtools-for-tabs. It enables launching of devtools for all the windows created automatically.
For linux
google-chrome --auto-open-devtools-for-tabs
For Mac
open -a "Google Chrome" --args --auto-open-devtools-for-tabs
You can only open DevTools window via UI action or keyboard shortcut. There is no way to do this automatically.
How can I view HTML web storage in Chrome and Firefox?
try the inspector in Chrome.
Right Click Page > Inspect Element > Resources -> Local Storage
For Firefox use Firebug add-on. Open Firebug. Click on Console. On the command line type in:
localStorage
For development you can also edit local storage in Firebug using dot notation. For example:
localStorage.myVar = "hello"
localStorage.clear()
localStorage.removeItem("myVar")
In Firefox 19+ you can inspect localStorage directly from the console without Firebug:
inspect(localStorage)
This will pull up a panel displaying the key/value pairs
Firebug localStorage documentation
Install Firebug add-on
In Firefox the data is saved to the webappstore.sqlite in the FF profile folder. You can view it with the SQLite Manager, an addon for FF.
In Chrome pull down More Tools->Developer Tools. In the panel that appears click the Application tab. You will see LocalStorage in the subsequent menu. You can delete, Edit etc....