Webブラウザ開発ツールの使用方法

今更聞けない！ ブラウザデベロッパーツールの使い方 (六月 2026)

今更聞けない！ ブラウザデベロッパーツールの使い方 (六月 2026)
Anonim

Webサーフィンを目指す日常的なユーザーに焦点を当てたほとんどのブラウザメーカーに加えて、Web開発者、デザイナー、品質保証のプロフェッショナルが、強力なツールをブラウザに組み込むことで、アクセスしているアプリケーションやサイトを構築するのに役立っています自分自身。

ブラウザー内で見つかった唯一のプログラミングツールとテストツールで、ページのソースコードを表示することができました。今日のブラウザでは、JavaScriptスニペットの実行やデバッグ、DOM要素の検査と編集、アプリケーションやページのロード時のリアルタイムネットワークトラフィックの監視、ボトルネックの特定、CSSパフォーマンスの分析、コードの確認などの作業を行うことで、あまりにも多くのメモリを使用したり、CPUサイクルを過度に使用したりすることはありません。テストの観点からは、レスポンシブデザインや組み込みシミュレータの魔法を使って、さまざまなブラウザや異なるデバイスやプラットフォームでアプリケーションやWebページをレンダリングする方法を再現することができます。最良の部分は、ブラウザを離れずにすべてを行うことができることです！

以下のチュートリアルでは、一般的なWebブラウザでこれらの開発ツールにアクセスする方法について説明します。

グーグルクローム

Chromeのデベロッパーツールを使用すると、コードの編集やデバッグ、個々のコンポーネントの監査によるパフォーマンスの問題の表示、AndroidやiOSなどのさまざまなデバイス画面のシミュレーションなど、さまざまな便利な機能を実行できます。

  1. Chromeのメインメニューボタンをクリックします.3つの水平線がマークされ、ブラウザの右上にあります。
  2. ドロップダウンメニューが表示されたら、マウスカーソルを その他のツール オプション。
  3. これで、サブメニューが表示されます。ラベル付きオプションを選択する 開発者ツール 。このメニュー項目の代わりに次のキーボードショートカットを使用することもできます：Chrome OS / Windows（ CTRL + SHIFT + I ）、Mac OS X（ ALT（オプション）+ COMMAND + I )
  4. この例のスクリーンショットに示すように、Chromeデベロッパーツールのインターフェースが表示されるはずです。 Chromeのバージョンによっては、最初に表示されるレイアウトがここに表示されているものと若干異なる場合があります。通常、画面の下側または右側にある開発者ツールのメインハブには、次のタブがあります。要素： CSSとHTMLコードを検査したり、オンザフライでCSSを編集したりして、変更の影響をリアルタイムで確認する機能を提供します。コンソール： ChromeのJavaScriptコンソールでは、コマンドの入力や診断のデバッグが可能です。ソース： 強力なグラフィカルインターフェイスを使用してJavaScriptコードをデバッグできます。ネットワーク： 完全な要求ヘッダーおよび応答ヘッダー、および高度なタイミングメトリックを含む、アクティブなアプリケーションまたはページ上の関連する各操作に関する詳細情報を分類して表示します。タイムライン： ページまたはアプリの読み込み要求が開始されるとすぐに、ブラウザ内で行われるすべてのアクティビティの詳細な分析を可能にします。
  5. これらのセクションに加えて、以下のツールにアクセスすることもできます。 >> アイコンの右側にあります タイムライン タブ。プロフィール： 壊れた CPUプロファイラ そして ヒーププロファイラー アクティブなアプリケーションまたはページの包括的なメモリ使用量と全体的な実行時間を提供します。セキュリティ： アクティブなページまたはアプリケーションに関する証明書の問題およびその他のセキュリティ関連の問題を強調表示します。リソース： ここでは、現在のWebページまたはアプリケーションで使用されているCookie、ローカルストレージ、アプリケーションキャッシュ、およびその他のローカルデータソースを検査できます。監査： ページやアプリケーションの読み込み時間と一般的なパフォーマンスを最適化する方法を提供します。
  6. デバイスモード iPad、iPhone、Samsung Galaxyなど、よく知られているいくつかのAndroidやiOSモデルを含め、十数個のデバイスの1つに表示されるように、シミュレータのアクティブページをほぼ正確にレンダリングすることができます。特定の開発やテストのニーズに合わせて、カスタム画面解像度をエミュレートする機能も提供されています。トグルへ デバイスモード オン/オフを切り替えるには、 要素 タブ。
  7. 上記のタブの右端にある3つの縦に配置されたドットで表されるメニューボタンを最初にクリックして、開発者ツールのルックアンドフィールをカスタマイズすることもできます。このドロップダウンメニューから、ドックの位置を変更したり、さまざまなツールを表示または非表示にしたり、デバイスインスペクタなどのより高度な項目を起動することができます。あなたは、このセクションにある設定を使って、開発ツールのインターフェイス自体が高度にカスタマイズ可能であることがわかります。

