知っておくとかなり便利！Chromeのデベロッパーツールであまり知られていない実用的な機能とテクニックのまとめ

Post on:2017年6月27日

Chromeのデベロッパーツールは、Web制作に欠かせないといっても過言ではありません。DOMインスペクター、スタイルパネル、JavaScriptコンソールなど基本的な機能だけでも便利ですが、さらに便利になる機能も数多くあります。

デベロッパーツールを使って、Webページやアプリの制作・デバッグのワークフローが大きく改善される実用的で便利な機能とテクニックを紹介します。

サイトのキャプチャ

Mastering Chrome Developer Tools: Next Level Front-End Development Techniques

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

01. ダークテーマ

Chromeのデベロッパーツールには、ダークテーマが用意されています。

デベロッパーツールのダークテーマ

デベロッパーツールのダークテーマ

使い方

  1. デベロッパーツールの右上の3つの点をクリックして、「Settings(F1)」を選択。
  2. 「Appearance」の「Theme」から、「Dark」を選択。

これでダーク系が見やすい人には、簡単にダークテーマを利用できます。

02. 要素をすばやく選択できる選択モード

デベロッパーツールでは、要素を選択するさまざまな方法が用意されています。中でも最も便利な方法は選択モードです。

選択モード

デベロッパーツールの選択モード

使い方

  1. デベロッパーツールの左上のアイコンをクリック、またはcommand+shift+Cで。
  2. 選択モードのアイコンがオンになったら、ページの要素を選択。

通常はコードを選択した際にページの要素がハイライトされますが、選択モードではページの要素をハイライトしてコードを確認できます。

このツールはページ上の要素をすばやく選択するのに最適です。
ページを開いてcommand+shift+Cを押すと、デベロッパーツールが開き、選択モードで利用できます。

03. グローバル変数として格納

コンソールに記録された複雑なオブジェクトを調べる時、キーがたくさんある場合や手動で解析するのが困難な値が含まれている場合は、複雑で時間がかかることがあります。
幸いなことに、ChromeではJavaScriptを使用してそのようなオブジェクトを簡単に調べることができます。

グローバル変数として格納

グローバル変数として格納

使い方

  1. Console内のオブジェクトを右クリック。
  2. 「Store as Global Variable」を選択。

オブジェクトを「temp1」というコンソールでアクセス可能なグローバル変数として保存します。この変数は、JavaScriptを使用して作業することができます。

04. アニメーション用のツール

最近のアップデートで、Chrome開発チームはアニメーション用の新しい機能を加えました。

アニメーション用のツール

アニメーション用のツール

使い方

  1. デベロッパーツールの右上の3つの点をクリックして、「Show console drawer」を選択（esc）。
  2. Console（console drawerパネル）の左の3つの点をクリック。
  3. 「Animations」を選択。

これでページ上のすべてのアニメーションの速度を制限できる「Animations」パネルが表示されます。

すべてのアニメーションを一時停止することもできます。これは動画コンテンツで賑やかなサイトで特に便利です。

アニメーションビューア

アニメーションビューア

アニメーションビューアでは、各プロパティのカーブを個別に制御できます。

CSSアニメーションコントローラ

CSSアニメーションコントローラ

要素のトランジションプロパティで紫色のカーブアイコンをクリックすると、アニメーションのモーションカーブを表示し、そのプロパティを微調整できます。さらに、矢印アイコンを使用してプリセットアニメーションのリストをスクロールし、エレメントに適用することもできます。

05. 要素の疑似状態をシミュレート

要素をスタイルする際にもう1つの便利なツールはエレメントステートシミュレーターです。これは、「スタイル」パネルの右上隅にある:hovアイコンをクリックしてアクセスします。

要素の疑似状態をシミュレート

要素の疑似状態をシミュレート

使い方

  1. 「Styles」パネルの右上にある「:hov」をクリック。
  2. 「Force element state」から選択。

このツールを使用すると、要素に:active, :hover, :focus, :visitedの擬似状態をシミュレートし、それらのセレクターに関連付けられたスタイルを表示できます。

:hoverをシミュレート

:hoverをシミュレート

これらの擬似状態のスタイルを追加するには新しいセレクタ（+アイコン付き）を追加し、セレクタ文字列の最後に疑似状態（:hoverなど）を追加します。

例えば、liで実装したロゴにホバーを追加するには、新しいセレクターli.logo:hoverを作成し、そこにスタイルを追加します。
次に、:hover要素の状態をチェックして要素のホバリングをシミュレートすることで、スタイルをテストすることができます。

