Closed Bug 1532139 Opened 6 years ago Closed 5 years ago

Add back a keyboard shortcut to open the JavaScript Debugger

Categories

(DevTools :: Debugger, defect, P3)

Product:
DevTools
Component:
Debugger
Type:
defect

Tracking

(relnote-firefox -, firefox71 fixed)

Status:
RESOLVED FIXED
Milestone:
Firefox 71
Tracking Flags:
Tracking Status
relnote-firefox --- -
firefox71 --- fixed

People

(Reporter: aryx, Assigned: davidwalsh)

References

(Blocks 1 open bug, Regression)

Details

(Keywords: dev-doc-needed, good-first-bug, regression, Whiteboard: [debugger-mvp])

Attachments

(2 files)

image.png
23.13 KB, image/png
Details
Bug 1532139 - Add keyboard shortcut open debugger
47 bytes, text/x-phabricator-request
Details | Review

Bug 1502924 removed the keyboard shortcut to open the JavaScript debugger. It's the fourth-most used panel of the devtools on the release channel and currently the only panel in menu Tools > Web Developer's first tier commands without a shortcut.

Please add back a keyboard shortcut to open the debugger.

@Harald: any tips what shortcut we should use here?

Honza

Status: UNCONFIRMED → NEW
Type: enhancement → defect
Ever confirmed: true
Flags: needinfo?(hkirschner)
Priority: -- → P3
Regressed by: 1502924

Some options:

  1. Scratchpad's shortcut (Shift F4)
  2. Picking a new shortcut, Cmd - Opt - {Some Letter}
  3. Alternatives?

Victoria, would UX help best with this kind of question.

Flags: needinfo?(hkirschner) → needinfo?(victoria)

Ah, unfortunate that Cmd-Opt-D, which would be most consistent, toggles the MacOS dock. And Cmd-Shift-D changes docking position.

Cmd-Opt-B could make sense, though a bit tough to type.

Am I understanding correctly that Chrome doesn't have a shortcut for opening their Sources panel?

I'm not sure how well Shift-F4 works for Windows but we'd need a different one for Mac either way.

For the future, maybe Cmd-Opt-1, -2, -3, etc could navigate between any ordering of tabs, to follow the main tab example.

Flags: needinfo?(victoria)

Am I understanding correctly that Chrome doesn't have a shortcut for opening their Sources panel?

Correct.

Cmd-Opt-B could make sense, though a bit tough to type.

Cmd-Opt-B seems reasonable. Most shortcuts are not one-handed, like Cmd-Opt-I or *-K, so I don't have a good baseline for easy-to-type.

I'm not sure how well Shift-F4 works for Windows but we'd need a different one for Mac either way.

What would be the concern on Windows?

Flags: needinfo?(victoria)
Blocks: 1565711
Blocks: 1565713

Sorry in the long delay in response! Let's go with Cmd-Opt-B.

I assume Shift-F4 is fine in Windows but is just really hard to do in Mac. Also, the current pattern is that the most-used tools have shortcuts with letter keys rather than F4, so I like the idea of using Cmd-Opt-letter.

Flags: needinfo?(victoria)

