Ctrl+Shift+C does not work in DevTools

DAVIDhaker

Its a one cause that i dont migrate to Vivaldi. I waiting for this ~2-3 years. Dear developers. Could you do it?

BoneTone

Guys, this exists already. Go to settings and set whatever keyboard shortcut you want for "Developer Tools Inspect Element", including Ctrl-Shift-C. I personally use Meh-I.

Inspect yo' settings! ;P

macav

@BoneTone this got me initially excited, but the problem is that when I press the shortcut again, it closes the developer tools. Instead, I'd expect to have the picker tool active again.

BoneTone

@macav

Vivaldiland Rules

#2: Double Tap - In those moments when you get an unclick not a regular click click, don't get all stingy with your shortcuts.

Actually, I cannot reproduce your behavior, what version OS & Vivaldi are you running? Although I don't get perfect behavior, rule #2 gets the job done.

Vivaldi just opened and a page loaded
Ctrl-Shift-C - dev tools opens and element inspector tool activated
Click some element - it gets highlighted in dev tools
Ctrl-Shift-C - dev tools window gets focus
Ctrl-Shift-C - element inspector tool activated

Never does Ctrl-Shift-C close the dev tools window, though focus should return to your browser unless you click some other window yourself, so you can just double tap like I did and get it should launch dev tools and activate the element inspector.

Can you post the exact steps you doing to get your result? If you need to, make sure to update your OS & browser, and if you're still having an issue, try testing in a new profile.

macav

@BoneTone Thanks for the reply! I have all the updates installed, a new installation of Vivaldi with simply imported bookmarks (via HTML file).
Vivaldi: 3.0.1874.38 (Stable channel) (64-bit)
Revision: ca1a7297a62038cd7ef1a841248d749a0346cc41
OS: macOS Version 10.15.4 (Build 19E287)

For me, the developer tools close as long as I use the shortcut with the focus in the page window. If I have the focus in the developer tools, then it's behaving properly.

I don't really get what you mean by this double tap.. Can you please elaborate on that?

I made a short video to demonstrate what I'm doing (I mapped the shortcut to Cmd+Shift+C):
https://www.youtube.com/watch?v=cpk3sLNfbjg&feature=youtu.be

BoneTone

@macav hmmm, I suppose the difference in behavior could be due to a Mac vs Windows/Linux difference. Actually, I'm not certain I tested this on Linux and I'm currently in Windows and can't reboot at the moment, so possibly just a Mac vs Win difference. But...

@macav said in Ctrl+Shift+C does not work in DevTools:

I don't really get what you mean by this double tap.. Can you please elaborate on that?

Press the keyboard shortcut twice in a row... hold down Cmd-Shift and then hit C and then hit C. Tap tap. Double tap. Since it works initially, and closes it for you when it's open, it's like a toggle. Tap tap and you've got what you want.

writefor

Just updated to 3.1.1929.34 stable. Ctrl+Shift+C works fine. That's all I need to be happy with Vivaldi. Thanks to developers.

DAVIDhaker

@DAVIDhaker Oh, dear guys. Excuse me. This possibility are exists, but not enabled by default. Just set shortcut to this action in "Settings" > "Developer Tools Element Inspector". O yeah. At last i'm did moved to Vivaldi. Better browser. Thanks.

penopenPen21

I had the same problem. But I found a solution. I have Radeon Software installed and it blocked keyboard shortcuts.

brizzz

This is still a problem. Agree with @macav . Tested on Mac Os and Linux Mint.
There is no an action in keyboard shortcuts called "Developer Tools Inspect Element", just "Toggle Developer Tools". And this action is not what needed. It toggles DevTool window as is states. Yes it activates the inspection tool, BUT when pressed again - it just hides DevTools.

Expected behaviour: on Ctrl+Shift+C (Linux)/Cmd+Shift+C (Mac Os) 1) open devtools (not toggle it); 2) activate tool "Select an element on the page to inspect it". On subsequent calling this hotkey - toggle "Select an element on the page to inspect it" tool. This is how it works by default in Chrome.

When your hover on the left icon you'l see the tooltip with hotkey, which is just Not work.

cdrozak

The same also applies to Ctrl+Shift+M for toggling device toolbar

pafflick

@cdrozak It works, but the DevTools need to be focused. Sometimes the focus goes back to the page, and thus the shortcut stops working - but once you focus the DevTools again, it continues to work.