Mozilla Firefox

FirefoxのWeb Developerセクションには、スタイルエディタやピクセルターゲティングのスポイトなど、デザイナー、開発者、およびテスターのためのツールが含まれています。

ライフワイヤー推奨読書：トップ25のGreasemonkeyとTampermonkeyユーザースクリプト

  1. 3つの水平線で表され、ブラウザウィンドウの右上にあるFirefoxのメインメニューボタンをクリックします。
  2. ドロップダウンメニューが表示されたら、ラベル付きのアイコンを選択します 開発者 。ザ ウェブ開発者 メニューが表示され、以下のオプションが表示されます。ほとんどのメニュー項目にはキーボードショートカットが関連付けられています。トグルツール： 通常、ブラウザウィンドウの下部に配置された開発者ツールインターフェイスを表示または非表示にします。キーボードショートカット：Mac OS X（ ALT（オプション）+ COMMAND + I ）、Windows（ CTRL + SHIFT + I )インスペクタ： リモートデバッグを使用して、アクティブなページだけでなくポータブルデバイス上のCSSおよびHTMLコードを検査および/または微調整することができます。キーボードショートカット：Mac OS X（ ALT（OPTION）+ COMMAND + C ）、Windows（ CTRL + SHIFT + C )Webコンソール： アクティブなページ内でJavaScript式を実行するだけでなく、セキュリティ警告、ネットワークリクエスト、CSSメッセージなど、さまざまなログデータを確認することができます。キーボードショートカット：Mac OS X（ ALT（OPTION）+ COMMAND + K ）、Windows（ CTRL + SHIFT + K )デバッガ： ザ JavaScriptデバッガ ブレークポイントの設定、DOMノードの検査、ブラックボックスの外部ソースなどを使って、欠陥を特定し修正することができます。その場合のように インスペクタ この機能はリモートデバッグもサポートしています。キーボードショートカット：Mac OS X（ ALT（OPTION）+ COMMAND + S ）、Windows（ CTRL + SHIFT + S） スタイルエディタ： 新しいスタイルシートを作成し、アクティブなWebページに組み込んだり、既存のシートを編集したり、ワンクリックで変更内容をブラウザでどのようにレンダリングするかをテストすることができます。キーボードショートカット：Mac OS X、Windows（ シフト+ F7 )パフォーマンス： アクティブなページのネットワークパフォーマンス、フレームレートデータ、JavaScriptの実行時間と状態、ペイントの点滅などの詳細を提供します。キーボードショートカット：Mac OS X、Windows（ シフト+ F5 )ネットワーク： ブラウザーによって開始された各ネットワーク要求と、対応するメソッド、元のドメイン、タイプ、サイズ、および経過時間をリストします。キーボードショートカット：Mac OS X（ ALT（OPTION）+ COMMAND + Q ）、Windows（ CTRL + SHIFT + Q )開発者ツールバー： 対話型のコマンドラインインタプリタを開きます。入る 助けて すべての利用可能なコマンドとそれらの適切な構文のリストをインタープリタに送ります。キーボードショートカット：Mac OS X、Windows（ シフト+ F2 )WebIDE： Firefox OSを実行している実際のデバイスまたはFirefox OS Simulator経由でWebアプリケーションを作成して実行する機能を提供します。キーボードショートカット：Mac OS X、Windows（ シフト+ F8 )ブラウザコンソール： と同じ機能を提供します Webコンソール （上記を参照）。ただし、返されるデータはすべて、アクティブなWebページだけでなく、Firefoxアプリケーション全体（拡張機能やブラウザレベルの機能を含む）用です。キーボードショートカット：Mac OS X（ SHIFT + COMMAND + J ）、Windows（ CTRL + SHIFT + J )レスポンシブなデザインビュー： さまざまな解像度、レイアウト、画面サイズでWebページを即座に表示し、タブレットやスマートフォンを含む複数のデバイスを模倣することができます。キーボードショートカット：Mac OS X（ ALT（OPTION）+ COMMAND + M ）、Windows（ CTRL + SHIFT + M )スポイト： 個別に選択されたピクセルの16進数のカラーコードを表示します。スクラッチパッド： FirefoxのポップアップウィンドウからJavaScriptコードのスニペットを作成、編集、統合、実行することができます。キーボードショートカット：Mac OS X、Windows（ シフト+ F4 )ページソース： 元のブラウザベースの開発者ツールで、このオプションはアクティブなページの使用可能なソースコードを表示するだけです。キーボードショートカット：Mac OS X（ COMMAND + U ）、Windows（ CTRL + U )その他のツールを入手する： 開く Web Developer's Toolbox FirebugやGreasemonkeyなどの人気のある拡張機能が12個ほど登場しているMozillaの公式のアドオンサイトに集められている。