Victoria, would would be the Windows equivalent? Ctrl-Shift-B would also be available afaik and would not require the Windows key (and seems generally unused https://defkey.com/what-means/ctrl-shift-B, apart from Chrome's bookmarks toolbar).

Just to expand on options:

Flags: needinfo?(victoria)

Ah, I guess I don't know what the best practice is re: having different shortcuts for Mac and Windows. It does make a lot of sense to optimize for the best Windows experience, rather than the experience for people who have to switch between Windows and Mac. It would be great to use B in addition to whatever the standard shortcut pattern for Inspector/Console/etc is. Is it actually Ctrl-Shift-* rather than Ctrl-Alt-* ?

Great to know about https://defkey.com!

Flags: needinfo?(victoria)
Attached image image.png —

Looks like Ctrl-Shift shortcuts usually map to Cmd-Opt; so Cmd-Opt-B/Ctrl-Shift-B would be the most fitting shortcut.

FYI, Ctrl+Shift+B is currently used by the Bookmarks Manager.

What would be the exact behavior of this shortcut, by the way?
Right now it seems our shortcuts all behave a bit differently.
Testing on macOS:

Cmd + Opt + I

  • If devtools is closed: opens devtools on the last selected tab, or Inspector by default
  • If devtools is open on Inspector: closes devtools
  • If devtools is open on another tab: closes devtools

Cmd + Opt + E

  • If devtools is closed: opens devtools on the Network tab
  • If devtools is open on Network: closes devtools
  • If devtools is open on another tab: switches to Network

Cmd + Opt + K

  • If devtools is closed: opens devtools on the Console tab
  • If devtools is open on Console: does nothing
  • If devtools is open on another tab: switches to Console

Cmd + Opt + W

  • If devtools is closed: opens devtools on the Console tab
  • If devtools is open on Console: does nothing
  • If devtools is open on another tab: does nothing

So K and W (both for Console) are not consistent, and neither is consistent with E (for Network), and nothing is consistent with I (which is more like F12).

It would be great to have F12 be the generic one that re-opens on the last selected tab, and have all the others associated with a specific tool and use similar behavior for when devtools is open on another tab or on the "target" tab.

No longer blocks: 1565711
No longer blocks: 1565713

Wow. A lot going on here :). Thanks for bringing this to light. I filed a separate bug to fix this inconsistency

Meanwhile, since this bug seems like a more urgent need, I'd suggest we move forward with the Network's pattern for the Debugger shortcut.

If devtools is closed: opens devtools on the Debugger tab
If devtools is open on Network: closes devtools
If devtools is open on another tab: switches to Debugger

