今すぐChromeデベロッパーツールの使用を開始する必要がある理由

Webサイトのテストに役立つ便利なツールのセットを用意することは、開発者にとって不可欠です。 それらを保管するのに最適な場所はどこですか？ もちろん、ブラウザでは！ Googleの人気のあるウェブブラウザであるChromeには、開発者ツールが組み込まれています。これは、ウェブオーサリングとデバッグ用に作成されたツールのセットです。 Chromeデベロッパーツール（DevToolsと呼ばれます）を使用すると、デベロッパーはウェブブラウザとウェブアプリの内部動作にアクセスできます。

Chrome DevToolsを使用すると、使用されているスタイル、画像のサイズ、使用されているスクリプトなどを知ることができます。デバッグして、ページに存在するエラーを知ることができます。 スタイルのオンとオフを切り替えたり、スタイルを完全に変更したりして、Webサイトにどのような影響があるかを確認することもできます。

それはあなたのブラウザにあります

ツール自体は簡単に入手できます。 それらを開く3つの方法は次のとおりです。

1. Chromeブラウザで– Chromeメニュー（右上隅にある3本の水平バー）を選択し、[その他のツール]を選択してから、[開発者ツール]を選択します。
2. 任意のページの要素を右クリックして、[要素の検査]を選択します。
3. Windowsのキーボードで、ctrl + shift + iを選択します。 Macでは、cmnd + opt + iを選択します。

これらのいずれかを使用すると、ブラウザの下部にあるDevToolsウィンドウが開きます。

プライマリウィンドウ

画面の下部にツールが表示されます。 上部にメニューがあり、デフォルトのビューとして要素があるプライマリウィンドウと、デフォルトの選択としてメニューとスタイルがあるセカンダリウィンドウが表示されます。

ツールはタスクにグループ化されています。 要素、ネットワーク、ソース、タイムライン、プロファイル、リソース、監査、およびコンソールを含む8つのグループがあります。

要素

ここで、ページのHTML構造を確認できます。 HTMLと本文の下部にトグルがあります。 要素のいずれかにマウスを合わせると、各要素の詳細情報が表示されます。

矢印をクリックして、主要な要素の内容を開いたり閉じたりして、読みやすくすることができます。 したがって、本文を閉じてヘッダーを読んだり、ヘッダー内の要素を選択して表示したりすることができます。これは、WebサイトのHTMLを表示するための優れたツールです。

通信網

これは、ロードされる各要素、それらがどのようにロードされるか、ファイルのタイプ、ファイルのサイズ、ロードにかかる時間、およびページロードシーケンス内でいつロードされるかのタイムラインを示します。 これは、ページ読み込みのボトルネックや不正なリクエストなどのネットワークの問題のトラブルシューティングに使用できます。

たとえば、404エラーが多数表示される場合は、問題が何であるかを詳しく調べることができます。 まだトラフィックが多いページを削除したか、誰かがリンクを間違って入力した可能性があります。

ソース

これは、ロードされるスクリプトとスニペット、およびそれらがどこから来ているかを示しています。

タイムライン

これは、各リソースがロードされる時間を示します。 最も時間がかかるものを確認できます。これは、ページの読み込みを減らすのに役立ちます。

プロファイル

これは、各要素のメモリ使用量を示しています。 これは、最適化する必要のあるコードを示すのに最適です。

資力

ここでは、ロードされているリソースを検査できます。 Cookie、アプリケーションキャッシュ、HTML5データベースなどを確認できます。

監査

これにより、ページを分析できます。 ロード後またはロード時に監査できます。

現在の状態を監査する

まず、現在の状態の監査を実行することを選択しました。 これにより、サイトが現在存在し、ブラウザにすでに読み込まれているときに監査が実行されます。

アイテムのリストが表示され、重要度に応じて色が付けられ、問題の数が表示されます。 それらをクリックすると詳細が表示されます。

それぞれの詳細情報を表示するために、それらのいくつかを拡張しました。 ネットワーク使用率とWebページのパフォーマンスに関する情報を提供します。 問題を修正する方法についてアドバイスをくれ、優先順位を付けてくれます。

