Chrome開発ツールのマスター：次世代フロントエンド開発テクニック
Chromeデベロッパーツールの基本機能（DOMインスペクタ、スタイルパネル、JavaScriptコンソール）にはすでに慣れているかもしれません。しかし、あまり知られていない多くの機能があり、デバッグやアプリの作成ワークフローを大幅に改善することができます。
暗いテーマ
Chromeには、開発ツール用の暗いテーマが組み込まれています。これを有効にするには、開発ツールペインの右上にある3つの点のアイコンをクリックし、「設定」をクリックしてテーマを切り替えます。
私は時にはこれを私の目でより簡単に見つけることができます。そして明らかに、それはもっとクーラーに見えます:)
選択モード
Chromeデベロッパーツール（DevTools）では、要素を選択するさまざまな方法が用意されています。その中で最も便利なものは選択モードです。
このツールは、開発ツールパネル（またはcmd + shift + c）の左上隅にあるマウスアイコンを押すことで起動され、ページ上の要素をクリックするだけで選択できます。
アクティブになったら、マウスをページの周りに移動して選択をプレビューし、次にクリックして検査する要素を選択することができます。
このツールは、ページ上の要素をすばやく選択するのに最適です。cmd + shift + cを押すと開発ツールが開き、選択モードにまっすぐ進みます。
グローバル変数として格納
コンソールに記録された複雑なオブジェクトを検査すると、キーが多数ある場合や、手動で解析するのが難しい値が含まれている場合は、複雑な場合があります。幸いなことに、ChromeではJavaScriptを使用してそのようなオブジェクトを簡単に検査できます。
これを行うには、コンソール内のオブジェクトを右クリックし、「グローバル変数として保存」を押します。これは、コンソールtemp1でアクセス可能なグローバル変数としてオブジェクトを保存します。この変数は、JavaScript を使用して作業することができます。
アニメーションツール
最近、Chromeチームは、デバッグやアニメーションの作成にいくつかの新機能を追加しました。
コンソールの左上隅のドロップダウンをクリックすると、サイト上のすべてのアニメーションの速度を制限できる「アニメーション」枠が表示されます。
すべてのアニメーションを一時停止することもできます。これはアニメーション化されたコンテンツで賑やかなサイトにとって特に便利です。
要素のtransitionプロパティで紫色のカーブアイコンをクリックすると、アニメーションのモーションカーブを表示し、そのプロパティを微調整できます。また、矢印アイコンを使用してプリセットアニメーションのリストをスクロールして、エレメントに適用することもできます。
要素疑似状態のシミュレーション
エレメントをスタイリングするためのもう1つの便利なツールは、エレメント・ステート・シミュレーターです。エレメント・ステート・シミュレーター:hovは、「スタイル」パネルの右上隅にあるアイコンをクリックしてアクセスし ます。
このツールを使用すると、ホバー、アクティブ、フォーカス、および訪問の要素擬似状態をシミュレートし、それらのセレクターに関連付けられたスタイルを表示できます。
これらの擬似状態のスタイルを追加するには、新しいセレクター（+アイコン付き）を追加:<state>し、セレクター文字列の最後に追加 します。
たとえば、liwithクラスにホバールールを追加し、logo新しいセレクタを作成し、li.logo:hoverそこにスタイルを追加します。
:hoverエレメントの状態をチェックしてエレメントのホバーリングをシミュレートすることで、スタイルをテストでき ます。
CSSとJavaScriptをあてる
縮小されたJavaScriptとCSSのデバッグや表示は非常に困難です。しかし、幸運にもDevToolsはこれをやや簡単にするツールを提供しています。
[Sources]タブで縮小されたファイルを開いた後、ファイルの左下隅にある角括弧のロゴをクリックすると、DevToolsはコードを「優先」します。
これはCSSファイルではうまく機能し、JavaScriptを使ってうまくいっていますが、変数名などの一部の情報は縮小プロセスで失われます。
Alt +上/ Alt +下
CSSをデバッグするときは、プロパティを選択して上下のキーを使って値を微調整することができます。デフォルトでは、矢印キーは+/-で値を調整し1ます。ただし、altキーを押し0.1続けると、矢印キーを使用して段階的に細かく値を調整できます。これは小数点以下の値を扱うときに特に便利です。
逆に、をホールドするshiftと、のステップで値を調整でき10ます。
ログを保持する
ログの保存は、ページの更新と更新の間でログを維持するためのチェックボックスです。これは、ページの更新が必要なWebサイトの問題をデバッグする場合に便利です。これは、コンソールの出力がすべてクリアされるためです。
このオプションを有効にすると、新しいタイプの「ナビゲーション」ログがコンソールに表示され、ページの更新やナビゲーションイベントが別のページに表示されます。
ネットワーク+ログフィルタ
多くのネットワーク要求やコンソールログを持つアプリケーションをデバッグする場合、特定の種類のイベントをフィルタリングすると便利です。
Chromeには、さまざまなプロパティをサポートするフィルタリング言語と、*ワイルドカードマッチを行うような演算子があります。
「 - 」と入力すると、フィルタリングできるさまざまなプロパティを示す先読みがChromeによって表示されます。また、 "regex"モードを切り替えて、各行に表示されているデータに対して正規表現マッチを実行することもできます。
コードカバレッジ
コードカバレッジを使用すると、Webアプリケーションを実行し、JavaScriptとCSSファイルごとに、実行したコード行と実行しなかったコード行を確認できます。これは、複雑なプロジェクトや長期的なプロジェクトで作業する場合、デッドコードを簡単に蓄積できるので便利です。
それを使用するには、Chrome 59以上がインストールされていることを確認し、[カバレッジ]タブに移動します。"レコード"を押し、あなたのアプリの使用を開始します。完了すると、Chromeはセッション中に実行されたコードを正確に表示します。
プロダクションでのデバッグの問題
DevToolsは、自分のマシンでアプリケーションを実行している場合にのみ機能します。あなたは、ユーザーが生産に見バグやパフォーマンスの問題を理解することに興味があるなら、試してくださいLogRocketを。
LogRocketはフロントエンドのログツールで、問題が自分のブラウザで発生したかのように再生できます。なぜエラーが発生するのかを推測するのではなく、スクリーンショットとログダンプをユーザに要求する代わりに、LogRocketはセッションを再生して何がうまくいかなかったかを素早く理解することができます。これは、フレームワークに関係なく、どのアプリケーションとも完全に動作し、React、Angular、Vue.jsから追加のコンテキストを記録するためのプラグインを備えています。
LogRocketは、コンソールログ、ヘッダ+ボディ、ブラウザメタデータ、Reduxアクション/状態、およびパフォーマンスのタイミングを含むネットワーク要求/応答を記録するためにアプリケーションを計測します。また、ページ上にHTMLとCSSを記録し、最も複雑な単一ページアプリケーションのピクセル完全なビデオを再現します。
ここでLogRocketをチェックアウトすることができます。
