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.
Related
I want to create a "Chrome app" to open Gmail in a separate windows Chrome instance on my Mac.
The method for doing this is well documented - https://support.google.com/chrome_webstore/answer/3060053?hl=en-GB
In Chrome, you go to the three dots for Settings > More Tools > Create Shortcut and then tick "Open as new window" when you name the shortcut.
However, when I click on the resulting Gmail icon, it opens in Gmail back in the main Chrome browser window, not a separate app window.
I checked mine and noticed the same behavior so I just went and recreated the shortcut for a new instance. Tried it and it works in its own window/app. Deleted the old one.
Try again?
For the life of me I can't find where to enable this setting: Override requests with workspace project in Chrome Canary v64.0.3
Where do you enable this feature?
I learned about this feature from here: https://umaar.com/dev-tips/162-network-overrides/
Currently with 65 Chrome Canary it's not experimental anymore.
But you still cannot "Save for overrides" XHR requests.
This restriction is only in UI. To get XHR request override:
Open "Sources tab" in Chrome Canary DevTools and "Overrides" sub-tab under it.
Check "Enable Local Overrides" and add a folder to store changes in the filesystem.
Open "Network" tab in Chrome Canary DevTools and select XHR request
Press "Open in new tab"
Go to new opened tab Chrome DevTools - "Network"
Select the first request in the list and "Save for Overrides" button appears.
You can follow the gif from question starting step 5:
It's behind an experiment (https://developers.google.com/web/tools/chrome-devtools/ui#experiments) then it'll be under experiments in the settings panel of devtools.
Please do be warned though, this is an experimental feature, there are bugs and it might not work as intended.
We are trying hard to get it fully released soon (on Canary) but it needs to be a 1st class feature before we will feel ready to release it.
I think they might have shipped the feature, so it's no longer behind an experiment.
Try the workflow that Umaar outlined, omitting the step about enabling the experiment.
Haven't tried it myself yet, so I could be wrong
The feature is no longer an experiment in Chrome Canary (current version at the time of this: 64.0.3261.0). You can start to use it now. It will take a little time to arrive in Chrome stable.
In the latest version of Chrome Canary (Version 65.0.3317.2) you still need to enable dev tool experiments. The option is still behind the experiment flag #kayce-basques . I also followed the tutorial of Umaar - also using GitHub for testing - but I don't get any visible website changes after pressing F5.
Has someone figured out how to get it to work?
(1) Select the Overrides Tab in the Sources Panel.
(2) Click the Setup Overrides ( + icon) to add an empty folder.
(3) Confirm that Enable Network Overrides are enabled.
(4) Select the js file to be persisted on the Network Tab and display the source code in the code editor.
(5) Add code “console.log (‘hello world’);” to the beginning of the source code.
(6) Right click on the source code, select command [Save for overrides] on the context menu.
(7) Reload the current page after saving the file.
(8) Open the Console Panel and check the result.
This feature is now enabled in chrome stable you can follow these step:
In chrome go to "Sources tab" then in devtools "Overrides" click "Enable Local Overrides" then create a folder to put the changes in the filesystem. Go to
"Network" then select XHR request then "Open in new tab" then go to new opened tab Chrome DevTools - "Network"
pick the first request in the list and normally you will have a "Save for Overrides" button appears.
I would like to configure my Chrome so that when i open a new tab in incognito mode (ctrl shift N) it open a new tab and automatically go to an URL, instead of the empty tab.
Is there a way or an add-on to do that?
Thx
There is an easy way to automatically change to incognito if you try and access certain URLs, which you could then bookmark so when you click them it opens incognite? You can use Ghost incognito for this, just make sure you enable the app for use in incognito mode. You then go to the url and press the ghost icon.
https://chrome.google.com/webstore/detail/ghost-incognito/gedeaafllmnkkgbinfnleblcglamgebg
I am using chrome version 36+
according to this page, I should be able to allow custom themes using the following instructions:
Installation Instructions
Add this theme
Goto chrome://flags and Enable Developer Tools experiments.
Open developer tools settings, select Experiments tab, and check 'Allow custom UI themes'.
Reload devtools.
I do not see such a tab in the dev tools settings. I see only 'general', 'workspace', and 'shortcuts'
These are some simple steps to follow, hope it will be helpful.
Open a new chrome tab, type chrome://flags
Find, "Enable Developer Tools experiments." using ctrl/cmd+f or simply searching for it by scrolling down the page.
Click the "enable" link
Click on "Relaunch Now" at the bottom of the page.
After restarting Chrome, open DevTools, DevTools settings, and select the experiments tab.
Now select the experiment you want (e.g. "Allow custom UI themes").
You need to reload devtools after: Alt-R will reload devtools itself, or you can just close and reopen it.
To get to the Dev Tools Experiments area you have to click on the gear icon in the inspector.
If still not working you should go to:
chrome://extensions/
And click the 'Enable' checkbox for the DevTools extension you wish to enable.
Had the same issue,
I found I was going to browser settings which is NOT where you should be going to ,
You need to go to developer setting .
i.e right click>inspect element> dev tools
You need to restart the browser after changing the flag at chrome://flags
I found it. There is a checkbox under experiments tab:
Allow custom UI themes
Restart chrome just not means to close the chrome and then open it. you should click the 'Relaunch Now' button of the flags tab. and then it's work for me.
loislo's answer is absolutely right (You need to restart the browser after changing the flag at chrome://flags). But notice that your chrome can work in the background. Go to the tray, look for the chrome icon and exit.
Navigate to chrome://flags/
Find and enable Developer Tools experiments Mac, Windows, Linux, Chrome OS
Relaunch Chrome, open develop tool, setting, you will see experiments tab.
My Chrome version: Version 61.0.3163.100
2022 update: There doesn't seem to be any option in chrome://flags but there is an option:
devtools > settings > experiments > Allow extensions to load custom stylesheets
I need to run a web-based app inside Chrome but it must appear as if the app is standalone. I dont want any tools or frames to be visible.
Yes I know I can press F11 but this isnt sufficient as I dont want the tools to appear when I move the mouse to the top of the screen.
Do I need to go to the extents of making a Chrome extension and utilizing a possible fullscreen feature?
From the linux man page:
--app=URL
Runs URL in "app mode": with no browser toolbars.
e.g. invoke it with google-chrome --app=http://example.com
Start Chrome with the --kiosk flag. Then, no borders etc. will be shown. Furthermore, pressing F11 will not exit this mode, so it's the most effective way of running a Kiosk-like app.
chromium --kiosk http://example.com/
Replace chromium with the path of your actual Chrome executable (e.g. chrome.exe).
In the new Chrome (v88) it might be required to add --user-data-dir parameter to remove the title bar, so the line would go like this:
chrome.exe --user-data-dir=c:\temp --kiosk http://google.com
If you open Chrome in app mode, like Trever suggests, then borders will still be visible.
If you want a windowed app with no menus on mac, the steps have changed since #PaulR responded.
The new steps are as follows:
navigate to
chrome://flags
Enable the following two options:
"The new bookmark app system"
"Allow hosted apps to be opened in windows"
Restart Chrome to enable the options.
Then navigate to the page you want to turn into an "app".
In the tools menu (three dots) click More Tools > Add to Applications
Finally, navigate to
chrome://apps
and right click on the icon for the newly added Application. Enable the "Open as window" option.
Go ahead and create the shortcut, then open Chrome Apps chrome://apps. The shortcut icon should be in there. Right click on the app icon and check "Open as window." After that, the shortcut will open as a window.
Credit: Janos_
You can create create shortcuts from Chrome itself....
https://support.google.com/chrome/answer/95710?hl=en-GB
^ this link no longer works.
The feature is called "Create application shortcuts". To enable it in newer versions of Chrome, go to:
chrome://flags/
... using the address bar. Then find "The new bookmark app system" and Disable it. Then click Relaunch Now at the bottom of the screen.
Now, in the "More tools" menu there will be the "Create application shortcuts" menu entry.
There may be another way to do this, but this is just clarifying the method that was supposed to be described in the link.
Like many others have said, --app=<url> should do it for Chrome Version: 83.0.4103.61. The --kiosk option opens a chrome tab, not a borderless "app" window. I'm on macOS Catalina and decided to brew cast install chromium and ran:
chromium --app=https://netflix.com
Unfortunately I could not stream Netflix from Chromium..