Microsoft Edge / Internet Explorer

一般的には F12開発ツール IE11とMicrosoft Edgeの開発ツールセットは、非常に便利なモニター、デバッガ、エミュレータ、およびそのグループを提供して以来、長い道のりを歩んできました。 the-flyコンパイラ。

  1. クリックしてください その他のアクション ブラウザウィンドウの右上に3つの点で表示されるメニューがあります。ドロップダウンメニューが表示されたら、ラベル付きのオプションを選択します F12開発ツール 。すでに述べたように、あなたは F12 キーボードショートカット。
  2. 開発インタフェースがブラウザウィンドウの下部に表示されるようになりました。次のツールを利用でき、それぞれのタブの見出しをクリックするか付随するキーボードショートカットを使用してアクセスできます。DOM Explorer： アクティブなページでスタイルシートやHTMLを編集し、変更された結果を表示します。適用可能な場合、IntelliSense機能を使用してコードをオートコンプリートします。キーボードショートカット： （CTRL + 1） コンソール： カウンタ、タイマー、トレース、およびカスタマイズされたメッセージを含むデバッグ情報を統合API経由で送信する機能を提供します。また、アクティブなWebページにコードを挿入し、個々の変数に割り当てられた値をリアルタイムで変更することもできます。キーボードショートカット： （CTRL + 2） デバッガ： 必要に応じて、ブレークポイントを設定し、実行中にコードをデバッグすることができます。キーボードショートカット： （CTRL + 3） ネットワーク： プロトコルの詳細、コンテンツタイプ、帯域幅使用などを含む、ページのロードと実行中にブラウザによって開始された各ネットワーク要求を一覧表示します。キーボードショートカット： （CTRL + 4） パフォーマンス： フレームレート、CPU使用率、その他のパフォーマンス関連のメトリックを詳細に表示して、ページの読み込み時間やその他の作業を高速化します。キーボードショートカット： （CTRL + 5） メモリ： さまざまな時間間隔のスナップショットと一緒にメモリ使用量のタイムラインを表示することにより、現在のWebページで潜在的なメモリリークを分離して訂正するのに役立ちます。キーボードショートカット： （CTRL + 6） エミュレーション： スマートフォン、タブレット、その他のデバイスをエミュレートするさまざまな解像度と画面サイズでアクティブなページをどのように表示するかを示します。また、緯度と経度を入力することで、さまざまなジオロケーションをシミュレートするだけでなく、ユーザーエージェントとページの向きを変更することもできます。キーボードショートカット： （CTRL + 7）
  3. を表示するには コンソール 他のどのツールでも、開発ツールのインターフェイスの右上隅にある右のブラケットが付いた四角いボタンをクリックします。
  4. ドッキングを解除するには、デベロッパーツールのインターフェースが別のウィンドウになるように、2つのカスケード四角形で表されるボタンをクリックするか、次のキーボードショートカットを使用します。 CTRL + P 。ツールを元の場所に戻すには、 CTRL + P もう一度。

Apple Safari（OS Xのみ）

