I updated chrome and when i open up devtools i see this.
How can i get rid of the rulers (the dark part in the upper and right side)? It takes a lot of space and i have a little 13.3" screen.
F12; In the top left next to the spyglass icon is a blue device icon, click it to toggle device mode.
Or you can use the keyboard shortcut to toggle Device Mode:
Windows: Ctrl + Shift + M
Mac: Cmd + Shift + M
Related
I'm using the Right Click Opens Link New Tab Correct Order chrome extension, it allows me to right-click on links to directly open them in a new tab.
To get the context menu, I have to right-click while holding the Shift key, but I want to use Alt instead, i.e. Alt + Right Click to open the context menu.
I have tried the following hotkeys, they all failed:
!RButton::+RButton
!RButton::Send +{RButton}
!RButton::Send +{Click Right}
The only hotkey that works is this:
Alt::Shift
But it will break shortcuts like Alt+Tab etc. Is there a way to achieve this without unintended side effects?
I'm trying to write an AHK bot that fills in input boxes in a Webapp so I need to be able to open the Developer Tools > Console with a simple shortcut.
The shortcut that says it should open Console doesn't do anything(CTRL + Shift + J). However if I use the Right Shift + Right Control + J it does open the Elements tab, but that's not what I meant to open, the Console tab inside Chrome Dev Tools.
https://developers.google.com/web/tools/chrome-devtools/shortcuts
Any tips?
My keyboard layout is Icelandic. Need the bot to be able to launch in that layout and any other layout for that matter.
Thanks.
Solved by pressing F12 then the ESC (escape) key, that brings up the Console.
Not sure why the Chrome developer blog doesn't list the right shortcut though.
Even for me Command+Option+J is not working.
F12 is equivalent to Command+Option+I Open whatever panel you used last
No, Shift+CTRL+J takes an instant GIF of me struggling to open the javascript console.
Is there a menu option or keyboard shortcut to collapse all expanded folders in the sidebar? It gets messy over there and seems like there should be a better way than closing them one by one.
On OSX: option + left click at the root node.
On windows/linux: control + alt + left click
For Sublime Text 3 on Linux Mint 17.2 w/ Cinnamon I had to disable the following setting:
System Settings->Windows->Behavior->Moving and Resizing Windows->Special key to move and resize windows
After that Alt+left click worked!
Keyboard only
To collapse all expanded folders in the sidebar on macOS:
ctrl + 0: Focus the sidebar
home or cmd + up: Select first root folder
ctrl + left: Collapse all sub-folders (confusingly, not alt as per the equivalent mouse action).
(optional) right: Expand just the top level folder.
Thanks to the existing responses that provided this info.
I've not tested on other platforms, please update the answer if you can.
In Sublime Text 4, pressing "option/alt" on your keyboard and clicking a folder in Sublime's sidebar with your mouse, will collapse all sub-folders within the folder you clicked. I'm using a Mac. I'm not sure what happens on other operating systems.
using purely keyboard, on a mac, to unfold
CMD + K + 0
to fold, depending on the level of indentation
CMD + K + {level of indentation number} (eg. CMD + K + 2)
Refer here for more details functions of sublime text. Found this really helpful
How could I show Chrome DevTools in a tab?
I've looked through the docs and made a search on Chrome Store, but it looks like there's nothing like this. It could be that DevTools are shown in their own window to counter some security issues, of which I'm not aware yet.
This isn't possible. The only options are:
Dock them horizontally below
Dock them vertically on the right
Dock them in a separate window.
More information can be found on their documentation at https://developers.google.com/chrome-developer-tools/docs/authoring-development-workflow#dock-to-right
Press Ctrl + Shift + C , then click on the small icon on bottom left of devTool which is used them to dock dev tool to a separate tab.
The tools are opened on the bottom of the chrome window per default. This is a rather bad choice for a wide screen display since there is plenty of empty space to the right but not much vertical space to spare. Unfortunately, I have found no way to reposition the tools. I would like to have them on the side, similar to firebug.
The only option similar to what I want is to detach the dev tools and place chrome and the tools window side-by-side. This is not very convenient for quickly alt-tabbing from the IDE to the browser and back though, so an "integrated" solution would be nice.
Chrome 46 or newer
Click the vertical ellipsis button ( ⋮ ) then choose the desired docking option.
Chrome 45 or older
Long-hold the dock icon in the top right. It pops up an option to change the docking
To change the split between the HTML and CSS panels, go in DevTools to Settings (F1) > General > Appearance > Panel Layout.
Place your pointer on the dock button and long click it (some seconds) or right & left mouse click depending on the browser version.
Keyboard shortcut to toggle the docking position (side/bottom)
CTRL+SHIFT+D
And there are many shortcuts you can see them by going to
Settings » Shortcuts, as displayed here:
Alternatively, use CTRL + ? to go to the settings, from there one can reach the "Shortcuts" sub-item on the left or use the Official reference.
Looks like this is on the bottom left now as an icon with overlapping windows and the "Undock into separate window." tooltip.
After I have placed my dock to the right (see older answers), I still found the panels split vertically.
To split the panels horizontally - and even got more from your screen width - go to Settings (bottom right corner), and remove the check on 'Split panels vertically when docked to right'.
Now, you have all panels from left to right :p
As of october 2014, Version 39.0.2171.27 beta (64-bit)
I needed to go in the Chrome Web Developper pan into "Settings" and uncheck Split panels vertically when docked to right
If you use Windows, there some shortcuts, while devtools are opened:
Pressing Ctrl+Shift+D will dock all devtools to left, right, bottom in turn.
Press Ctrl+Shift+F if your JS console disappeared, and you want it docked back to bottom within dev tools.
The Version 56.0.2924.87 which I am in now, Undocks the DevTools automatically if you are NOT in a desktop. Otherwise Open a NEW new Chrome tab and Inspect to Dock the DevTools back into the window.
In addition, if you want to see Sources and Console on one window, go to:
"Customize and control DevTools -> "Show console drawer"
You can also see it here at the right corner: