web-dev-qa-db-ja.com

Web開発ツールからページにフォーカスを切り替えるためのキーボードショートカットChrome

Vimium for Chromeを使用しています。これにより、rキーで更新できます。開発ツールを使用していると、ページのフォーカスが失われ、rを再度使用するためにページをクリックする必要があります（ボタンで更新するだけですが）。開発ツールからページに戻るためのキーボードショートカットを知っている人はいますか？ cmd [を使用して開発ツール内のペインを切り替えることができることは知っていますが、ページに戻る方法が見つかりません。

google-chromegoogle-chrome-devtools
54
dc-
  • Chrome DevToolsがフォーカスされている場合、Shift + F6ページのコンテンツに焦点を当てます。
  • Chrome DevToolsが開いていて、ページコンテンツがフォーカスされている場合、F6はChrome DevToolsに焦点を当てます。

参照： https://support.google.com/chrome/answer/157179

Google Chrome機能のショートカット

F6アドレスバー、ブックマークバー（表示されている場合）、およびページコンテンツ間でフォーカスを前方に切り替えます
Shift + F6アドレスバー、ブックマークバー（表示されている場合）、およびページコンテンツ間でフォーカスを後方に切り替えます

19
Mike

ヒューリー から恥知らずにコピー

  1. F6またはCmd + LまたはCtrl + Lそしてアドレスバーにフォーカスします
  2. javascript：と入力し、Enterキーを押します。

これで、jだけでフォーカスをページに移動できます。

しかし、javascript：は長すぎますね。次に、これに従ってください。

Go to Chrome Settings page
Click "Manage search engines..." in the Search section
Add a new search engine with
    any name e.g. Back to page
    any keyword e.g. j
    URL - javascript:

enter image description here

11
TMB

Dev-toolsopenedを残したまま、dev-toolsからページにフォーカスする方法をまだ見つけていませんが：

  • Dev-toolsが開かれている場合は、 Cmd+Opt+c
  • Dev-toolsを閉じてページをフォーカスします Cmd+Opt+i
  • 開発ツールが閉じている場合、コンソールに直接ジャンプするには： Cmd+Opt+j
  • タブを Cmd+[ そして Cmd+]
  • Esc dev-toolsでコンソールを切り替える

参照： https://developers.google.com/chrome-developer-tools/docs/shortcuts

9
Rafi B.

OS Xでは、以下を使用してアプリケーションウィンドウ間をネイティブに切り替えることができます。

フォーカスを次のウィンドウに移動します。 ⌘ + `

フォーカスを最後のウィンドウに移動します。 ⌘ + ⇧ + `

これが機能しない場合は、で有効になっていることを確認してください

システム環境設定> キーボード> キーボードショートカットタブ> キーボードセクション

3
Luke Barton

開発ツールからページに戻るためのキーボードショートカットを知っている人はいますか？

Tab あなたが探している鍵です。を押した後、ページをフォーカスするために使用します Esc コンソールを開きます。

2
Josh Habdas

Linuxの場合、Alt+Dを使用して開発ツールからアドレスバーに切り替えてから、Shift+Tabを2回押します。これにより、メインページに戻ります。残念ながら、Macでは動作しません。

1
evenfrost

Chromeバージョン35.0.1916.114

WebページでF12。 ctrl + [で切り替えない場合は、[要素]タブを表示する必要があります。ページからF12に表示する要素タブを取得したら、必要に応じてEscを使用してコンソールにアクセスできます。

次に、要素パネルにフォーカスがあると、何か面白いものに出会う前の3つのタブで、スタイルパネル「ユーザーエージェントスタイルシート」が表示されます。さらに2つのタブがあり、右上に小さな点線のアイコンが表示されます。これを示すスペースがあります。

この時点で、開始から5タブ離れています。さらに2つのタブと「スタイルで検索」を取得し、もう1つのタブと計算されたプロパティパネルを取得します。次に、別のタブがその下のフィルターに移動します。

現在、9つのタブがあります。

10番目のタブが何であるかを推測します。

または、小指が疲れている場合は、8つのシフトタブだけが後方に移動します。

それが私たちがビジネスで「発見可能性」と呼んでいるものです。

次に、AutoHotkeyスクリプトを次に示します。

; Match any part of title
SetTitleMatchMode, 2
#IfWinActive - Google Chrome
;#IfWinActive ahk_class Chrome_WidgetWin_1
  +F10::  ; goto html body, use upper left corner mouse click
    CoordMode, Mouse, Screen
    MouseGetPos, xpos, ypos
    CoordMode, Mouse, Relative
    MouseClick, left,10, 95, 1, 0
    CoordMode, Mouse, Screen
    MouseMove, %xpos%, %ypos%, 0
    Return
  F10:: ; from html, goto dev tools (Elements Panel must be default here, with console open ESC), 
        ; might need to adjust tab number to suit your icons to the right of location bar
    Send, ^l
    Send, {tab 7}
    Return
  ^F10:: ; from html, goto dev tools - previously opened console (Elements Panel must be default here, with console open ESC)
    Send, ^l
    Send, {tab 7}
    Send, {tab 13}
    Return
#IfWinActive ;Chrome
1
Mark Robbins

f6を押してアドレスバーにフォーカスし、returnキーを押すかf5キーを押して更新し、Tabキーを押してブラウザウィンドウの要素にフォーカスします。

これは回り道であり、おそらくすべての場合に役立つわけではありませんが、タブインデックスなどをテストしていて、マウスを使いたくない場合は、コンソールを閉じずに元に戻す方法を見つけた唯一の方法です。

1
bingo

開発ペインからウィンドウに切り替える方法はありませんが、cmd r必要なことを実行します（ページの更新）。

0
dc-

私もこれにかなり不満を感じましたが、私の問題は少し異なります。開発ツールを（別のウィンドウで）切り離していて、ページに戻るには常にクリックする必要があります。

私は自分に合った小さなアップルスクリプトを書きました：

tell application "Google Chrome"
    activate second window -- if I have dev tools open "second window" is the page
    tell second window to tell active tab
        set the URL to "Javascript:window.focus();"
    end tell
end tell

Spark を使用してショートカットにバインドしました。

そのため、切り離された開発ツールウィンドウを表示しているときはいつでも、ショートカットを押すとフォーカスがページに戻り、Vimiumを再び使用できるようになります。

0
Cotten

Control + Lを押して、アドレスバーにフォーカスします。次に、F6を1回押してブックマークバー（ある場合）にフォーカスし、もう一度F6を押してページにフォーカスします。

0
Chris