06. 圧縮されたJavaScriptとCSSを読みやすくする

圧縮・難読化されたJavaScriptとCSSのデバッグは非常に困難です。しかし、デベロッパーツールにはこれらを読みやすくする機能を備えています。

圧縮されたJavaScriptとCSSを読みやすくする

圧縮されたJavaScriptとCSSを読みやすくする

使い方

  1. 「Sources」タブで圧縮されたファイルを開く。
  2. 左下にある「{}」アイコンをクリック。

「{}」アイコンは「Pretty Print」で、コードを読みやすくします。
この機能はCSSではまったく問題ありませんが、JavaScriptでは変数名などの情報は圧縮したプロセスで失われています。

07. 0.1単位でプロパティの値を調整

CSSをデバッグする時、プロパティを選択した際に矢印キーの上下を使ってその値を微調整することができます。

0.1単位でプロパティの値を調整

0.1単位でプロパティの値を調整

使い方

  1. 「Styles」パネルで調整するスタイルを指定。
  2. 矢印キーの上下は、1単位で変更。
  3. 矢印キー+altの上下は、0.1単位で変更。

0.1単位の変更はフォント周りの指定で特に便利です。
また、矢印キー+shiftの上下で、10単位で変更できます。

08. リフレッシュ時も継続してログを保存する

「Preserve log」はページをリフレッシュした際にもログを保持するための機能です。

リフレッシュしてもログを保存

リフレッシュしてもログを保存

使い方

  1. 「Console」パネルを開く。
  2. 「Preserve log」をチェック。

この機能はページのリフレッシュが必要なWebサイトの問題をデバッグする場合に便利です。通常はリフレッシュした時に、コンソールの出力がすべてクリアされてしまいます。

このオプションを有効にすると、新しいタイプの「Navigation」ログがコンソールに表示され、ページのリフレッシュやナビゲーションイベントが表示されます。

09. イベントの特定の種類だけをフィルタリング

多くのネットワークのリクエストやコンソールログを持つアプリケーションをデバッグする場合、イベントの特定の種類だけをフィルタリングすると便利です。

イベントの特定の種類だけをフィルタリング

イベントの特定の種類だけをフィルタリング

使い方

  1. 「Network」パネルを開く。
  2. 「Filter」にワイルドカード(*)を使用。

デベロッパーツールには、さまざまなプロパティをサポートするフィルタリング言語があり、ワイルドカード(*)などの演算子も利用できます。

「-」と入力すると、フィルタリングできるさまざまなプロパティが表示されます。また、「Regex」をチェックすると正規表現モードになり、各行に表示されているデータに対して正規表現でのマッチングを行うこともできます。

10. 使用されていないJavaScriptとCSSを見つける

コードカバレッジでは、Webアプリケーションを実行してから、JavaScriptとCSSファイルごとに実行したコードと実行しなかったコードを確認できます。
複雑なプロジェクトや長期的なプロジェクトで作業する場合、使用されていないコードを簡単に見つけることができるので便利です。

使用されていないJavaScriptとCSSを見つける

使用されていないJavaScriptとCSSを見つける

使い方

  1. これは、Chrome 59からサポートされている機能です。
  2. デベロッパーツールの右上の3つの点をクリックして、「Show console drawer」を選択（esc）。
  3. 「Coverrage」パネルを選択して、左上の丸アイコン（録音）をクリック。

完了するとセッション中に実行されたコードが表示され、使用されていないJavaScriptとCSSを見つけることができます。

11. 本番環境でのデバッグ

デベロッパーツールは自分のマシンでアプリを実行している場合にのみ機能します。しかし、本番環境でユーザーが体験するパフォーマンスやバグやの問題を確認しておくことに興味がある場合は、LogRocketを試してみてください。

サイトのキャプチャ

LogRocketはフロントエンドのログツールで、問題が自分のブラウザで発生したかのように再生できます。エラーが発生する理由を推測したり、ユーザーにスクリーンショットやログを要求する代わりに、LogRocketを使用するとセッションを再生して何がうまくいかなかったかを素早く理解できます。
これは、フレームワークに関係なく、どのアプリケーションでも完全に動作し、React、Angular、Vue.jsから追加のコンテキストを記録するためのプラグインを備えています。

ページ上のHTMLとCSSを記録し、単一ページのアプリケーションで最も複雑な動画さえ完全なピクセルで再生できます。

sponsors

top of page

©2024 coliss