(In reply to Sebastian Hengst [:aryx] (needinfo on intermittent or backout) from comment #11)

FYI, Ctrl+Shift+B is currently used by the Bookmarks Manager.

Oh oof, good to know! I guess Ctrl+Shift is used for a lot of non-dev actions. So we'd need a different shortcut - what about Ctrl+Shift+D? (Still keeping Cmd-Opt-B for Mac.)

(In reply to Victoria Wang [:victoria] from comment #13)

what about Ctrl+Shift+D?

Bookmarks all open tabs. https://support.mozilla.org/en-US/kb/keyboard-shortcuts-perform-firefox-tasks-quickly has a list of many keyboard shortcuts provided by Firefox.

Ah, thanks for the link - unfortunately it's only showing me Mac shortcuts, and for now I need to move onto other tasks before I start spoofing agent strings or booting up an actual PC. Could someone with a Windows machine handy try out some other combos involving Ctrl+Shift and letters in the word "Debugger"?

Testing on Linux, which according to https://developer.mozilla.org/en-US/docs/Tools/Keyboard_shortcuts#Opening_and_closing_tools uses the same shortcuts as Windows.

Is it actually Ctrl-Shift-* rather than Ctrl-Alt-* ?

Yep, shortcuts for opening specific panels in DevTools on Windows/Linux follow this form:

  • Core tools: Ctrl + Shift + <letter>
  • A few other tools: Shift + <numbered function key>

So I'm testing for Ctrl + Shift + <letters from "debugger">.

  • Ctrl + Shift + D: New Bookmark folder dialog
  • Ctrl + Shift + E: Opens DevTools>Network
  • Ctrl + Shift + B: Nothing? (Note: Ctrl + B opens the Bookmarks sidebar)
  • Ctrl + Shift + U: Nothing? (Note: Ctrl + U is View Source)
  • Ctrl + Shift + G: Go to previous in-page search result (Ctrl + G is go to next in-page search result)
  • Ctrl + Shift + R: Reloads the page, bypassing cache (Ctrl + R reloads the page and uses the cache)

Both Ctrl + Shift + B and Ctrl + Shift + U seem free in my tests and according to https://support.mozilla.org/en-US/kb/keyboard-shortcuts-perform-firefox-tasks-quickly (which might not be exhaustive).

It would be fun if we could use Ctrl + Shift + U (Cmd + Opt + U on Mac) and, if the Debugger has no open tab yet, open the page's HTML source in Debugger. Then it would be like "View Source" on steroids.

(In reply to Victoria Wang [:victoria] from comment #15)

unfortunately it's only showing me Mac shortcuts

Click Editing Tools on the left > pick Firefox versions + Operating system + its version.

It would be fun if we could use Ctrl + Shift + U (Cmd + Opt + U on Mac) and, if the Debugger has no open tab yet, open the page's HTML source in Debugger. Then it would be like "View Source" on steroids.

Love this connection as an extension of View Source and makes it much easier to use. Eventually, View Source could actually open the Debugger. This makes it my favorite atm.

Victoria, do you agree or have additional thoughts?

Flags: needinfo?(victoria)

Click Editing Tools on the left > pick Firefox versions + Operating system + its version.

Ah, good to know!

So I'm testing for Ctrl + Shift + <letters from "debugger">.

Thank you for this! Regarding Ctrl+Shift+B, the docs do say it's for Library window (Bookmarks). Strange that it wasn't happening in your tests - maybe it's a situation where Windows and Linux are different?

It would be fun if we could use Ctrl + Shift + U (Cmd + Opt + U on Mac) and, if the Debugger has no open tab yet, open the page's HTML source in Debugger. Then it would be like "View Source" on steroids.
Love this connection as an extension of View Source and makes it much easier to use. Eventually, View Source could actually open the Debugger. This makes it my favorite atm.

Victoria, do you agree or have additional thoughts?

Oh, interesting. To me, View Source is the sacred ancestor of the Inspector, and I've schemed to tie the two closer together. I actually don't know the value of Debugger's HTML view besides as a quick reference while you're looking at JS files. Based on my understanding, I'm concerned about UI/perf overhead of opening the HTML file upon Debugger open. I'm expecting folks who are opening View Source and Debugger to be wanting very different things. Am I missing something about the usefulness of this?

Either way though, I'd be fine with Ctrl + Shift + U (Cmd + Opt + U)!

Flags: needinfo?(victoria)

The "open HTML source in Debugger" part was more of a brainstorming thing. :)
Probably better to not do something "extra", given all the small differences we already have (bug 1571892).

Based on my understanding, I'm concerned about UI/perf overhead of opening the HTML file upon Debugger open. I'm expecting folks who are opening View Source and Debugger to be wanting very different things. Am I missing something about the usefulness of this?

Lets keep this issue is still only about finding a shortcut. Opening HTML in Debugger doesn't make sense for most users.

Since Debugger is named Sources in Chrome, one could make another argument for Debugger being the right fit. Inspector surely is the more approachable tool, but also already has at least one related shortcut. I vary of how much of this argument we want to build on the mental connection to View Source; or just the benefit of being close to an exiting muscle memory.

Since we are in general agreement, Ctrl + Shift + U (Cmd + Opt + U) it is :) .

David posted this bug in the Debugger channel yesterday, so I will assume this makes it a gfb and will tag it accordingly.

Keywords: good-first-bug

(In reply to Florens Verschelde :fvsch from comment #12)

What would be the exact behavior of this shortcut, by the way?
Right now it seems our shortcuts all behave a bit differently.
Testing on macOS:

Cmd + Opt + I

  • If devtools is closed: opens devtools on the last selected tab, or Inspector by default
  • If devtools is open on Inspector: closes devtools
  • If devtools is open on another tab: closes devtools

Cmd + Opt + E

  • If devtools is closed: opens devtools on the Network tab
  • If devtools is open on Network: closes devtools
  • If devtools is open on another tab: switches to Network

Cmd + Opt + K

  • If devtools is closed: opens devtools on the Console tab
  • If devtools is open on Console: does nothing
  • If devtools is open on another tab: switches to Console

Cmd + Opt + W

  • If devtools is closed: opens devtools on the Console tab
  • If devtools is open on Console: does nothing
  • If devtools is open on another tab: does nothing

So K and W (both for Console) are not consistent, and neither is consistent with E (for Network), and nothing is consistent with I (which is more like F12).

It would be great to have F12 be the generic one that re-opens on the last selected tab, and have all the others associated with a specific tool and use similar behavior for when devtools is open on another tab or on the "target" tab.

I ran these through my Windows 10 system build for comparison, all are identical bar Ctrl + Shift + W which is the hotkey for close window :).

Also Ctrl + Shift + F12 doesn't seem to work, not sure if we need to update docs etc

(In reply to Florens Verschelde :fvsch from comment #20)

The "open HTML source in Debugger" part was more of a brainstorming thing. :)
Probably better to not do something "extra", given all the small differences we already have (bug 1571892).

Yeah, makes sense - didn't mean to get overly negative about the idea 😅

(In reply to :Harald Kirschner :digitarald from comment #21)

Since we are in general agreement, Ctrl + Shift + U (Cmd + Opt + U) it is :) .

David posted this bug in the Debugger channel yesterday, so I will assume this makes it a gfb and will tag it accordingly.

Yeah, for me the shortcut is good to go :). (I couldn't figure out what gfb means - go for broke :D? did this feature get very high stakes all the sudden?)

(In reply to Chris Muldoon from comment #22)

I ran these through my Windows 10 system build for comparison, all are identical bar Ctrl + Shift + W which is the hotkey for close window :).

Also Ctrl + Shift + F12 doesn't seem to work, not sure if we need to update docs etc

Thanks for checking these - if you're talking about these docs, the F12 is standalone, not Ctrl + shift + F12 (though that could be more clear).

I ran these through my Windows 10 system build for comparison, all are identical bar Ctrl + Shift + W which is the hotkey for close window :).

Also Ctrl + Shift + F12 doesn't seem to work, not sure if we need to update docs etc

Thanks for checking these - if you're talking about these docs, the F12 is standalone, not Ctrl + shift + F12 (though that could be more clear).

Ah I see now, probably a lack of meticulousness on my part.

Attachment #9084363 - Attachment description: Bug 1532139 - Add keyboard shortcut topen debugger → Bug 1532139 - Add keyboard shortcut open debugger
Assignee: nobody → dwalsh
Blocks: dbg-70
Status: NEW → ASSIGNED
Whiteboard: [debugger-reserve]

Release Note Request (optional, but appreciated)
[Why is this notable]: This is adding a new shortcut to Firefox, to open the Debugger. The previous shortcut was handed over to the Screenshots feature.
[Affects Firefox for Android]: no
[Suggested wording]: "With Ctrl+Shift+U (MacOS: Cmd-Opt-U) the JavaScript Debugger from Firefox Developer Tools is one shortcut away and lets you quickly inspect your site's code and step through any issues."
[Links (documentation, blog post, etc)]: TBD

relnote-firefox: --- → ?
Keywords: dev-doc-needed

:davidwalsh found during his implementation that View Source on Mac takes Cmd-Opt-U.

I verified that Chrome uses Cmd-Opt-U as well, but only Ctrl+U on Windows. Firefox supports both Cmd-U and Cmd-Opt-U, but only Ctrl-U on Windows. Safari uses Cmd-Opt-U to open Page Source (opens Debugger)!

I am still tempted to re-purpose this shortcut for Debugger, as it only conflicts on Mac and makes more sense to open actual DevTools as much richer source viewer. Cmd-Opt-B is still on the table as an option as well. :victoria, any preferences?

Flags: needinfo?(victoria)

Since Cmd-U works on Mac, I felt it was fine to co-opt Cmd-Opt-U. Cmd-U is what's in the menu, so I don't see why anyone would use Cmd-Opt-U. Bummer to realize that's what Chrome uses though (with nothing for Cmd-U). But they don't seem to have a shortcut for their Debugger, so I think we can take the lead here and stick with our Cmd-Opt-U idea.

