クールなChromeDevToolsのヒントとコツのリスト

Chrome DevToolsは、Webプラットフォームでの開発に役立つすばらしいツールセットを提供します。まだ知らないかもしれないいくつかのヒントがあります

チェックしてくださいChromeDevToolsの概要あなたが彼らに不慣れなら

要素パネルでドラッグアンドドロップ

要素パネルでは、任意のHTML要素をドラッグアンドドロップして、ページ全体でその位置を変更できます。

Drag and Drop in the Elements Panel

コンソールで現在選択されている要素を参照する

[要素]パネルでノードを選択し、次のように入力します$0それを参照するためにコンソールで。

Reference elements in the Console

ヒント：jQueryを使用している場合は、次のように入力できます$($0)この要素でjQueryAPIにアクセスします。

コンソールで最後の操作の値を使用します

使用する$_コンソールで実行された前の操作の戻り値を参照する

Use the last result

CSSを追加し、要素の状態を編集します

要素パネルには、2つの非常に便利なボタンがあります。

1つ目は、必要なセレクターを使用して新しいCSSプロパティを追加できますが、現在選択されている要素を事前に入力します。

Add a CSS rule

2つ目は、選択した要素の状態をトリガーできるため、アクティブ、ホバー、フォーカス時に適用されたスタイルを確認できます。

Element state

CSSプロパティが定義されている場所を見つける

cmd-click（（ctrl-clickWindowsの場合）要素パネルのCSSプロパティの場合、DevToolsは、ソースパネルでそれが定義されている場所を示します。

Find where a CSS property is defined

変更したCSSをファイルに保存

編集したCSSファイルの名前をクリックします。インスペクターはそれを[ソース]ペインに開き、そこから、適用したライブ編集で保存できます。

このトリックは、+またはelement.styleプロパティに追加された新しいセレクターでは機能しませんが、変更された既存のセレクターでのみ機能します。

Save to File the modified CSS

単一の要素のスクリーンショット

要素を選択してを押しますcmd-shift-p（またはctrl-shift-pWindowsの場合）コマンドメニューを開き、[キャプチャノードのスクリーンショット

Screenshot a single element

CSSセレクターを使用して要素を検索する

押すcmd-f（（ctrl-fWindowsの場合）要素パネルに検索ボックスを開きます。

ソースコードに一致する任意の文字列をそこに入力するか、CSSセレクターを使用してChromeに画像を生成させることもできます。

Find an element using CSS selectors

Shiftキーを押しながらコンソールに入力します

コンソールで複数行にまたがるコマンドを作成するには、を押します。shift-enter。

準備ができたら、スクリプトの最後でEnterキーを押して実行します。

Shift-enter in the Console

コンソールをクリアする

を使用してコンソールをクリアできます晴れコンソールの左上にあるボタン、またはを押してctrl-lまたはcmd-k。

移動…

[ソース]パネル：

cmd-o（（ctrl-oWindowsの場合）、ページによってロードされたすべてのファイルを表示します。
cmd-shift-o（（ctrl-shift-oWindowsの場合）は、現在のファイルのシンボル（プロパティ、関数、クラス）を表示します。
ctrl-g特定の行に移動します。

Files list

式を見る

デバッグセッション中に頻繁にチェックする変数名や式を何度も書く代わりに、それをに追加します。式を見るリスト。

Watch Expressions

XHR / Fetchデバッグ

デバッガーから開きますXHR /フェッチブレークポイントパネル。

いつでも壊れるように設定できますXHR/フェッチ通話が送信されるか、特定の通話のみが送信されます。

XHR and Fetch debugging

DOM変更のデバッグ

要素を右クリックして有効にしますサブツリーの変更で中断：スクリプトがその要素の子をトラバースして変更するたびに、デバッガーは自動的に停止して、何が起こっているかを検査できるようにします。

Debug on DOM modifications