Safariの多様な開発ツールセットは、設計とプログラミングのニーズにMacを活用する大規模な開発者コミュニティを反映しています。強力なコンソールと従来のロギングとデバッグ機能に加えて、使いやすいレスポンスデザインモードと、独自のブラウザ拡張を作成するツールも用意されています。

  1. クリック サファリ あなたの画面の上部にあるブラウザーメニューにあります。ドロップダウンメニューが表示されたら、 設定 。このメニュー項目の代わりに、次のキーボードショートカットを使用することもできます。 COMMAND + COMMA（、）
  2. サファリ 設定 ブラウザウィンドウにオーバーレイされているはずです。クリックしてください 上級 アイコン、ヘッダーの右端にあります。
  3. ザ 上級 設定が表示されるはずです。この画面の下部には、 メニューバーに現像メニューを表示する チェックボックスが付いています。ボックスにチェックマークが表示されていない場合は、それを1回クリックしてそこに配置します。
  4. 閉じます 設定 左上隅にある赤色の「x」をクリックして、インターフェイスを選択します。
  5. ブラウザメニューに新しいオプションが追加されました。 開発する 、 ブックマーク そして 窓 。このメニュー項目をクリックします。ドロップダウンメニューが表示され、以下のオプションが表示されます。ページを開く： 現在Macにインストールされている他のブラウザのいずれかでアクティブなWebページを開くことができます。ユーザーエージェント： Chrome、Firefox、Internet Explorerのいくつかのバージョンを含む、あらかじめ定義されたユーザーエージェントの値を1つ以上選択したり、独自のカスタム文字列を定義したりできます。レスポンシブデザインモードに入る： 現在のページを、さまざまなデバイスやさまざまな画面解像度で表示するようにレンダリングします。ウェブインスペクタを表示： Safariの開発ツール用のメインインターフェイスを起動します。通常、ブラウザ画面の一番下にあり、以下のセクションが含まれています。 要素 , ネットワーク , リソース , タイムライン , デバッガ , ストレージ , コンソール .エラーコンソールを表示する： また、開発ツールのインターフェイスを直接起動します。 コンソール タブには、エラー、警告、およびその他の検索可能なログデータが表示されます。ページのソースを表示： 開く リソース タブでは、ドキュメントによって分類されたアクティブなページのソースコードが表示されます。ページリソースを表示する： と同じ機能を実行します。 ページソースを表示する オプション。スニペットエディタを表示： CSSとHTMLコードを入力して、その出力をオンザフライでプレビューできる新しいウィンドウを開きます。拡張機能ビルダーを表示： CSS、HTML、およびJavaScriptを使用してSafari拡張機能を作成または編集する機能を提供します。タイムライン録画を表示する： 開く タイムライン タブを開き、リアルタイムでネットワーク要求、レイアウト、レンダリング情報、JavaScript実行の表示を開始します。空のキャッシュ： 現在ハードドライブに保存されているキャッシュ全体を削除します。キャッシュを無効にする： キャッシュからSafariを停止し、各ページのロード時にすべてのコンテンツがサーバーから取得されるようにします。画像を無効にする： すべてのWebページで画像がレンダリングされないようにします。スタイルを無効にする： ページが読み込まれたときにCSSのプロパティを無視します。JavaScriptを無効にする： すべてのページでJavaScriptの実行を制限します。拡張機能を無効にする： インストールされているすべての拡張機能がブラウザ内で実行されないようにします。サイト固有のハッキングを無効にする： SafariがアクティブなWebページに固有の問題を明示的に処理するように変更されている場合、このオプションはこれらの変更をブロックして、これらの変更が導入される前のページを読み込むようにします。ローカルファイルの制限を無効にする： ブラウザがローカルディスク上のファイルにアクセスできるようにします。これはセキュリティ上の理由からデフォルトで制限されているアクションです。クロスオリジン制限を無効にする： これらの制限は、XSSおよびその他の潜在的な危険を防ぐためにデフォルトで適用されます。ただし、開発目的で一時的に無効にする必要があることがよくあります。スマート検索フィールドからのJavaScriptの許可： 有効にすると、URLを入力する機能が提供されます。 javascript： アドレスバーに直接組み込まれています。SHA-1証明書を安全でないものとして扱う： SHA-1アルゴリズムを使用したSSL証明書は、古くから脆弱であると広く考えられています。

エディターズチョイス