Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
550
Help us understand the problem. What is going on with this article?
@baby-degu

シニアフロントエンド開発者みたいにChromeデベロッパーツールを使おう

本記事は、bytefish氏による「Use Chrome DevTools Like a Senior Frontend Developer」(2020年7月21日公開)の和訳を、著者の許可を得て掲載しているものです。

シニアフロントエンド開発者みたいにChromeデベロッパーツールを使おう

開発環境にChromeを選ぶなら知っておきたい12のテクニック

Image for post

Photo by Morning Brew on Unsplash

さて、何らかの理由で、開発ブラウザとしてChromeを選んだとします。次は、デベロッパーツールを開き、コードのデバッグを開始します。

Image for post

Consoleパネルを開いてプログラムの出力を確認したり、Elementsパネルを開いてDOM要素のCSSコードを確認したりします。

Image for post

でも、Chromeデベロッパーツールを本当に理解していますか?実は、パワフルだけど知られていない機能がたくさん用意されていて、開発効率を大幅に改善できるのです。

ここでは、最も便利な機能を紹介します。お役に立てたら嬉しいです。

ChromeのCommandメニューから始めましょう。ChromeのCommandメニューは、LinuxのShellのようなものです。コマンドを入力してChromeを操作できます。

まず、Chromeデベロッパーツールを開き、次のショートカットでCommandメニューを開きます。

  • windows:Ctrl + Shift + P
  • macOS:Cmd + Shift + P

または、次のボタンをクリックして開くこともできます。

Image for post

次に、Commandパネルに移動します。さまざまなコマンドで、さまざまなパワフルな機能を実行できます。

Image for post

1. パワフルなスクリーンショットを撮る。

画面のキャプチャは日常的によく必要になるものなので、使っているコンピュータにとても便利なスクリーンショットソフトがもうあるでしょう。でも、次のようなことはできますか?

  • ビジュアルウィンドウに表示されていないものも含めて、ウェブページ上のすべてのスクリーンショットを撮る。
  • DOM要素のコンテンツを正確にキャプチャする。

この2つは日常的によく必要になるものですが、OS付属のスクリーンショットツールでは簡単に対応できません。このような場合、コマンドを使えばできます。

対応するコマンドは次の通りです。

  • Screenshot Capture full size screenshot
  • Screenshot Capture node screenshot

任意のウェブページを開きます。例えば、MediumのJavaScriptトップストーリーページなど。https://medium.com/tag/javascript

Commandメニューを開き、Screenshot Capture full size screenshotを実行します。

Image for post

すると、現在のページのフルスクリーンショットを撮ることができます。

Image for post

上のオリジナル画像はとても鮮明ですが、ここではトラフィックの節約のため圧縮画像をアップロードしています。

同様に、DOM要素のスクリーンショットを撮りたい場合、システム独自のスクリーンショットツールを使うことができますが、要素を正確にキャプチャすることはできません。このような場合、Capture node screenshotを使えばできます。

まず、Elementsパネルで要素を選択してから、コマンドを実行します。

Image for post

これが正確なスクリーンショットの結果です。

Image for post

2. 最後の操作結果をConsoleで参照する。

Consoleでのコードデバッグはよく必要になります。例えば、JavaScriptで文字列を逆順にする方法を知りたい時に、関連情報をウェブで検索して、次のコード行を見つけたとします。

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

Image for post

上のコードは文字列を逆順にしています。でも、split() reverse() join()メソッドが何をするのか、この中間ステップの実行結果をまだ理解していません。そこで、上のコードを段階的に実行したいなら、次のように記述します。

Image for post

このステップを経て、実行した各メソッドの戻り値が分かりました。

でも、これでは冗長です。エラーが発生しやすく、理解しにくいです。実はConsoleでは、魔法の変数$_を使って、前の操作の結果を参照できます。

Image for post

$_は特別な変数で、値は常にConsoleの最後の操作の結果と等しくなります。このテクニックは、コードをデバッグするのに便利です。

Image for post

3. XHRリクエストを再送する。

フロントエンドプロジェクトでは、データを取得するためによくXHRを使ってバックエンドにリクエストします。もし、XHRリクエストを再送したい時はどうしますか?

初心者ならページを更新するかもしれませんが、これは面倒です。実は、Networkパネルで直接デバッグできるのです。

Image for post

  1. Networkパネルを開く。
  2. XHRボタンをクリックする。
  3. 再送したいXHRリクエストを選ぶ。
  4. XHRを再生する。

Image for post

4. ページの読み込み状況を監視する。

ページが最初から完全に読み込まれるまでに、10秒以上かかることがあります。このような場合、さまざまな時間帯でページの読み込み状況を監視する必要があります。

