Chrome開発者ツールの専門的な使用：13のヒント

本日公開する記事の著者は、ブラウザ開発者ツールを専門的に使用するためのヒントを共有したいと考えています。つまり、これらのヒントは、何らかの理由でGoogleChromeをメインブラウザにすることを決定したプログラマー向けに設計されています。

一般情報

Chrome開発者ツールを使用してコードをデバッグします。





開発者ツールを開くコマンド



コンソールパネルに移動して、コンソールの機能を使用してプログラムが出力するデータを調べる場合があります。[要素]パネルを見て、DOM要素のスタイル設定に使用されるCSSを確認することがあります。





コンソールパネル



しかし、Chrome開発者ツールをよく知っていますか？実際、生産性を大幅に向上させることができる強力な機能はたくさんありますが、あまり知られていない機能があります。



ここでは、あなたが役立つと思う最も便利な機能について説明します。

1.メニュー項目実行コマンド

まず、Runコマンドという開発者ツールのメニュー項目について簡単に説明します。Chromeのこのメニュー項目は、Linuxのシェルのようなものです。Chromeを制御するコマンドを入力できます。



このメニュー項目にアクセスするには、開発者ツールを開きます。その後、適切なキーボードショートカットをすぐに使用できます。

• Windowsの場合- Ctrl + Shift + P。
• MacOSでは- Cmd + Shift + P。

または、開発者ツールのヘッダー領域の右側にある3つのドットをクリックして、表示されるメニューから[コマンドの実行]を選択することもできます。





コマンドメニュー項目の実行



その後、コマンドパネルが開きます。ここには、多くの興味深いことを実行できる多くのコマンドがあります。





コマンドパネル



このパネルからのいくつかのコマンドについて話しましょう。

2.スクリーンショットを作成するための高度なメカニズム

Web開発者は、画面の一部のスクリーンショットを撮る必要がある場合があります。この問題を解決するための非常に便利なプログラムがすでにあると思います。スクリーンショットを撮るための典型的なタスクのいくつかを次に示します。

• ページ全体のスクリーンショットを撮ります。ブラウザウィンドウに表示されていない部分も含めます。
• 特定のDOM要素に固有の画面領域のコピーをキャプチャします。

これらは一般的なタスクですが、あらゆる種類のスクリーンショットソフトウェアで簡単に実行できるわけではありません。それらに対処するために、上記の実行コマンドメニューコマンドの機能を使用できます。特に、次のコマンドについて話します。

• スクリーンショットフルサイズのスクリーンショットをキャプチャ
• スクリーンショットキャプチャノードのスクリーンショット

▍例

最も人気のあるJavaScriptコンテンツの[中]セクション などのページを開きます。



コマンドバーを開き、その中のコマンドを選択しますScreenshot Capture full size screenshot。





ページ全体のスクリーンショットを撮るコマンドページ全体



のスクリーンショットがあり、ダウンロードフォルダーに移動します。





ページ全体のスクリーンショットご覧の



とおり、画像は非常に高くなっています。便宜上、ここでは減らしました。実際、これは高品質の画像です。



同様に、DOM要素のスクリーンショットを撮る必要がある場合は、サードパーティのプログラムを使用できますが、目的の要素に正確に関連する画像を取得することはできません。チームは私たちがこの問題を解決するのを手伝ってくれますScreenshot Capture node screenshot。



彼らはそれを次のように使用します：最初に、要素パネルで目的の要素を選択してから、コマンドを実行します。





特定のDOM要素に関連付けられた画面の領域のスクリーンショットをキャプチャする



これは、前のアニメーション画像で撮影したときのスクリーンショットの外観です。





DOM要素のスクリーンショット

3.コンソールで最後の操作の結果を参照する

コンソールは、コードのデバッグによく使用されます。JavaScriptを使用して文字列を逆にする方法を学ぶ必要があると想像してください。インターネットを検索して、次のコードを見つけました。

'abcde'.split('').reverse().join('')

このコードをコンソールで実行しようとしましたが、正しく機能しているようです。





コンソールでコードをチェックする



したがって、このコードは行を「回転」させます。しかし、あなたはどのようにについて混乱しているsplit()、reverse()およびメソッドの仕事join()。ラインを「反転」させる中間段階で、それらが正確に何を処理するかはわかりません。したがって、このコードをステップスルーすることにします。最初のメソッドから始めて、その結果を取得し、この結果に対して2番目のメソッドを実行します。





コードの探索



これらの実験を完了すると、元のコードがどのように機能するかを理解することができます。



しかし、このスタイルでの作業には、多くの不要なアクションが伴います。ここで間違いを犯す可能性があり、それはすべてかなり厄介に見えます。状況を改善するには、開発者ツールコンソール$_で、最後に実行された操作の結果を参照できる「マジック」変数を使用できることを知っておくだけで十分です。





$ _の使用



ご覧のとおり、$_これは特別な変数であり、その値は常にコンソールで実行された最後の操作の結果と等しくなります。この変数は、コードをデバッグするときに非常に役立ちます。





$ _の使用例

4.XHRリクエストの送信を繰り返します

フロントエンドプロジェクトで作業する場合、データを取得するためにバックエンドにリクエストを送信するためにXHRAPIを使用する必要があることがよくあります。すでに送信されたXHRリクエストを再送信する必要がある場合はどうなりますか？



初心者の開発者がこの問題を解決した場合、彼は単にページを更新します。ただし、リクエストを再送信するためにページを絶えず更新すると、時間がかかりすぎる可能性があります。実際、ネットワークパネルのツールを使用してクエリを操作できます。





XHR要求再試行コマンド