FourPeaksIT

For anyone having issues with this inspect element focus / unfocus bs, I found a work around. For some extra insight, chrome is essentially having the same issue. I did a fresh install of chrome and tried the shortcut and it doesnt work. Im gonna take a wild guess and say its a chrome based issue, not just vivaldi. Anyways,...

The fix that worked for me was:

Open DevTools Panel
Click settings gear cog
Click Experiments in the list
In the experiments section, choose Enable keyboard shortcut editor
Exit the settings, then click the Reload Devtools Button or close and re-open devtools
Open the settings menu back up and click shortcuts this time > the shortcuts, when hovered, should now have an edit pencil icon next to them.
Find the ELEMENTS section and change the 'Select an element...' to somethings else ( I chose ctrl + shift + x and it works great)

tomica

@FourPeaksIT I'm confused. How exactly would changing the actual shortcut keys help? What ever the shortcut is, the problem is that the shortcut will only work when the dev tools are in focus, but the dev tools lose focus every time I use this shortcut to select an element in the page.

Aditionally, following your steps, I determined that "Select an element in the page to inspect it" does not exist in the list of shortcuts, at least on Ubuntu Linux.

For me, this issue continues to exist. My setup:

Vivaldi 5.3.2679.55 (Stable channel) stable (64-bit)
Revision 8eade5e5617c74da06a81aef286d8930cb8698b3
OS Linux
JavaScript V8 10.2.154.8
User Agent Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.125 Safari/537.36
Command Line /usr/bin/vivaldi-stable --enable-crashpad --flag-switches-begin --flag-switches-end --save-page-as-mhtml

Maple38

@tomica on windows 11 too

tomica

Strangely enough, if you detach the DevTools into a stand-alone window (open Devtools > Click 3-dot menu > Dock side: Undock into separate window), the ctrl+shift+c shortcut is working just fine, at least until you click on the page viewport without element selector being active. This obviously is not ideal, but it's somewhat less painful than the default behaviour. When ever the devtools lose focus, you can use keyboard combo 'alt+tab', 'ctrl+shift+c' to return to the needed state.

DoctorG

I tested with 5.3.2679.61 Stable.

Ctrl+Shift+C works for me if:
Developer Tools is docked, Developer Tools panel has focus by mouse, clicked on Elements tab and hit Ctrl+Shift+C. Same with undocked Dev Tools.

TuTAH

@FourPeaksIT Somewhy I have no this single option
!(https://cloud.mail.ru/public/XXCP/72bthqcmW)

yukirock

I think it's called "Toggle Developer Tools". If you search this in settings and assign Ctrl+Shift+C it will just work as expected. This command opens devtools and automatically activates inspect mode. Whether for "Developer Tools" or "Toggle Developer Tools" if you hit the shortcuts repeatedly it just toggles the devtool so apparently the name is not indicating what it does.

brizzz

@DoctorG nope, Ctrl+Shift+С/Cmd+Shift+C still does not works as expected (like it works in Chrome)

macOS, Vivaldi 5.6.2867.36

How it works in Chrome:

No dev tools opened.
Cmd+Shift+C leads to: DevTools opens, it is get focus, activates "Elements" tab, activates tool "Select an element on the page to inspect it "
Ctrl+Shift+C (subsequent press) leads to: DevTools is still opened, it is still focused, only the tool "Select an element on the page to inspect it " is toggled to inactive.

How it works in Vivaldi:

No DevTools opened.
Cmd+Shift+C leads to nothing

How it works in Vivaldi if we set shortcut

No DevTools opened.
Cmd+Shift+C leads to: DevTools opens, it is not get focus, activates "Elements" tab, activates tool "Select an element on the page to inspect it ". That is what we expect, except DevTools in not get focus
Cmd+Shift+C (subsequent press) leads to: DevTools is toggled off - and that is not expected behaviour

Updated (some additional notes):

Now shortcut that proposes as a solution in forum is called "Toggle Developer Tools". And that is what it literally does. But we need to toggle "Select an element on the page to inspect it". At the same time, opening DevTools if it is not yet, and setting focus on DevTools.

Here is the original description of shortcuts for Chrome DevTools https://developer.chrome.com/docs/devtools/shortcuts/
And the shortcut we are interested in is "Toggle Inspect Element Mode"