web-dev-qa-db-ja.com

Chrome開発者パネルに、要素セレクターのキーボードショートカットはありますか？

Chrome開発者パネル、このツール...

enter image description here

要素を選択し、DOMビューでそれらに直接移動して、CSS属性を表示できます。

Safariにも同じツールがあります。

そのツールをアクティブにするためのキーボードショートカットはありますか（パネルを開いたら）。

google-chromegoogle-chrome-devtools
63
Ethan

検査要素モードとブラウザウィンドウを開いたり切り替えたりするには、次の操作を行います。

  • Macの場合- ⌘ + Shift + C

  • Windows/Linuxの場合- Ctrl + Shift + C OR F12

より便利なキーボードショートカットについては、 開発者ツールのドキュメント を参照してください。

124
Shreedhar

ショートカットは Ctrl+Shift+C （ ソース ）。

Webページの任意の要素を右クリックして、[Inspect element。

6
amiregelz

Linuxの場合もCtrl + Shift +C。

4
Michael Cole

WindowsおよびLinuxで、下部にある「要素の検査」ペインを表示するには：

  • 次のいずれかを使用できます。 Ctrl+Shift+C

  • または、次を使用できます。 F12

通常は、Webページ内の要素を右クリックしてInspect element、ページに右クリックを無効にするJavaScriptがある場合のキーボードショートカットを知っておくと便利です。

2
JohnGH

Macでは次を使用できます ⌘ + ⌥ + I

これは私のために働くものです。

これらのショートカットをすべて見つけることができるリソースを次に示します https://developers.google.com/web/tools/chrome-devtools/shortcuts

2
Sabin