ページの再読み込みと読み込み時の監査

私は戻って、負荷の監査を選択しました。 結果は似ていますが、予想どおり、ページの読み込み後よりもページの読み込みに関する問題が多くなります。

2つの間で、JavaScript、ブラウザキャッシュ、プロキシキャッシュ、Cookieサイズ、Cookieなしのドメインからのコンテンツの提供、画像のサイズ、スクリプトの順序とスタイル、ドキュメントヘッドへのCSSの配置、未使用のCSSルールの削除、通常のCSSの使用に関する情報を取得します。プロパティ名。 もちろん、結果はサイトによって異なります。

情報はPageSpeedInsightsほど詳細ではありませんが、始めるには十分であり、とにかく使用しているツールに組み込まれているという便利さが気に入っています。 サイトに変更を加えるたびに実行することをお勧めします。 使いやすくて使わない。

コンソール

これは、ページとアプリをテストできるJavaScriptコンソールです。 スクリプトをデバッグして、どのような変更を加えるかについてアドバイスを得ることができます。 コンソールでは、Webページを操作できるようにコマンドを入力できます。 デバッグに役立つ診断情報をログに記録します。 メイン画面またはドロワー（メイン画面の下のウィンドウ）で使用できます。

コンソールまたはコマンドラインAPIを使用できます。 コンソールへの書き込み、要素とスタイル出力のフォーマット、実行時間または読み込み時間の測定、タイムラインの表示とマーク付け、ステートメントのカウント、ブレークポイントの設定、式の評価、イベントの監視、メッセージのスタック、エラーと警告の表示などを行うことができます。もっと。

これは強力なツールですが、使用することには多くのことがあります。 幸いなことに、優れた参考資料には、その使用方法の例が記載されています。

デバッグ

Windowsではctrl + pを、Macではcmd + pを選択すると、デバッグ画面が開き、デバッグするスクリプトを選択できます。 このツールは、一時停止、続行、ステップイン、ステップオーバー、ブレークポイント、フォーマットされたコードなど、あらゆるプログラミング環境で期待されるデバッグ機能を提供します。

詳細なヘルプファイルは、デバッグモードの使用をステップスルーするために提供されています。

CSSスタイルウィンドウ

右端のボックスには、すべてのCSS情報が含まれています。 要素を選択すると、右側の[スタイル]ウィンドウに要素のスタイル情報が表示されます。 このセクションは興味深いものです。 ツールには、スタイル、計算済み、イベントリスナー、DOMブレークポイント、プロパティの5つのグループがあります。

スタイル

このウィンドウでスタイルを選択し、手動で変更できます。 たとえば、フォントのサイズと色を選択できます。

フォントサイズを選択し、独自のサイズを入力します。 これを行うと、選択したフォントのフォントサイズが画面上で変更されます。

フォントの色を選択すると、カラーピッカーが開きます。 必要な色を選択して、Enterキーを押します。 選択したフォントが新しい色に変わるのがわかります。 これは、新しいフォントスタイル、サイズ、色を試すのに最適な方法です。

右側のsite.CSSをクリックすると、詳細な情報が表示された大きなウィンドウが開きます。 ここでは、使用するフォントの名前を入力したり、色を指定したり、サイズを指定したりできます。

計算済み

これは、ボックスのサイズをピクセル単位で示しています。 パディング、ボーダー、マージンがあります。

デバイスモード

虫眼鏡と[要素]メニューの間の左側に、モバイルデバイスのように見える小さなボタンがあります。 何だと思う？ モバイルデバイスです。 これはデバイスエミュレーションモードです。 これは、サイトの応答性を確認するのに最適な方法です。

端末

単なるモバイルデバイスであるよりもさらにクールなのは、それがどのモバイルデバイスであるかを選択でき、そのデバイスで見ているようにWebサイトを表示できることです。 さて、それは素晴らしいです！