Chromeデベロッパーツールでは、NetworkパネルのCapture Screenshotsを使って、ページ読み込み中のスクリーンショットをキャプチャできます。

Image for post

各スクリーンショットをクリックすると、対応する時間のネットワーク要求が表示されます。このように視覚的に表示することで、どのネットワーク要求が常に発生しているかをより正確に把握できます。

Image for post

5. 変数をコピーする。

JavaScriptの変数の値を別の場所にコピーできますか?

これは不可能なことに思えるかもしれませんが、Chromeには、変数をコピーするためのcopyという関数があります。

Image for post

copy関数は、ECMAScriptでは定義されていませんが、Chromeでは提供されています。この関数を使えば、JavaScriptの変数の値をクリップボードにコピーできます。

6. 画像をData URIとしてコピーする。

ページ上の画像を処理する方法には2つあります。外部リソースリンクで読み込む方法と、画像をData URLにエンコードする方法です。

Data URLとは、URLの前にdata:スキームをつけたもので、コンテンツ制作者が小さなファイルを文書の中にインラインで埋め込むことができるものです。以前は「data URI」と呼ばれていましたが、WHATWGがその名称を廃止しました。

小さな画像をデータURLにコーディングし、コードに直接埋め込むことで、ページが必要とするHTTPリクエストの数が減り、ページの読み込みが速くなります。

Chromeでは、どのように画像をデータURLにするのでしょうか?

Image for post

7. オブジェクトの配列を表形式にする。

次のようなオブジェクトの配列があるとします。

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

Image for post

このような配列をコンソールで表示するのは簡単ではありません。配列が長く、要素が複雑になると、さらに理解しにくくなります。

幸いChromeにはオブジェクトの配列を表形式にするtable関数が用意されています。

Image for post

多くの場合、この関数はとても便利です。

8. Elementsパネルでドラッグ&ドロップする。

UI テストのために、ページ上の特定の DOM要素の位置を調整したいことがあります。Elementsパネルでは、任意のHTML要素をドラッグ&ドロップして、ページ上の位置を変更できます。

Image for post

上の git では、Elementsパネルで divの位置をドラッグすると、ウェブページ上の位置が同期して変更されています。

9. 現在選択されている要素をConsoleで参照する。

$0は、Elementsパネルで現在選択されている要素を参照する、もう1つの魔法の変数です。

Image for post

10. CSS疑似クラスをトリガーする。

擬似クラスを使用すると、ドキュメントツリーのコンテンツに関して要素にスタイルを適用するだけでなく、ナビゲータの履歴(:visitedなど)、コンテンツの状態(特定のフォーム要素の:checkedなど)、マウスの位置(マウスが要素の上にあるかが分かる:hoverなど)のような外部要因に関してスタイルを適用できます。

1つの要素に対して複数の擬似クラスを記述することがあります。スタイルのテストを簡単にするため、Elementsパネルで直接これらのスタイルをトリガーできます。

Image for post

あるウェブページです。

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

rawhover.html

次にブラウザで開き、Elementsパネルから擬似クラスのスタイルをデバッグします。

Image for post

11. ショートカットで要素を非表示にする。

CSSスタイルをデバッグする時に、要素を非表示にしたいことがよくあります。要素を選択してキーボードのHキーを押すと、要素を素早く非表示にできます。

Image for post

キーボードのHを押す。

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

12. DOM要素をグローバル一時変数に格納する。

ConsoleでDOM要素を素早く参照したい場合は、次のようにします。

  1. Elementsを選択する。
  2. マウスを右クリックする。
  3. グローバル変数として保存する。

Image for post

関連記事

シニア開発者みたいにVSCodeを使おう
コードエディタにVSCodeを選ぶなら知っておきたい5のテクニック
levelup.gitconnected.com

翻訳協力

この記事は以下の方々のご協力により公開する事ができました。改めて感謝致します。

Original Author: bytefish
Original Article: Use Chrome DevTools Like a Senior Frontend Developer
Thank you for letting us share your knowledge!

選定担当: @gracen
翻訳担当: @gracen
監査担当: -
公開担当: @gracen

ご意見・ご感想をお待ちしております

今回の記事はいかがでしたか?
・こういう記事が読みたい
・こういうところが良かった
・こうした方が良いのではないか
などなど、率直なご意見を募集しております。
頂いたお声は、今後の記事の質向上に役立たせて頂きますので、お気軽に
コメント欄にてご投稿ください。Twitterでもご意見を受け付けております。
皆様のメッセージをお待ちしております。

550
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
baby-degu
We introduce high quality articles in Japanese.
babydegu
Maximizing the Goodness in everyone

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
550
Help us understand the problem. What is going on with this article?