Chromeデベロッパーツールを使用してWordPressWebサイトを改善する方法

公開: 2015-07-06

chrome-dev-tools Chrome Developer Tools（DevTools）は、GoogleChrome用のすばらしいWebオーサリングおよびデバッグツールのセットです。 DevToolsは、Webページを構築する要素へのアクセスを提供します。 DevToolsを使用して、レイアウトの問題のトラブルシューティング、CSSの確認と変更、JavaScriptブレークポイントの設定、コードの最適化の検査などを行うことができます。 DevToolsは無料で、Chromeブラウザにすでに組み込まれています。つまり、Chromeをお持ちの場合は、すでにお持ちです。

この記事では、ツールとは何か、およびツールを使用してWordPressWebサイトを改善する方法の概要を説明します。

ツールを開く

ツールを開くには、いくつかの方法があります。

Chromeメニューを選択し、[ツール]を選択してから、[開発者ツール]を選択します。
画面上の任意の要素を右クリックして、[要素の検査]を選択します（私の好みの方法）。
Ctrl + Shift + I（PCの場合）| Cmd + Opt + I（Macの場合）

DevToolsウィンドウ

ツールウィンドウには2つのパネルがあります。どちらにも、一緒に使用できるツールが含まれています。ツールを見てみましょう。

最初のツールには8つのグループのツールが含まれています。ツールは次のとおりです。

要素
通信網
ソース
タイムライン
プロファイル
資力
監査
コンソール

2番目のセクションには次のものが含まれます。

スタイル
計算
イベントリスナー
DOM（ドキュメントオブジェクトモデル）ブレークポイント
プロパティ

ツールを表示する方法はいくつかあります。ウィンドウのサイズを変更して、スペースを空けることができます。画面の右側にウィンドウを再配置して、一方の側にツールを、もう一方の側にWebサイトを備えた分割画面を表示することもできます。

要素

このパネルには、ページのHTML要素を表すDOMツリーが表示され、任意の要素を検査または編集できます。 CSSの調整をリアルタイムで確認できます。

任意のパネルを開いたり折りたたんだりして、ノードをクリックすることで見やすくナビゲートしやすくすることができます（矢印または三角形のように見えます）。 DOMツリービューには、元のHTMLではなくツリーの現在の状態が表示されます（たとえば、JavaScriptによって変更されている可能性があります）。

ツリービューの要素にマウスを合わせると、Webページの要素が強調表示されます。フォントスタイル、画像サイズなどの情報が表示されます。

要素の1つをクリックすると、右側のウィンドウにCSSが表示されます。ここでは、スタイルを選択し、フォント、色、サイズ、余白、境界線、パディングなどを変更できます。

フッターにはブレッドクラムが表示されるので、必要に応じてバックトラックできます。要素をクリックして変更を入力するだけで、任意の要素を編集できます。 Enterキーを押すと、変更が行われていることがわかります。

要素1

たとえば、この画像の幅は現在600ピクセルです。幅を選択して新しい値を入力し、Enterキーを押します。

要素2

画像はすぐに新しいサイズに変わります。

フォントのスタイルを変更するには、フォントを選択し、右側のスタイルウィンドウで変更するフォントを選択します。

要素3

要素をドラッグして新しい場所にドロップし、ページのレイアウトを変更することもできます。

要素4

divをドラッグするだけで、最近のコメントを最近の投稿の上に移動します。

要素5

右クリックすると、新しい機能セットが表示されます。さまざまな要素の状態を確認したり、HTMLとして変更したり、ブレークを設定したり、CSSパスをコピーしたりできます。ノードを右クリックして削除することもできます。とても簡単で、ほとんど怖いです。

このツールを使用して、画像サイズを検索し、コードスニペットを検査しました。

通信網

ネットワークパネルには、Webサイトのどのリソースが要求されダウンロードされているかが表示されます。リアルタイムでグラフ化されます。ダウンロードに最も時間がかかる要素を確認することで、ページを最適化するために修正する必要のある問題についての洞察が得られます。

ウォーターフォールなど、さまざまなビューや種類のグラフをフィルタリングして表示できます。ネットワークアクティビティを記録して保存し、後で分析できるようにすることができます。

