MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Tips

一般

スクリーンショット:

設定:

  • 開発ツールのテーマを Light、Dark、Firebug から選択します。
  • 通常とは異なるショートカットに慣れている場合は、Vim、Emacs、あるいは Sublime Text の キー割り当てに変更します
  • チェックボックスで、さまざまなツールを有効化または無効化します (デフォルトで有効化していないツールがあります!)。

インスペクター

マークアップビュー:

要素を選択する:

  • Shift + クリックでは、要素を選択しますが選択可能な状態を維持します (選択モードを解除しません)。
  • / を使用して、親要素/子要素に移動します (選択するのが困難である場合)。

ルールビュー:

  • セレクターの隣にあるインスペクターアイコン () をクリックすると、マッチするすべての要素を強調表示します。
  • 要素 {} ルールの隣にあるインスペクターアイコン () をクリックすると、選択中の要素を強調表示します。
  • 任意のプロパティを右クリックして [MDN ドキュメントを表示] を選択すると、そのプロパティの MDN ドキュメントを表示します
  • オーバーライドされたルールの隣にあるフィルターアイコン () をクリックすると、オーバーライドしたプロパティが見つかります
  • 名称、値、ルールを右クリックして、それらの名称、値、宣言、ルール全体をクリップボードにコピーできます。

ウェブコンソール

すべてのパネル:

  • Esc を押下すると 常時表示コンソール を開きます。デバッグやノードの調査を行う際に役立ちます。

コマンドライン:

  • $0 は、現在選択しているノードを参照します。
  • $() は、document.querySelector() のショートカットです。
  • $$() は、document.querySelectorAll() の結果を含む配列を返します。
  • copy は、あらゆるものを文字列としてコピーします。
  • インスペクターでノードを右クリックして [コンソールで使う] をクリックすると、そのノードを示す変数 tempN を作成します。
  • cd で、JavaScript の実行コンテキストを、ページ内の別の iframe に切り替えます。
  • console.table() で、表形式のデータを表で表示します。
  • help で、使用可能なコマンドを説明する MDN ページを開きます。

コンソールの出力:

デバッガー

  • ブラックボックスアイコン (Icon for black boxing a JavaScript source) を使用して、デバッグセッションで JavaScript ライブラリーをスキップできます。
  • Ctrl+Alt+F を押下すると、すべてのスクリプトから検索します。
  • Ctrl+D を押下すると、関数定義を検索します。
  • Ctrl+L を押下すると、特定の行に移動します。

スタイルエディター

  • スタイルシートペインのブラックボックスアイコン (Icon for black boxing a JavaScript source) で、スタイルシートの適用状態を切り替えできます。
  • @media 規則 をクリックすると、その規則を レスポンシブデザインモード で適用します。
  • インポートボタン (Button to import a style sheet from the file system) をクリックすると、スタイルシートをインポートします。作成ボタン (Button to create a new style sheet) をクリックすると、新しいスタイルシートを作成します。
  • スタイルシートペイン のオプションボタンをクリックして [元のソースを表示] を選択すると、CSS プリプロセッサーのファイルの表示を切り替えます。

ネットワークモニター

ストレージインスペクター

  • 列見出しを右クリックすると、列の表示/非表示を切り替えできるメニューが開きます。
  • 項目を右クリックして [名称 を削除] を選択するとその項目を削除、[すべて削除] をクリックするとすべての項目を削除します。
  • 項目を選択すると、解析した値をサイドバーに表示します。

開発ツールバー

  • Shift + F2 をクリックすると 開発ツールバー (GCLI) を開きます。これはページ、開発ツール、ブラウザーなどの機能を制御するコマンドを提供します。
  • help で、使用可能なすべてのコマンドを表示するポップアップが現れます。
  • security csp で、サイトの Content Security Policy を表示します。
  • pref showpref setpref reset で、ブラウザーの設定値を表示/設定/リセットします。
  • folder openprofile で、現在のプロファイルのディレクトリーをファイルエクスプローラーで開きます。
  • media emulate media type で、特定のメディアタイプをシミュレートします。

ドキュメントのタグと貢献者

 このページの貢献者: yyss
 最終更新者: yyss,