As you probably know, Chrome Dev Tools has the same icon as browser itself. In order, to increase productivity I would like to change it's icon, so it will be easier to find it in the taskbar.
Thanks in advance.
Give this a try:
Open up Chrome and then open up developer tools in another window so that you have two Chrome icons on your taskbar. Right click the devtools one and Pin to taskbar.
Right click on the newly pinned icon, right click on Google Chrome (2) and properties.
Under Shortcut->Change Icon, pick something else. Then 'OK' out.
You'll need to restart explorer.exe, so open Windows Task manager, kill explorer.exe and restart it.
You'll now see two different icons.
Do this: Start regular Chrome. Then CTRL+Shift+i and it should open devtools as the new icon.
Unfortunately, clicking the devtools icon initially will not open devtools on startup. Supposedly you can change the properties to start using chrome.exe --args --auto-open-devtools-for-tabs but I was unable to make that work.
YMMV with your operating system but this works with Windows 7. Hope that helps.
Note: If you're using Windows 10, you won't see explorer in the task manager by default, you have to click "More details" on the bottom and switch to the "Details" tab.
Alternatively, open PowerShell and type:
Get-Process explorer -ErrorAction SilentlyContinue | Stop-Process
This will kill explorer, and windows will automatically restart it
This answer may be a nice work around for non-Windows users who are debugging from Visual Studio Code. It uses Chrome's Canary build for debugging. It has a different icon so telling it apart from regular Chrome should be easy.
This answer talks about setting the executable to Canary which is easily distinguishable from regular Chrome. You will need to download the Canary version of Chrome first.
settings.json:
"runtimeExecutable": "canary"
How to configure Visual Studio Code debugger to use Chrome Canary?
Related
I'm using Version 80.0.3987.116 (Official Build) (64-bit) on Microsoft Windows [Version 10.0.17134.1304]. The Chrome Developer Tools simply do not appear for me no matter which way I try to access them:
ctrl+shift+i
f12
ctrl+shift+j to open the last used panel
ctrl+shift+c to open the elements panel
right click on a web page and select inspect from the popup
menu dots menu -> more tools ->
developer tools
I've restarted my computer. I've gone into settings -> advanced settings and restored all settings to their original defaults, then restarted chrome. This disables all extensions, so even with all extensions disabled it still didn't display. I've cleared the cache.
It was all working last Friday, but not when I tried Monday.
Has anyone seen this or have any other troubleshooting ideas? The only other thing I can think of is uninstall with something like Revo Uninstaller to scrape the registry and filesystem, then in my profile zip up then delete %userprofile%\AppData\Local\Google and %userprofile%\AppData\Roaming\Google. That seems extreme if there's an easier way.
Anyone seen anything similar?
Thanks!
I feel stupid figuring this out so quickly after posting the question. But if anyone else finds this, here's what worked for me.
ctrl+t to open a new tab
enter chrome://flags/ in the address bar
click reset all to default
let chrome restart
I'm not sure which flag was set that caused this. When I searched for devtools, there were three available settings, and they were all set to either disabled or default. And that's what they were after I did a reset all too. So whatever broke it was some other setting.
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..
I have HTML5 application which opens in a new window by clicking a link. I'm a bit tired of pressing Shift + I each time I want to logging network communication to launch Developer tools because I need it always. I was not able to find an option to keep Developer Tools always enabled on startup.
Is there any way to open Developer tools automatically when new window is opened in Chrome?
On opening the developer tools, with the developer tools window in focus, press F1. This will open a settings page. Check the "Auto-open DevTools for popups".
This worked for me.
There is a command line switch for this: --auto-open-devtools-for-tabs
So, on Windows, for the properties on Google Chrome shortcut, use something like this:
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --auto-open-devtools-for-tabs
Here is a useful link:
chromium-command-line-switches.
As per the DevTools docs, here's the commands for each platform from the command line:
MacOS:
open -a "Google Chrome" --args --auto-open-devtools-for-tabs
Windows:
start chrome --auto-open-devtools-for-tabs
Linux:
google-chrome --auto-open-devtools-for-tabs
UPDATE 2:
See this answer . - 2019-11-05
You can also now have it auto-open Developer Tools in Pop-ups if they were open where you opened them from. For example, if you do not have Dev Tools open and you get a popup, it won't open with Dev Tools. But if you Have Dev Tools Open and then you click something, the popup will have Dev-Tools Automatically opened.
UPDATE:
Time has changed, you can now use --auto-open-devtools-for-tabs as in this answer – Wouter Huysentruit May 18 at 11:08
OP:
I played around with the startup string for Chrome on execute, but couldn't get it to persist to new tabs.
I also thought about a defined PATH method that you could invoke from prompt. This is possible with the SendKeys command, but again, only on a new instance. And DevTools doesn't persist to new tabs.
Browsing the Google Product Forums, there doesn't seem to be a built-in way to do this in Chrome. You'll have to use a keystroke solution or F12 as mentioned above.
I recommended it as a feature. I know I'm not the first either.
On a Mac: Quit Chrome, then run the following command in a terminal window:
open -a "Google Chrome" --args --auto-open-devtools-for-tabs
Under the Chrome DevTools settings you enable:
Under Network -> Preserve Log
Under DevTools -> Auto-open DevTools for popups
With the Developer Tools window visible, click the menu icon (the three vertical dots in the top right corner) and click Settings.
Under Dev Tools, check the Auto-open DevTools for popups option
Answer for 2021:
Open the Developer Tool (CTRL+SHIFT+I on Windows)
Click the "Gear" icon. THe new Settings window will appear.
"Auto-open DevTools for popups" is now under "Preferences" section.
If you use Visual Studio Code (vscode), using the very popular vscode chrome debug extension (https://github.com/Microsoft/vscode-chrome-debug) you can setup a launch configuration file launch.json and specify to open the developer tool during a debug session.
This the launch.json I use for my React projects :
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"runtimeArgs": ["--auto-open-devtools-for-tabs"],
"webRoot": "${workspaceRoot}/src"
}
]
}
The important line is "runtimeArgs": ["--auto-open-devtools-for-tabs"],
From vscode you can now type F5, Chrome opens your app and the console tab as well.
F12 is easier than Ctrl+Shift+I
Here's all the DevTools open shortcuts:
OS
Elements
Console
Your last panel
Windows or Linux
Ctrl + Shift + C
Ctrl + Shift + J
F12Ctrl + Shift + I
Mac
Cmd + Option + C
Cmd + Option + J
Fn + F12Cmd + Option + I
Anyone looking to do this inside Visual Studio, this Code Project article will help. Just add "--auto-open-devtools-for-tabs" in the arguments box. Works on 2017.
Use --auto-open-devtools-for-tabs flag while running chrome from command line
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --auto-open-devtools-for-tabs
https://developer.chrome.com/docs/devtools/open/#auto
I came here looking for a similar solution. I really wanted to see the chrome output for the page load from a new tab (a form submission in my case).
The solution I actually used was to modify the form target attribute so that the form submission would occur in the current tab. Then I was able to capture the network request. Problem Solved!
Yep,there is a way you could do it
Right click->Inspect->sources(tab)
Towards Your right there will be a "pause script execution button"
I hope it helps!Peace
P.S:This is for the first time.From the second time onwards the dev tool loads automatically
For Windows:
Right-click your Google Chrome shortcut
Properties
Change Target to: "C:\Program Files\Google\Chrome\Application\chrome.exe" --auto-open-devtools-for-tabs
Click ok
You will need to close all current chrome instances & end chrome processes in Task Manager. Or restart PC.
You can open dock view settings and adjust the window as you want.
Screenshot attached.
You can open Dev Tools (F12 in Chrome) in new window by clicking three, vertical dots on the right bottom corner, and choose Open as Separate Window.
Is there a way for me to get Google Chrome to launch in Aptana?
I tried adding it under Web Browsers but when launching the webpage, from Aptana, it launches it in Firefox instead.
Selecting Default system browser doesn't work either.
How I would do it is where the green > button is, at the top (next to debug), go into run configuration and add a new entry for google chrome.
The path for chromes exe is at (Win7)
C:\Users\USERNAME\AppData\Local\Google\Chrome\Application\chrome.exe
WinXP
C:\Documents and Settings\<username>\Local Settings\Application\chrome.exe
Then you can run that straight from the drop down menu. This is the way I do it, however it may not be applicable for your situation.
I added Chrome to the Run Configurations ...
I deleted Firefox from the General > Web Browser settings.
I restarted Aptana Studio 3 and now, when I click on the green arrow run button, Chrome is the browser.
Say hello to F12 and debugging HTML and JavaScript with ease.
I have Windows 7 and followed the advice listed above for the 'green button'. For Chrome, my file path was "C:\Users\user name\AppData\Local\Google\Chrome\Application\chrome.exe". It was very simple and worked beautifully. Thank you.
rickyduck's answer applies but the path to Chrome may have changed in newer versions to :
C:\Program Files (x86)\Google\Chrome\Application\chrome.exe
That's the path I had to use.
rickyduck's answer is exactly what I have been looking for! Thanks Ricky!
To get the exact path to chrome on your machine, just go to your start menu, type in chrome and when it comes up, right click on it and select the Shortcut tab to copy the target path and paste right into Aptana.
Another way to directly launch chrome upon pressing green button is to delete other browsers from run -> run configuration -> web browser . . . and leave chrome alone . . if you want other browsers you can add later on . .
You can add as many browsers as you want. Click on Run -> Run Configurations then right-click on Web Browser in the left nav pane, then select New. Use the Browse button to get the application path then at the top of the dialog, type in a descriptive name. Click Apply and Close. You now have more than one browser to choose from for testing.
I added Chrome to run configurations, and deleted Firefox and IE, also changed likewise under General Web Browsers. The Chrome tab doesn't show up on Green dropdown. If I exit program and restart, the Firefox and IE are back again, but still now Chrome.
Click the tiny black arrow thats looks at the bottom and is located at the top, next to the green Run button:
Choose Run Configurations and then you should see a Browser executable field, under the Web Browser tab:
where you want to click Browse, navigate to the Google Chrome executable (at my Max OS X at El capitan: Applications -> Google Chrome) and double click on it.
Then, click Apply (in the Run Configurations window). Then Run.
That's it! :)
Tested with Aptana Studio 3, installed like this on Mac.