リソースの詳細を表示できます。詳細は次のとおりです。

HTTP要求および応答ヘッダー–これは、要求URL、HTTPメソッド、応答ステータスコードを表示し、HTTP応答および要求ヘッダーとその値、およびクエリ文字列パラメーターを一覧表示します。
リソースプレビュー–画像およびJSONリソースのプレビューを表示します。
HTTP応答–これはリソースのフォーマットされていないコンテンツを示します。
Cookieの名前と値–これは、リソースのHTTP要求および応答ヘッダーで送信されるCookieを示し、Cookieをクリアします。
WebSocketメッセージ–これは、WebSocket接続を介して送受信されるメッセージを示します。
リソースネットワークのタイミング–これは、リソースのロードに関係するネットワークフェーズに費やされた時間のグラフを示します。

ウォーターフォールビューは、リクエストの開始から要素の最後のバイトが配信されるまで、各要素の読み込みにかかる時間を確認するための優れた方法です。どの要素に最も時間がかかるかを確認することで、調整を行う場所をよりよく理解できます。

将来の分析のためにネットワークデータを保存できます。

ソース

ソースパネルを使用して、ロードされたページの一部であるJavaScriptやスクリプトなどのコードを表示およびデバッグできます。一時停止、再開、コードのステップ実行、および例外での一時停止を行うことができます。基本的なコード実行機能が含まれているため、ステップオーバー、ステップイン、ステップアウト、およびブレークポイントの切り替えを行うことができます。ブレークポイントを使用して、JavaScript、DOM更新、およびネットワーク呼び出しをデバッグできます。また、任意の式がtrueまたはfalseとして返される可能性のある条件付きブレークポイントを設定することもできます。条件が満たされた場合、ブレークポイントはコードを一時停止します。

縮小されたコードを読みやすくするかなりの印刷機能があります。これにより、ブレークポイントを配置する場所を簡単に確認できます。これが必要なように機能しない場合は、ソースマップと呼ばれるJSONベースのマッピング形式を使用できます。ソースマップは、この機能が組み込まれているミニファイアによって作成されます。

タイムライン

タイムラインパネルには、ページの読み込みと使用に費やされた時間が表示されます。タイムライン上のすべてのイベントをペイントしてプロットします。 JavaScript、スタイルの計算、再描画などのリソースが表示されます。イベントを記録し、段階的に分析することができます。 3つのモードがあります。

イベント–タイプ別に整理されたすべてのイベントのリスト。これにより、どのタスクに最も時間がかかるかがわかります。
フレーム–これは、Webサイトのレンダリングパフォーマンスの各フレームで実行する必要のある作業を示しています。たとえば、サイトが1秒あたり60フレームでレンダリングされる場合、1/60秒で行われた作業が表示されます。これには、スクリプトの読み込み、レイアウトのペイント、イベントの処理などが含まれます。これを使用して、ページ読み込みの異常なアクティビティを表示できます。
メモリ–これは時間の経過に伴うメモリ使用量をグラフ化します。メモリに保持されているすべてのドキュメント、ノード、およびイベントリスナーが表示されます。これは、メモリリークの原因を特定するのに役立ちます。

プロファイル

ここでは、Webページとアプリの実行時間とメモリ使用量をプロファイルできます。これにより、リソースが使用されている場所がわかります。これは、コードを最適化するための優れたツールです。

3つのプロファイルタイプを記録します。

JavaScript CPUプロファイルの収集–これはJavaScript関数の実行時間を示します。
ヒープスナップショットを取得–これはJavaScriptオブジェクトのメモリ使用量と分布を示します。
ヒープ割り当ての記録–これは、オブジェクトの割り当てを記録して、時間の経過に伴うメモリリークを示します。

資力

このパネルを使用して、リソースを検査できます。 IndexedDB、Web SQLデータベース、アプリキャッシュCookie、ローカルストレージとセッションストレージなどに関する情報が表示されます。フォント、画像、スタイルシートなどのビジュアルリソースを検査することもできます。

[ IndexedDB ]タブでは、IndexedDBデータベースとオブジェクトストアを検査し、レコードを表示および削除できます。