すでに送信されたXHR要求を再実行するには、次の手順に従います。

• ネットワークパネルを開きます。
• XHRボタンをクリックします。
• 繰り返すリクエストのコンテキストメニューを呼び出します。
• メニューから[XHRの再生]を選択します。

上記の手順のアニメーション例を次に示します。





XHRリクエストの再試行

5.ページの読み込みを監視する

このプロセスの最初から最後まで、ページが完全に読み込まれるまでに10秒以上かかる場合があります。ページの読み込み中に正確に何が起こるかを知るために、このプロセスの監視を整理できます。



Chrome開発者ツールでは、[ネットワーク]パネルの[スクリーンショットをキャプチャ]フラグを設定することで、読み込みのさまざまな時点でページのスクリーンショットを撮ることができます。





スクリーンショットのキャプチャフラグとページの読み込みの監視スクリーンショットを



クリックすると、対応する時点で実行されたリクエストを表示できます。ページの読み込みプロセスを視覚的に表現することで、ページの読み込みで何が起こっているかを以前よりも正確に理解できるようになります。





ページ負荷分析

6.JavaScript変数のコンテンツをコピーする

JavaScript変数の値をコピーして、後でその値を使用することはできますか？このような作業は不可能に思えるかもしれませんが、Chromeコンソールcopy()では、変数の内容をクリップボードにコピーできる特別なコマンドを使用できます。





JS変数コンテンツのコピー



この機能は、ECMAScript標準では使用できません。Chromeのおかげで利用できます。

7.画像をデータURLとしてコピーする

Webページに表示される画像を操作する方法は2つあります。最初の方法は、外部ソースから画像をロードすることです。 2つ目は、いわゆるデータURLの形式で画像をエンコードすることです。 MDNで、データURLが接頭辞：dataの付いたURLであることがわかります。このようなURLを使用すると、小さなファイルをドキュメントに直接埋め込むことができます。 WHATWGがその名前を削除するまで、これらは「データURI」と呼ばれていました。



小さな画像をデータURLとして変換し、それらをページコードに直接埋め込むと、ページの読み込み時に行う必要のあるHTTPリクエストの数が減ります。その結果、ページの読み込みを高速化できます。



Chromeを使用して画像をデータURLに変換するにはどうすればよいですか？



以下は、このプロセスのアニメーションデモです。





画像をデータURLとしてコピーする

8.オブジェクトの配列の便利な表現

オブジェクトの配列があると想像してください。たとえば-このように：

let users = [{name: 'Jon', age: 22},
  {name: 'bitfish', age: 30},
  {name: 'Alice', age: 33}]

コンソールに表示してみましょう。





コンソールに表示されるオブジェクトの配列



ご覧のとおり、この形式で表示されているときに表示するのはあまり便利ではありません。そして、そのような配列がより長く、それに含まれる要素がより複雑な構造を持っている場合、それを扱うことはさらに困難になります。



幸いなことに、Chromeには、table()オブジェクトの配列をフォーマットできる特別な機能があります。





オブジェクトのフォーマットされた配列



この関数は、多くの場合非常に便利です。

9.要素パネルでオブジェクトをドラッグします

場合によっては、インターフェイスのテスト中に、ページの一部のDOM要素の位置を変更する必要があります。これを行うために、ページコード内の任意のHTML要素を移動する要素パネルの機能を使用できます。





要素



のドラッグ上記のアニメーションは<div>、要素パネルで要素をドラッグして、Webページ上のその要素の位置を変更する方法を示しています。

10.コンソールから現在選択されているアイテムを参照する

コンソールで使用できるもう1つの「魔法の」変数について話しましょう。これは変数です$0。これにより、コンソールから[要素]パネルで強調表示されている要素にアクセスできます。





$ 0の要素を参照する

11.疑似クラスの調査

でMDN、次の程度の擬似クラスを学ぶことができます：



擬似クラスは、スタイルに能力を提供（例：訪問）などの訪問の歴史などの外部要因に基づいてもいないだけでDOMツリー内の関係に基づいて要素が、、などのコンテンツの状態（：いくつかの要素で確認形状）またはマウスカーソルの位置（例：ホバーは、マウスカーソルが要素の上にあるかどうかを決定します）。



要素には、さまざまな疑似クラスに関連するスタイルを提供できます。これらのスタイルをテストするために、疑似クラスを要素パネルから直接操作できます。





疑似クラスの管理

▍例

Webページのコードは次のとおりです。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body{
      font-size: 150px;
    }

    div:hover{
      color: red;
    }
    div:active{
      color: blue;
    }
    div:focus{
      color: brown;
    }
  </style>
</head>
<body>
  <div>hello world</div>
</body>
</html>

疑似クラスのスタイルを確認する必要があります。これを行うには、要素パネルを使用できます。





疑似クラススタイルの調査

12.クイック非表示要素

ページスタイルをデバッグするとき、多くの場合、要素を非表示にする必要があります。これをできるだけ早く行うには、要素を選択してキーボードのキーを押すだけHです。





要素をすばやく非表示



これvisibility: hidden !important;により、対応する要素にスタイルが追加されます。

13.DOM要素への参照を一時グローバル変数に保存する

コンソールでDOM要素への参照をすばやく取得する必要がある場合は、次の一連のアクションを実行できます。

• アイテムを一つ選べ。
• それを右クリックして、コンテキストメニューを表示します。
• メニューから[グローバル変数として保存]コマンドを選択します。

DOM要素参照を一時的なグローバル変数として保存する



Chrome開発者ツールのあまり知られていない機能のうち、使用しているものは何ですか。