私はAmazonKindle Fire HDX 7”を選択し、画面がそのデバイスを模倣したので、サイトが画面上でどのように表示され、タッチがどのように機能するかを確認できました。

[寸法を入れ替え]ボタンを押すと、画面の向きを変更できます。

これは、WordPressサイトが小さなモバイル画面でどのように表示されるかを確認するのに最適な方法です。 私はiPhone6を選びましたが、新しい画面サイズと解像度に合わせて画面サイズが変更されました。 表示するデバイスはたくさんあります。 側面をドラッグしてサイズを拡大または縮小することで、カスタムサイズを表示することもできます。

通信網

サイトにアクセスしているネットワークの種類を選択するための選択肢もあります。 これにより、さまざまな接続タイプと速度でWebサイトのパフォーマンスを確認できます。 50 KbpsGPRSから30Mbps WiFiまでのいくつかの速度、およびいくつかの2G、3G、および4G接続速度をテストできます。 これは、さまざまなネットワークを介してWebサイトの速度をテストし、何を改善するかについての洞察を得るための優れた方法です。

メディアクエリ

左上に階段のような小さなボタンがあります。 さまざまなピクセル幅を示すWebサイトウィンドウの上にある画面の別のセクションが開きます。 それらをクリックすると、モバイル画面がそのサイズになります。 彼らはあなたに示します：

• 最大幅を対象としたクエリ
• 範囲内の幅
• 最小幅を対象としたクエリ

これは、完全にレスポンシブなデザインのためにスタイルとメディアコンテンツを調整するのに役立ちます。

引き出し

メイン画面の下には、ドロワーと呼ばれるツールの別のセクションがあります。 これは追加します：

コンソール–これはプライマリウィンドウと同じコンソールです。 ここに配置することで、プライマリウィンドウの任意のツールと一緒に使用できます。

検索–ソースを検索できます。

エミュレーション–デバイス（ここでは、モデル、解像度、ネットワークなどを選択できます）、メディア、ネットワーク（スループットとユーザーエージェント）、およびセンサー（タッチスクリーン、加速度計など）を選択できます。

レンダリング–ペイントの長方形、合成レイヤーの境界線、FPSメーター、継続的なページの再ペイント、および潜在的なスクロールのボトルネックを表示します。

設定など

右側のメニューバーには、サイトのエラーと警告の数が表示され、下部のドロワーを非表示にしたり、設定を調整したり、ツールをメインウィンドウにドッキングしたりできます（分割画面を作成します）。あなたのウェブサイトとDevTools）。

調整できる設定は膨大な数にのぼるので、必要な方法でツールを変更できます。

ChromeCanary

本当にGoogleのChromeDevToolsの最先端になりたい場合は、ChromeCanaryを試してみてください。 そのアイコンは黄色です。 それを得る？ ケープが必要です。 これは、Googleの最新かつ最高のものです。 開発者向けに設計されており、DevToolsの最新バージョンがあります。 まだ一般的な使用には十分な安定性がないため、システムが破損する可能性があります。

システムが故障したときに環境に深刻なダメージを与える傾向がある場合は、上の画像のChrome Canaryアイコンを見て、5秒間点滅しないでください。

これで、最後に進むことができます。 あなたはこの部分を覚えていないでしょう。

まとめ

Google Chromeのデベロッパーツールは、トラブルシューティング、ネットワークパフォーマンスの向上、さまざまな画面サイズと解像度でのサイトの表示、サイトの改善が必要な場所に関する情報の取得に最適なツールです。 多くの機能があり、拡張機能を使用してさらに追加することができます。 これらのツールだけでも、メインのブラウザでなくてもGoogleChromeをインストールする大きな理由です。 機能を学ぶために時間をかけることは報われ、あなたのサイトと訪問者はそれを感謝するでしょう。

あなたの番！ Chromeデベロッパーツールを使用していますか？ 私はあなたのお気に入りの機能を省略しましたか？ 追加するものはありますか？ 以下のコメントでそれについて聞きたいです！

アニケイ/shutterstock.comによる記事のサムネイル画像