Tricksを翻訳・再構成したものです。配信元または著者の許可を得て配信しています。Chromeは、Web開発者の間で最もメジャーなウェブブラウザです。Chromeは世界えbのブラウザシェアの63.72%を獲得しています。Tools)は、ブラウザ上で開発、テスト、デバッグを行うことで、ワークフローを大きく改善します。多くの皆さまには既に馴染みのある機能かもしれませんが、ここでは生産性を更に向上させるヒントやテクニックを紹介したいと思います。デベロッパーツール(開発者ツール)とは、ブラウザに搭載されたウェブオーサリングツールとデバッグツールです。これによりアプリやブラウザの内部にアクセスすることが可能になります。Toolsを使ってできるのです。Canaryが気になる方もいるのではないでしょうか。これはChromeの試験運用版で、日々更新されます。Canaryは一般のChromeと併用可能なため、問題が発生してもそれを回避することができます。experimentsを有効にすることで開発強化につながります。その後設定パネルでトグル切り替えを行います。Toolsのショートカットキーをいくつか紹介します。キー一覧はこちらから確認ができます。Toolsを開く方法は幾つかありますが、ご自身が一番使いやすいものを選びましょう。DevToolsの数多くの機能のうちのほんの一部ですが、まだ利用したことがない方にもわかりやすくまとめてあります。P)をクリックするだけで、実行中のプロジェクトや現在のウェブページ内のファイルに簡単にアクセスができます。https://www.seleqt.net/wp-content/uploads/2019/12/chrome-devtools-quick-file-switching-1.mp4プリティプリントDevToolsにプリティプリント機能が搭載されているのはご存知ですか?{}をクリックすれば、最小化されたフォームを簡単に変更することが可能です。https://www.seleqt.net/wp-content/uploads/2019/12/chrome-devtools-pretty-print-1.mp4HTML要素の編集すべての要素からパネル内のDOM要素を選択し、開始タグをダブルクリックすることで、HTMLのすばやい編集とプレビューが可能になります。終了タグは自動的にアップデートされます。すべての変更はソースコードに追加されたようにブラウザ上に表示されます。Toolsを使用してCSS変更し、どのように見え方が変わったかを確認することが可能です。Toolsのなかでもっとも一般的に使われている機能と言えるでしょう。編集したい要素を選択し、スタイルパネル内で自由に追加や変更ができます。F)クリックすることでソースコードをすばやく検索できます。https://www.seleqt.net/wp-content/uploads/2019/12/chrome-devtools-search-source-code-1.mp4JavaScriptのブレークポイントJavaScriptをデバッグする際に便利なのがブレークポイントです。Toolsでブレークポイントの設定ができます。R)を押し、ページの再読込みを行います。その後ページはブレークポイントに達するまで処理が実行されます。O)を押し、シンタックスを使うことで自動的に指定したコードにジャンプします。:375:18を入力したので、375行目、18列にジャンプしています。https://www.seleqt.net/wp-content/uploads/2019/12/chrome-devtools-go-to-line-number-1.mp4マルチカーソル複数行にカーソルが必要になったことはありませんか。クリックすれば簡単にマルチカーソルを追加でき、複数行で同時に編集作業ができます。https://www.seleqt.net/wp-content/uploads/2019/12/chrome-devtools-multiple-cursors-1.mp4ドック位置ドック位置の変更も可能です。別ウィンドウにアンドックするか、ドックをブラウザの左、下、右側に配置することができます。メニュー画面から変更できます。ToolsでCookieの削除も簡単に行えます。サードパーティー製プラグインのテストやデバッグ際に非常に便利な機能です。Cookiesへ進み、すべてのCookieまた、選択したCookieの削除が可能です。https://www.seleqt.net/wp-content/uploads/2019/12/chrome-devtools-clear-cookies-1.mp4デバイスモードデバイスモードの使用により、レスポンシブデザインのブレークポイントが適用されているかどうかウェブサイトやメディアクエリをテストすることができます。ウェブページの解像度に合わせたブレークポイントを持つことで、どこでメディアクエリが適用されるのかを知ることも可能です。M)でデバイスモードを開始します。エミュレートしたいデバイスと解像度を選択しネットワークスロットルを追加したり、デバイスの向きを固定することができます。https://www.seleqt.net/wp-content/uploads/2019/12/chrome-devtools-device-mode-2.mp4カラーパレットとカラーピッカーカスタムカラーパレットはウェブのスタイルシートから取得します。スタイルパネルのカラーブロックをクリックするだけでアクセスが可能です。ウェブぺージ内から直接色を取得できるカラーピッカー機能も搭載しています。HSL、16進数に切り替えることができます。ような隠れたセレクタがどこで見つけ出せるのか知っていますか。Stateという便利な機能により、要素を強制的に:hover状態にすることでスタイルパネルを使ってプロパティを見ることができるのです。https://www.seleqt.net/wp-content/uploads/2019/12/chrome-devtools-toggle-element-state-1.mp4画像をDataURIとしてコピー(Base64にエンコード済)ウェブページのどの画像もDataURIとして、厳密にはBase64にエンコードをして保存ができます。Toolsに既に搭載されている為、無料のオンラインコンバータ―を使用する必要はありません。URIで画像がコピーされます。https://www.seleqt.net/wp-content/uploads/2019/12/chrome-devtools-copy-image-as-data-uri-1.mp4以下のフォーマットで画像を取得できます。ネットワークフィルムストリップネットワークフィルムストリップ機能でページのレンダリング状況を最初から最後まで確認できます。FOIT/FOUTが発生した場合、フォントがどのようにレンダリングしているのかを確認できるため非常に便利です。R)でページの再読み込みを行います。再読込み終了後、レンダリング状況を確認できます。https://www.seleqt.net/wp-content/uploads/2019/12/chrome-devtools-network-filmstrip-1.mp4パフォーマンスモニターパフォーマンス機能は読み込みに費やされた時間とリソースを簡単に確認することができます。パフォーマンス情報を時間、アクティビティ、ソースなどの様々な角度から分析します。R)を押しページの再読み込みを行います。クリックすると測定結果の評価ができます。DOMここではDOMのブロックとその処理方法に関する記事を取り上げていますが、この特徴は正確なDOMContentLoadedの時間と読み込みの合計時間が確認できる点です。ウェブやアプリのパフォーマンス向上につながる重要なポイントとなっています。Networkパネルで設定アイコンをクリック。ページの再読み込みを行います。青線はDOMContentLoadedを、赤線は読み込みの合計時間を表します。通常青線がかかる部分はDOMをブロックするアセットであり、レンダーブロッキングリソースとも呼ばれています。https://www.seleqt.net/wp-content/uploads/2019/12/chrome-devtools-domcontentloaded-1.mp4ネットワークスロットルプロファイルネットワークスロットルのカスタムプロファイルを追加することも可能です。この機能は特定速度での動作確認をする場合に有効です。Networkパネルでスロットルドロップダウンを開きAdd...をクリックします。profile...をクリックし、仕様に合わせたプロファイルを追加します。https://www.seleqt.net/wp-content/uploads/2019/12/chrome-devtools-network-throttling-profiles-1.mp4セキュリティチェックSSL/TLSサーバ証明が有効か、安全な接続が確立されているか、またすべてのリソースが安全に配信されているかどうかを確認するのにセキュリティパネルは非常に有用です。migrationsのデバッグや混合コンテンツの処理にとても便利な操作です。R)を押しページの再読み込みを行います。その後関連するセキュリティ情報が画面に表示されます。AMPは軽量HTMLを使用したウェブの高速化を図るオープンソースイニシアチブです。AMPバージョンのインデックス登録には、事前にAMPが有効であるかを確認する必要があります。R)でページの再読み込みを行います。AMPが有効化されると画面に表示されます。errorsを参照してください。開発効率化やデバッグの高速化、ウェブやアプリのパフォーマンス効率化を図る測定ツールなど、多数の優れた機能を備えています。今回ご紹介した内容はその機能のほんの一部になるので、上記以外に便利な機能があれば、是非以下のコメント欄にご意見をお寄せください。Developersをご覧ください。updateページを購読してください。コードを追加する』で「JP20gd6nv7」を入れてください。※1000円分無料で頼めます。