I would like to debug my javascript application using Google Chrome 3's developer tools. Everything fine and ok, until I actually want to start debugging. I can set breakpoints etc., but I don't want to debug using a mouse but using keyboard.
In Firefox + Firebug I can use F10, F11 and F8 for stepping over, into and run debugged script.
Are there any keyboard shortcuts in Google Chrome's Javascript console window?
System configuration (if relevant):
Windows Server 2008 R2 (would probably work the same in Windows 7)
Google Chrome 3.0.195.21
Edit
I investigated this issue even further and it turns out to be some sort of a bug, because when I restart Chrome, F8, F10 and F11 work as expected (same as Firebug).
F8 - Run
F10 - Step over
F11 - Step into
Works for me
To see the full list of shortcuts for the currently installed version:
in chrome open the Developer Tools Ctrl+Shift+I and then open shortcut help ?.
Edit: To get list of shortcuts, press Shift + ? when you are in other than 'console' tab, like 'Elements' or 'Resources'
In addition to Chris Tek's answer:
Shift + F11 - Step Out Of
Here is the full list of shortcuts for the latest version of Chrome Developer Tools:
http://code.google.com/chrome/devtools/docs/shortcuts.html
Toggle Breakpoint: Ctrl+B, pretty essential!
https://developer.chrome.com/devtools/docs/shortcuts
A much better reference of Chrome DevTools shortcuts can be found here (https://shortcutref.com/chrome-dev-tools).
This page only shows the relevant shortcuts (level, OS, category) and has short and precise descriptions.
Related
Was reading using the chrome dev tools new code coverage feature and was having trouble trying to enable this feature.
I know that Canary enables this without the need to unflag, but I'm unsure where to locate this feature from within Chrome Devtools.
With the developer tools window open, you can open the command menu using Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows, Linux), start typing Coverage and then select Show Coverage:
Alternatively, you can also select the three dots on the far right of the developer tools window, select More Tools and then select Coverage:
It wasn't mentioned in the above post, but if you click the three dots in Chrome dev tools, the option for code coverage is shown in the menu.
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?
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 frequently use the overrides tab in Chrome Developer tools to emulate other device such IPhone and IPad, but after upgrading to last version (32.0.1700.76 m) everything in the overrides tab is gone and replaced by a checkbox saying "Show 'Emulation' view in console drawer".
Checking this checkbox does not enable a 'Emulation' view in the Console drawer. The "Show Console" button seems to be disabled.
See here for more information.
Before starting open the dev tools console (on a Mac cmd-option-i)
Open the Settings panel within the dev tools console (click gear icon on right side)
Check "Show 'Emulation' view in console drawer (looks like you have already done this step) and close screen
Switch to the sources tab of the dev tools console
Press Esc to bring up a screen that slides in from the bottom
Select the Emulation tab on that second screen
There is also a note in the link above stating:
Note: Emulation tools within DevTools were previously contained within
an Overrides pane inside the Settings panel. The Emulation panel is
the new Overrides pane.
After installing Chrome (or the bleeding edge version Chrome Canary) you should be able to do proper mobile emulation within Chrome's Developer Tools. I usually activate them by Right Clicking > Inspect Element
For visual learners like myself, I just included a full screenshot.
I'm running Google Chrome version 58.0.3029.110, where the Emulation is no longer available, but all of the features are still available:
Device & Screen
Press Ctl + shift + m or click on Toggle device toolbar, you'll find these in the upper middle of your browser tab. (You'll find more options in the More option section.)
User Agent & Sensors
User Agent is now renamed as Network Conditions and can be found in the Customise and control DevTools > More tools > Network conditions. Sensors can also be found in the same location (ie. Customise and control DevTools > More tools > Sensors).
"Show Emulation view in console drawer" message confusing.
Generally our chrome dev tool bar tab selected as a console tab or we try to find out in console tab.
Problem is , Console drawer will not opened when your console tab selected.
I seem to have solved it. When I upgraded to Chrome Canary (Version 34.0.1789.0 canary) the problem was solved.
http://www.google.co.uk/intl/en/chrome/browser/canary.html
I run into this problem, and it took me a while to figure it out, despite the answers here. I am on Version 37.0.2062.103 m. First, in this version, there is no Override pane, neither "Show 'Emulation' view in console drawer either. It is turned on by default (I guess), but a little bit hidden. The key is to first press ESC key in dev mode (now I'm not sure if it's on by default). You should see a pane with 4 "tabs" including "Emulation" at the bottom. I quoted tabs because it appeared more like a status bar to me and I keep clicking it and nothing happens, until I accidentally resized the pane.
Sweet... This behaviour (running device emulation and debug mode) works in Chromium on Linux Ubuntu by hitting F12 and then the drawer icon. :)
More info:
Some more info, including screenshots
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.