---
title: Tips
slug: Tools/Tips
tags:
- Dev Tools
- Tools
- Web Development
translation_of: Tools/Tips
---
{{ToolsSidebar}}
一般
スクリーンショット:
設定:
- 開発ツールのテーマを Light、Dark、Firebug から選択します。
- 通常とは異なるショートカットに慣れている場合は、Vim、Emacs、あるいは Sublime Text の キー割り当てに変更します。
- チェックボックスで、さまざまなツールを有効化または無効化します (デフォルトで有効化していないツールがあります!)。
ページインスペクター
マークアップビュー:
- ノードを選択して H を押下すると、そのノードを非表示/再表示します。
- ノードを選択して Backspace または Del を押下すると、そのノードを削除します。
- Alt を押しながらノードをクリックすると、すべての子孫を展開/折りたたみます。
- ツール下部にある パンくずリストのボタン をクリックすると、そのノードを表示するようにインスペクターがスクロールします。
- ノードのそばにある "ev" アイコンをクリックすると、そのノードに関連付けられたすべてのイベントリスナーがわかります。
- ノードを選択して S を押下すると、ページでそのノードを表示します (ノードを右クリックして [この要素の位置にスクロール] を選択することと同じです)。
- ノードを右クリックして [コンソールで使う] をクリックすると、そのノードを変数
tempN として コマンドライン で使用できます。
要素を選択する:
- Shift + クリックでは、要素を選択しますが選択可能な状態を維持します (選択モードを解除しません)。
- ←/→ を使用して、親要素/子要素に移動します (選択するのが困難である場合)。
ルールビュー:
- セレクターの隣にあるインスペクターアイコン (
) をクリックすると、マッチするすべての要素を強調表示します。
要素 {} ルールの隣にあるインスペクターアイコン () をクリックすると、選択中の要素を強調表示します。- 任意のプロパティを右クリックして [MDN ドキュメントを表示] を選択すると、そのプロパティの MDN ドキュメントを表示します。
- オーバーライドされたルールの隣にあるフィルターアイコン (
) をクリックすると、オーバーライドしたプロパティが見つかります。
- 名称、値、ルールを右クリックして、それらの名称、値、宣言、ルール全体をクリップボードにコピーできます。
ウェブコンソール
すべてのパネル:
- Esc を押下すると 常時表示コンソール を開きます。デバッグやノードの調査を行う際に役立ちます。
コマンドライン:
$0 は、現在選択しているノードを参照します。$() は、{{domxref("document.querySelector()")}} のショートカットです。$$() は、{{domxref("document.querySelectorAll()")}} の結果を含む配列を返します。copy は、あらゆるものを文字列としてコピーします。- インスペクターでノードを右クリックして [コンソールで使う] をクリックすると、そのノードを示す変数
tempN を作成します。
cd で、JavaScript の実行コンテキストを、ページ内の別の iframe に切り替えます。console.table() で、表形式のデータを表で表示します。help で、使用可能なコマンドを説明する MDN ページを開きます。:screenshot <filename.png> --fullpage は、オプションのファイル名を使用して、ダウンロードディレクトリにスクリーンショットを保存します。ファイル名が含まれていない場合、ファイル名は次の形式になります。
Screen Shot date at time.png
--fullpage パラメーターはオプションです。それを含めると、スクリーンショットはブラウザウィンドウに表示されるセクションだけでなくページ全体になります。ファイル名にも -fullpage が付加されます。Web コンソールヘルパーの全てのパラメータを参照してください。
コンソールの出力:
デバッガー
- ブラックボックスアイコン (
) を使用して、デバッグセッションで JavaScript ライブラリーをスキップできます。
- Ctrl+Alt+F を押下すると、すべてのスクリプトから検索します。
- Ctrl+D を押下すると、関数定義を検索します。
- Ctrl+L を押下すると、特定の行に移動します。
スタイルエディター
- スタイルシートペインのブラックボックスアイコン () で、スタイルシートの適用状態を切り替えできます。
- @media 規則 をクリックすると、その規則を レスポンシブデザインモード で適用します。
- インポートボタン (
) をクリックすると、スタイルシートをインポートします。作成ボタン (
) をクリックすると、新しいスタイルシートを作成します。
- スタイルシートペイン のオプションボタンをクリックして [元のソースを表示] を選択すると、CSS プリプロセッサーのファイルの表示を切り替えます。
ネットワークモニター
ストレージインスペクター
- 列見出しを右クリックすると、列の表示/非表示を切り替えできるメニューが開きます。
- 項目を右クリックして [名称 を削除] を選択するとその項目を削除、[すべて削除] をクリックするとすべての項目を削除します。
- 項目を選択すると、解析した値をサイドバーに表示します。
をクリックします (始めに 有効化しなければなりません)。