Clever Geek Handbook

ChromeDevToolsを専門的に使用しています

またあったね。コース「JavaScriptDeveloper」の開始を見越して。プロフェッショナル」翻訳

Chromeを開発環境として使用する人のための11のヒント。









そのため、何らかの理由で、開発時にChromeに焦点を当てることにしました。開発者ツールを開き、コードのデバッグを開始します。







コンソールを開いてプログラムの出力を確認したり、[要素]タブを開いてDOM要素のCSSスタイルを確認したりすることがあります。







Chrome DevToolsは本当に得意ですか？実際、開発者ツールには、作業を楽にする多くの強力な機能がありますが、それらについて知っている人はほとんどいません。

最も便利なものについてお話します。



コマンドメニューから始めましょう。Chromeのコマンドメニューは、Linuxのコマンドシェルに似ています。その中に、Chromeを制御するコマンドを書くことができます。



Chrome開発者ツールを開きます。コマンドメニューにアクセスするには、次のホットキーを使用します。



  • Windows：Ctrl + Shift + P
  • macOS：Cmd + Shift + P


次のようなグラフィカルインターフェイスから開くこともできます







。この領域には、多くの便利な機能へのアクセスを提供するコマンドの長いリストが表示されます。







高度なスクリーンショット機能



画面の一部のスクリーンショットを頻繁に撮る必要がありますが、そのために便利なプログラムがコンピューターにインストールされていることは間違いありません。彼らはできますか：



  • ビューポート外のコンテンツを含む、ページ全体のスクリーンショットを撮りますか？
  • 単一のDOM要素のコンテンツを取得しますか？


これはしばしば必要ですが、スクリーンショットを作成するためのシステムツールのほとんどはこれらのタスクに対応していません。幸い、このようなスクリーンショットを撮るための専用のChromeコマンドがあります。



はい、どうぞ：



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


例



Mediumで最も人気のあるJavaScript記事（medium.com/tag/javascript）などのWebページを開きます。



コマンドメニューを開き、コマンドを実行しますScreenshot Capture full size screenshot。







現在のページ全体のスナップショットを撮りました。





元のスクリーンショットは高品質ですが、ここでは帯域幅を節約するために圧縮画像をアップロードしました。



DOM要素のスクリーンショットを撮りたい場合は、システムツールを使用できますが、要素を完全に正確にキャプチャすることはできません。Chromeには、このための専用コマンドがありますCapture node screenshot。



最初に[要素]タブを開き、目的の要素を選択します。次に、コマンドを実行します。







結果は次のとおりです。







コンソールでの最後の操作の結果を使用する



多くの場合、コンソールでコードをデバッグします。 JavaScriptで文字列を逆にする方法を知りたいとしましょう。インターネットで必要な情報を探していると、このコードに出くわします。 はい、このコードは行を逆にします。しかし、あなたはまだどのようにメソッドの動作クリアされていない、、そしてどのような結果は、それらのそれぞれを提供します。このコードは、次のように記述して段階的に実行でき ます。これで、各メソッドが返す値がわかりました。 しかし、なぜそんなに書くのですか？このような長い記録では間違いを犯しやすく、理解しにくいものです。秘密を教えてください。コンソールには、最後の操作の結果を格納する魔法の変数があります。



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









split()reverse()join()









$_







$_値が常にコンソールで実行された最後の操作の結果と等しい特別な変数です。このトリックにより、デバッグプロセスがはるかに簡単になります。







XHRリクエストを再送信



フロントエンドプロジェクトでは、サーバーからデータを受信するための要求を送信するためにXHRを使用する必要があることがよくあります。リクエストを再送する必要がある場合はどうなりますか？



経験の浅い開発者はページを更新しますが、これは非常に不便です。Chromeでは、[ネットワーク]タブから直接コードをデバッグできます。







  • [ネットワーク]タブを開きます。
  • XHRボタンを押します。
  • 再送信するXHRリクエストを選択します。
  • コンテキストメニューから[XHRの再生]を選択して、リクエストを再生します。


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







ページの読み込みステータスを追跡する



ページが完全に読み込まれるまでに10秒以上かかる場合があります。このような場合、ページの読み込みプロセスを個別に制御する必要があります。



Chrome DevToolsでは、Capture Screenshots[ネットワーク]タブの横にあるチェックボックスをオンにすることで、ページの読み込み中にページのスクリーンショットを撮ることができます。







スクリーンショットを選択して、対応するネットワーク要求に関する情報を表示します。この視覚化により、特定の時点でサーバーに送信されるネットワーク要求をよりよく理解できます。







変数のコピー



JavaScript変数の値をクリップボードにコピーする方法を知っていますか？

それは不可能な作業のように思えますが、Chromeはそれを解決するための特別な機能を提供しますcopy。







ECMAScriptには、コピー機能の定義は含まれていません。これはChrome機能です。JavaScript変数の値をクリップボードにコピーするために使用できます。



「data：」プレフィックスが付いたURIとして画像をコピーする



ページに画像を挿入する方法は2つあります。外部ファイルにリンクする方法と、データを使用して画像を埋め込む方法です。URL。



データ：URL（プレフィックス付きURL data:）は、小さなファイルをインライン要素としてドキュメントに埋め込むことができるスキームです。以前は「データ：URI」と呼ばれていましたが、WHATWGはその名前を削除しました。



小さな画像をデータに直接埋​​め込む：URLスキームにより、サーバーへのHTTPリクエストの数が減り、ページの読み込みが速くなります。

Chromeでこれを行うにはどうすればよいですか？



アニメーションを見る：







オブジェクトの配列をテーブルに出力する



オブジェクトの配列があるとしましょう： 



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






コンソールでそのような情報を認識することは困難です。また、配列が長く、より複雑な要素が含まれていると、迷子になりやすくなります。

幸い、Chromeにはオブジェクトの配列をテーブルに出力する機能があります。







それはあなたにとって、そして何度も役立つでしょう。



[要素]タブをドラッグします



ユーザーインターフェイスをテストするために、ページ上のいくつかのDOM要素を移動する必要がある場合があります。[要素]タブでは、コード内の任意の場所に任意のHTML要素をドラッグできます







。この例では、[要素]タブで要素をドラッグすると、Webページでのその位置も即座に変更されました。



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



$0 [要素]タブで選択された要素を含む別の魔法の変数です。







CSS疑似クラスのアクティブ化



疑似クラスを使用すると、ドキュメントツリー内の位置だけでなく、閲覧履歴（例：訪問済み）、コンテンツの状態（例：一部のフォームでチェック済み）、ポインタの位置などの外部要因に基づいて要素のスタイルを設定できます。マウス（たとえば、：hover pseudo- classは、要素にカーソルを合わせると要素のスタイルを変更します）。



1つの要素に対して複数の疑似クラスを記述できます。スタイルのテストを容易にするために、[要素]タブから直接疑似クラスをアクティブ化できます。







例



ページコードを見てください： 



<!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>


ブラウザでページを開き、[要素]タブで疑似クラスがどのように機能するかを確認し、必要に応じて変更を加えます。







アイテムを隠すためのホットキー



CSSスタイルをデバッグするとき、要素を非表示にする必要があることがよくあります。Chromeはこれをすばやく実行します。アイテムを選択してキーを押すだけですH。





キーボードのHを押す



この操作は、要素にスタイルを適用しますvisibility: hidden !important;。



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



コンソールでDOM要素をすばやく参照する場合は、次のように実行できます。



  • アイテムを一つ選べ。
  • マウスの右ボタンでコンテキストメニューを開きます。
  • グローバル変数として[ストア]を選択します。




More articles:


All Articles