Very interesting to see this Safari implementation of your idea :).

Flags: needinfo?(victoria)

Related bug for when Cmd-Opt-U was added in bug 1398988.

Seeing the twitter thread linked (https://twitter.com/justnorris/status/905377487722565632) makes me more vary. Given that Chrome only has Cmd-Opt-U, and that Debugger does not open the index file by default (like Safari); it isn't the greatest experience for users who are depending on View Source as part of their workflow. This makes my preference sway towards Cmd-Opt-B again.

Ah, I see what you mean. Yeah, since we aren't doing the super-view-source idea for now, going back to Cmd-Opt-B makes sense to me.

:davidwalsh, looks like we have a quorum on pivoting to Cmd-Opt-B :)

Flags: needinfo?(dwalsh)

Updated my patch.

Flags: needinfo?(dwalsh)
Blocks: dbg-71
No longer blocks: 1502924
Whiteboard: [debugger-reserve] → [debugger-mvp]
No longer blocks: dbg-70

Victoria, we are running out of shortcuts, B and U are taken by other things on some platforms. David is trying G now. Any other ideas or should we pause this for now?

Flags: needinfo?(victoria)

If we run out of all the letters in 'debugger', I think we just pick any letter that's free :D

Ctrl-shift-L or O, anyone?

Flags: needinfo?(victoria)

We could also consider something like Ctrl-Shift-; or Ctrl-Shift-Return. These seem more spiritually powerful somehow

(Edit: Oops, not not Ctrl-Shift-Return - that already does 4 different things related to opening links)

My current favorite is semi-colon if it's indeed available. Who even thinks about semi-colons besides coders (and grammar nerds)?

My current favorite is semi-colon if it's indeed available.

WFM and got an ergonomic feel to it as ; is easy to reach.

Per flod's comment in my patch, it apparently isn't localizable in some languages, including German :/

Pushed by dwalsh@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/d71878241de2
Add keyboard shortcut open debugger r=jlast

https://hg.mozilla.org/mozilla-central/rev/d71878241de2

Status: ASSIGNED → RESOLVED
Closed: 5 years ago
status-firefox71: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 71

Ctrl-Shift-L is used by Bitwarden (a pretty popular password manager) to autofill the logins: arguably the most used shortcut.

Given its popularity, can we consider another shortcut for the debugger?

Thanks for pointing that out.

arguably the most used shortcut

Just to clarify: Most popular in Bitwarden or are there other apps as well that you are aware about?

Flags: needinfo?(fbonelli)

Just to clarify: Most popular in Bitwarden or are there other apps as well that you are aware about?

Sorry for the confusion, I meant most used in Bitwarden, since it doesn't autofill credentials by default for security reasons. The flow is: go to the site and have Bitwarden fill the fields upon user action, which is triggered either by clicking on the entry within the extension UI or (much more conveniently) by using the hotkey.

I'm not aware of any other extensions using that shortcut.

Flags: needinfo?(fbonelli)

Thank you. Sounds like we will convert all Bitwarden users on Windows into DevTools Debugger users with this change. Maybe we can limit the fix to Windows. While I circle back with the addons team I am open for ideas here.

Indeed, keyboard shortcuts involving punctuation signs routinely fail on non US-QWERTY layouts because those signs are not available at the same position and/or require Shift and/or AltGr.

(In reply to :Harald Kirschner :digitarald from comment #44)

Thank you. Sounds like we will convert all Bitwarden users on Windows into DevTools Debugger users with this change. Maybe we can limit the fix to Windows. While I circle back with the addons team I am open for ideas here.

Ctrl-Shift-O? Gotta find those boogs.

Regressions: 1583042

This doesn't seem like a good fit for our general release notes, this can go in our developer documentation for the 71 release.

relnote-firefox: ? → -
Has Regression Range: --- → yes
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: