1.クイックファイル変更
Sublime Textを使用した場合、「Go to anything」なしではおそらく生きられません（ 翻訳者のメモ： Ideaユーザーの場合、この機能は「Searching Everywhere」と呼ばれ、Shiftキーを2回押すと呼び出されます）。 同様の機能が開発者ツールにあることを知って喜んでいるでしょう。 開発者パネルが開いているときにCtrl + P（Macユーザーの場合はCmd + P）を押すと、プロジェクト内のファイルをすばやく見つけて開くことができます。
2.ソースコードを検索する
しかし、ソースコードで検索する場合はどうでしょうか。 ページ上のダウンロードされたすべてのファイルを検索するには、Ctrl + Shift + F（Cmd + Opt + F）を押します。 この検索方法は、正規表現検索もサポートしています。
3.行に移動
[ソース]タブでファイルを開いた後、開発者ツールを使用すると、このファイルの任意の行に移動できます。 これを行うには、WindowsおよびLinuxの場合はCtrl + G（Macの場合はCmd + L）を押して、行番号を入力します。
別の方法は、Ctrl + Oを押すことですが、検索するテキストの代わりに、「：」と行番号を入力します（ 翻訳者注：さらに進んで、「：」を区切り文字として使用してファイル名と行番号を入力し、入力しますファイル名は完全にオプションです。これは検索です）。
4.コンソールを使用したDOM要素の取得
開発者ツールコンソールは、DOMフェッチのためのいくつかの便利な「マジック」関数と変数をサポートしています。
- $（）-document.querySelector（）と同等。 CSSセレクターに一致する最初の要素を返します。たとえば、$（ 'DIV'）はページの最初のdiv要素を返します。
- $$（）-document.querySelectorAll（）と同等。 指定されたCSSセレクターに一致する要素のリスト（ 翻訳者のメモ： NodeList）を返します。
- $ 0-$ 4は、[要素]タブで選択した最後の5つのDOM要素の履歴です。$ 0が最後になります。
その他のコンソール機能については、 こちらをご覧ください 。
5.複数のキャリッジと選択の使用
ファイルを編集するときは、Ctrl（Macの場合はCmd）を押しながら必要な場所をクリックすることで複数のキャリッジを設定できるため、キャリッジを多くの場所に同時にインストールできます。
6.ログを保存
[コンソール]タブで[ログの保存]オプションを有効にすると、ページが読み込まれるたびにクリアされるのではなく、結果が保存されます。 これは、ページを離れる前に表示されるエラーの履歴を表示する場合に便利です。
（ 翻訳者のメモ： [ネットワーク]タブにも同様のプロパティがあります。オンにすると、ページを切り替えるときにクエリ履歴のクリアが停止します。ただし、JavaScriptを使用してページをリダイレクトし、他のリクエストを実行した場合、このリクエストの結果を表示することはほとんど不可能です長いデバッグ中にそのようなプロパティを無効にすることを忘れてください！開発者ツールはほとんどの場合、ページ自体よりも多くのシステムリソースを消費します！）
7.最小化されたソースのプリティフィケーション
Chrome Developer Toolsには、最小化されたソースコードが読みやすいように組み込まれた「プリテンダー」があります。 このボタンは、[ソース]タブで現在開いているファイルの左下隅にあります。
（ 翻訳者のメモ：たとえば、FireFoxで行われているように、このプロパティを自動的に有効にする機能が不足している場合があります）
8.デバイスモード
開発者ツールには、モバイルデバイス用に最適化されたページを開発するための強力なモードが含まれています。 このGoogleのビデオは、画面解像度の変更、タッチスクリーンのタッチのエミュレート、低品質のネットワーク接続のエミュレートなど、高度な機能のほとんどを示しています。
9.デバイスセンサーのエミュレーション
デバイスモードのもう1つの優れた機能は、タッチスクリーンや加速度計などのモバイルデバイスのセンサーをシミュレートする機能です。 地理座標を示すこともできます。 オブジェクトは、[エミュレーション]-> [センサー]の[要素]タブの下部にあります。
10.色の選択
スタイルエディタで色を選択するときに、色見本をクリックすると、色選択ウィンドウが表示されます。 このウィンドウが開いている間、マウスカーソルは拡大ルーペに変わり、ページの色をピクセル単位で正確に選択します。
11.アイテムの強制状態
開発ツールを使用すると、次のようなDOM要素のCSS状態をシミュレートできます。ホバーおよびフォーカス：スタイルの記述を簡単にします。 この機能は、CSSプロパティエディターで使用できます。
12.シャドウDOMの表示
入力フィールドやボタン、ブラウザなどの要素は、通常は非表示になっている他の基本要素から作成します。 ただし、[設定]-> [一般]に移動し、[ユーザーエージェントのシャドウDOMを表示]を有効にして、これらの基本要素を[要素]タブに表示できます。 これにより、個別に配置する機会が与えられます。
13.次の出現を選択
[ソース]タブでファイルを編集しているときにCtrl + D（Cmd + D）を押すと、現在の単語の次の出現箇所が強調表示され、同時に編集できます。
14.色の形式を変更する
CSS編集パネルでShift +クリックで色見本をクリックすると、色形式がRGBA、HSL 16進数に変更されます（ 翻訳者注：同時に、16進数の省略形と完全な両方、大文字の場合でも）。 、ブラウザは標準の色定数のリストから特定の色を見つけようとします。この機能の唯一の欠点は、目的の形式を選択するために、他のすべてのオプションをクリックする必要があることです。
15.ワークスペース内のローカルファイルの編集
ワークスペースは、開発者ツールをIDEに変える開発者パネル用の強力なツールバーです。 ワークスペースのローカルプロジェクトの構造に応じて、[ソース]タブにファイル構造が含まれているため、外部テキストエディターに変更をコピーして貼り付けることなく、直接編集して保存できます。
ワークスペースを設定するには、「ソース」タブに移動し（ 翻訳者のメモ：ナビゲーションバーが非表示になっている場合はオンにし、タブの左上隅にあるナビゲーターを表示ボタンをクリックするだけ）、ナビゲーターバーの任意の場所を右クリックするか、タブ全体をドラッグします開発者パネルへのプロジェクト。 これで、選択したフォルダ、そのサブディレクトリ、およびその中のすべてのファイルは、どのページにいても編集可能になります。 さらに便利なように、このページで使用されているファイルを使用すると、それらを編集して保存できます。
UPD。 翻訳者注：
追加されたフォルダには、すべてのタブからアクセスできます。 したがって、プロジェクトに複数のHTMLファイルがある場合は、隣接するブラウザータブで開くだけで十分です。
ワークスペースの詳細については、 こちらをご覧ください 。
さらに読むための推奨事項：
Chromeのキーボードショートカット
Chromeドキュメントのヒントとコツの長いリスト