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

Webデザイナー、開発者、およびテスター向けの統合ツールセット

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

Mozilla Firefox

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

推奨読書： トップ25のGreasemonkeyとTampermonkeyユーザースクリプト

1. 3つの水平線で表され、ブラウザウィンドウの右上にあるFirefoxのメインメニューボタンをクリックします。
2. ドロップダウンメニューが表示されたら、 Developerというラベルのアイコンを選択します。 Web Developerメニューが表示され、以下のオプションが表示されます。 ほとんどのメニュー項目にはキーボードショートカットが関連付けられています。
   トグルツール：通常はブラウザウィンドウの下部に配置された開発者ツールインターフェイスを表示または非表示にします。 キーボードショートカット：Mac OS X（ ALT（OPTION）+ 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ノードの検査、ブラックボックスの外部ソースの検査など、さまざまな欠陥の特定と修正を行うことができます。 Inspectorの場合と同様に、この機能はリモートデバッグもサポートしています。 キーボードショートカット：Mac OS X（ ALT（OPTION）+ COMMAND + S ）、Windows（ CTRL + SHIFT + S）
   スタイルエディタ：新しいスタイルシートを作成し、アクティブなWebページに組み込んだり、既存のシートを編集したり、ワンクリックで変更内容をブラウザでどのようにレンダリングするかをテストすることができます。 キーボードショートカット：Mac OS X、Windows（ Shift + F7 ）
   パフォーマンス：アクティブなページのネットワークパフォーマンス、フレームレートデータ、JavaScriptの実行時間と状態、ペイントの点滅などの詳細を提供します。 キーボードショートカット：Mac OS X、Windows（ Shift + F5 ）
   ネットワーク：対応するメソッド、元のドメイン、タイプ、サイズ、および経過時間とともに、ブラウザによって開始された各ネットワーク要求をリストします。 キーボードショートカット：Mac OS X（ ALT（OPTION）+ COMMAND + Q ）、Windows（ CTRL + SHIFT + Q ）
   開発者ツールバー：インタラクティブコマンドラインインタプリタを開きます。 使用可能なすべてのコマンドとその適切な構文のリストについては、インタープリタにヘルプを入力してください。 キーボードショートカット：Mac OS X、Windows（ Shift + F2 ）
   WebIDE： Firefox OSを実行している実際のデバイスまたはFirefox OS Simulator経由でWebアプリケーションを作成して実行する機能を提供します。 キーボードショートカット：Mac OS X、Windows（ Shift + 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進数のカラーコードを表示します。
   Scratchpad ： FirefoxのポップアップウィンドウからJavaScriptコードのスニペットを作成、編集、統合、実行できます。 キーボードショートカット：Mac OS X、Windows（ SHIFT + F4 ）
   ページソース：元のブラウザベースの開発者ツールで、このオプションはアクティブなページのソースコードを表示するだけです。 キーボードショートカット：Mac OS X（ COMMAND + U ）、Windows（ CTRL + U ）
   その他のツールを入手する： Mozillaの公式のアドオンサイトにWeb DeveloperのToolboxコレクションを開き、FirebugやGreasemonkeyなどの人気のある拡張機能が12個ほど表示されます。

Microsoft Edge / Internet Explorer

IE11とMicrosoft Edgeの開発ツールセットであるInternet Explorerの以前のバージョンからインターフェイスを開始したキーボードショートカットの敬意を表しているF12開発ツールは、始めから非常に便利なグループを提供してきました。モニタ、デバッガ、エミュレータ、およびオンザフライのコンパイラが含まれます。

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