SQLコマンドを実行して、結果を表形式で表示できます。コマンドを入力すると、テーブル名、コマンド、および句のヒントが表示されます。

[ Cookie ]タブには、HTTPまたはJavaScriptによって作成されたCookieに関する情報が表示されます。個別に、またはグループで削除できます。

Chromeはアプリケーションリソースをキャッシュします。 [アプリケーションキャッシュ]タブでは、これらのリソースのステータスを表示できます。また、リソースのURL、リソースのタイプ、およびそのサイズも表示されます。

ローカルとセッション ストレージパネルでは、ストレージAPIで作成していたローカルおよびセッションのストレージキー/値のペアを表示、作成、削除、および編集できます。

監査

監査パネルは、ページの読み込み時にページを分析し、ページの読み込みを最適化するための修正を提案します。情報をネットワーク使用率とWebページパフォーマンスの2つのカテゴリに分類する2つの監査があります。両方の監査を実行することも、必要な監査だけを実行することもできます。ページの現在の状態で監査を実行するか、ページを再ロードしてロード時に監査することができます。

Google PageSpeed Insightsほど詳細には触れていませんが、手に負えない成果を修正するのに十分な情報を提供します。 PageSpeed Insightsを通過した後、私のページはまともな形になりましたが、Insightsが提供しなかった私のサイトに関する情報をいくつか提供してくれました。

コンソール

コンソールはデバッグに使用されます。診断のログ記録、コマンドの入力、JavaScriptの評価、JavaScriptプロファイルの作成などを行うことができます。コマンドラインからコンソールに情報を書き込むことができます。コマンドラインを使用すると、関数を使用してDOM内の要素を選択および検査し、イベントを監視し、プロファイラーを停止および開始できます。

デバイスモード

私のお気に入りの機能の1つは、デバイスモードです。メニューのElementsの左側にある小さなボタンでこれにアクセスできます。デバイスモードでは、23種類の人気のあるモバイルデバイス（Kindle Fire、複数のiPhone、複数のGalaxies、ラップトップなど）から選択して、そのデバイスでのWebサイトの外観と反応を確認できます。

画面をドラッグして、独自のカスタム画面サイズを作成することもできます。カーソルは指先を模倣しているため、画面は指と同じようにマウスと反応します。設定画面で独自のカスタムデバイスを作成することもできます。

ネットワークタイプ（3G、4G、Wi-Fiなど）を選択して、さまざまなネットワークと速度でサイトがどのように表示され、どのように反応するかを分析することもできます。

引き出し

画面の下部に引き出しがあります。これは、ツールバーの右側にある>_ボタンでオンとオフを切り替えることができます。引き出しには次のものが含まれます。

コンソール–コンソールコマンドライン。これにより、他のパネルを使用するときにコンソールを使用できるようになります。
検索–任意のソースを見つけます。大文字と小文字を無視して正規表現を検索することを選択できます。
エミュレーション–デバイスモードのツールと設定。加速度計やジオロケーション座標などの機能が含まれています。
レンダリング– fpsメーター、合成されたレイヤードボーダーなどのレンダリング機能を表示します。これの最も優れた点は、潜在的なボトルネックが表示されることです。

一部のパネルにはこれらのツールへのアクセスが含まれていないため、これらのツールを引き出しに入れると便利です。

最終的な考え

Chrome Developer Tools（DevTools）は、Webサイトの改善に役立つWebオーサリングおよびデバッグツールのすばらしいセットです。要素をすばやくドラッグアンドドロップして、サイトのレイアウトを変更したり、メモリリークのトラブルシューティングを行ったり、ページの読み込みの問題をトラブルシューティングしたり、事実上すべてのモバイルデバイスや画面サイズでWebサイトを表示したりできます。この概要は、これらのツールがいかに強力であるかということのほんの一部にすぎません。それについての最もよい事はそれがすでにグーグルクロームに組み込まれているのであなたが何もダウンロードする必要がないということです。

ご連絡をお待ちしております。 Chromeデベロッパーツールを使用していますか？ あなたの好きな機能は何ですか？ 何を一番使いますか？ ツールの使用に関するヒントはありますか？ コメント欄で教えてください。