2020年のChromeDevtoolsで新しいものを見てください

2020年のChromeDevtoolsの新機能を見る

この記事では、Chrome Devtoolsの新機能のいくつかについてすぐに学ぶことができます。簡単に紹介してから、多くの新しいDevTools機能に飛び込み、他のブラウザの進捗状況について学びます。私はこれらの側面に焦点を合わせ続けます。なぜなら、私はあなたがオンラインで見つけることができるDevToolsプロンプトの最大のコレクションであるDev Tipsを作成したからです！

開発とデバッグエクスペリエンスの向上に役立つ新しい機能により、開発が進化し続けるにつれてDevToolsの変化を理解することが重要です。

最新の最高の機能を見てみましょう。 Chromeの公的に安定したバージョンにはこれらの機能のほとんどがありますが、テクノロジーの最前線にいるのが好きなので、Chrome Canaryを使用しています。

灯台

Lighthouseは、通常はパフォーマンス、SEO、アクセシビリティなど、Webページを監査するためのオープンソースツールです。 Lighthouseはしばらくの間Devtoolsの一部として一緒に束ねられています。つまり、…Lighthouseというパネルで見つけることができます。

私は灯台が本当に好きです。なぜなら、それはDevtoolsの最も簡単な部分の1つであるからです。 [レポートを生成]をクリックすると、次のようなWebページに対して、すぐに人間が読みやすいコメントが表示されます。

ドキュメントでは、読みやすいフォントサイズ、100％読みやすいテキストを使用します

または：

過度に大きなDOMサイズ（1,189要素）を避けてください

ほとんどすべてのレビューは、レビューが失敗した理由とそれがどのように改善できるかを説明する開発者のドキュメントにリンクされています。

灯台を始めるための最良の方法は、あなた自身のウェブサイトで監査を実行することです。

1. devtoolsを開いて、サイトの1つにアクセスすると、灯台パネルに移動します
2. レビューするプロジェクトを選択します（ベストプラクティスは良い出発点です）
3. クリックしてレポートを生成します
4. 承認された/失敗したレビューをクリックして、結果を調査します

Lighthouseはしばらくの間DevToolsの一部でしたが（2017年以降！）、以下などのユーザー向け機能を提供し続けているため、まだ言及する価値があります。

• アンカー要素がURL監査に解決するかどうかを確認します（興味深い事実：私はこの作業に関与しています！）
• 最大コンテンツ描画メトリックがレビューに十分な速さであるかどうかを確認します
• JavaScriptを使用していない監査について警告します

より良い「要素をチェック」

これは、いくつかの点で微妙な、非常に小さな機能ですが、Webアクセシビリティの処理方法に大きな影響を与える可能性があります。

次のように機能します。おそらくDevToolsの最も一般的な使用であるCheck Elementsを使用すると、アクセシビリティに関する追加情報を含むツールチップが表示されます。

私がこれに大きな影響を与えると言う理由は、DevToolsがしばらくの間アクセシビリティを持っているからですが、実際にそれらを使用している人は何ですか？この情報をCheck要素のような一般的に使用される機能に含めると、視認性が高まり、アクセスしやすくなります。

ツールのヒントは次のとおりです。

• テキストのコントラスト比（背景色の前景テキストのコントラスト、またはそれがどれほど悪いか）
• テキスト表現
• アリアの役割
• 検査された要素がキーボードに焦点を合わせることができるかどうか

この機能を試すには、右クリック（またはCMD Shift C）要素を選択し、 [チェック]を選択してDevToolsで表示します。

Chrome Devtoolsを使用したアクセシビリティのデバッグに関する14分間のビデオを作成しました。

シミュレートされた視力欠陥

名前が示すように、Chrome Devtoolsを使用して視覚障害をシミュレートできます。たとえば、ぼやけたビジョンの観点からWebサイトを表示できます。

DevToolsでこれをどのように行いますか？このような：

1. DevToolsを開きます（右クリックしてCheckまたはCMD Shift Cを選択します）。
2. DevToolsコマンドメニューを開きます（MacのCMD Shift PとWindowsでCtrl Shift P）。
3. [コマンド]メニューで[レンダリングを表示]を選択します。
4. レンダリングパネルの欠陥を選択します。

例としてファジービジョンを使用していますが、DevToolsには、フルカラーブラインドネス、部分的な色覚異常、ティールの失明、完全な色覚異常など、他のオプションがあります。

このようなツールと同様に、（できれば）既存のアクセシビリティスキルを補完するように設計されています。言い換えれば、それは有益ではありませんが、作成した設計とユーザーエクスペリエンスに影響を与えます。

低視力のアクセシビリティとシミュレーションに関する追加のリソースを次に示します。

• 低視力のある人のためのアクセシビリティ要件（W3C）
• ビジョンの欠陥をシミュレートすることにより、ページアクセシビリティを改善します

パフォーマンスのタイミングを取得します

DevToolsのパフォーマンスパネルは、形と色の厄介なミックスのように見えることがあります。

これへの更新は、意味のあるパフォーマンスメトリックを提示するより良い仕事をしているため、素晴らしいです。

私たちが見たいのは、パフォーマンスパネルレコードのタイミングに示されている追加のタイミング長方形です。これが強調します：

• DomContentLoaded：最初のHTMLロード時に発生したイベント
• 最初の描画：ブラウザが最初に画面にピクセルを描画したとき
• 最初のコンテンツ描画：ブラウザはDOMからコンテンツのポイントを描画します。これは、コンテンツが読み込まれていることをユーザーに示します
• オンロード：ページとそのすべてのリソースがロードされたとき
• 最大コンテンツ図：ビューポートでレンダリングされている最大の画像またはテキスト要素

さらに、パフォーマンスパネルレコードで最大のコンテンツ描画イベントが見つかった場合は、追加情報についてクリックすることができます。

ここには多くの貴重な情報がありますが、「関連するノード」は、どの要素がLCPイベントを引き起こすかを指定するため、最も有用なプロジェクトになる可能性があります。

この機能を試すには：

1. DevToolsを開き、パフォーマンスパネルに移動します
2. [分析を開始し、ページをリロードする]をクリックします
3. レコードのタイミング部分でタイミングインジケーターを観察する
4. 各メトリックをクリックして、取得した追加情報を表示します

パフォーマンスを監視します

devtoolsをすばやく始めて灯台を試してみたい場合は、パフォーマンスモニター機能をお勧めします。 CPU使用量など、指先でWebPagetest.orgを使用するようなものです。

アクセス方法は次のとおりです。

1. devtoolsを開きます
2. コマンドメニューを開きます（MacのCMDシフトPとWindowsでCtrl Shift P）
3. コマンドメニューから[パフォーマンスモニターを表示]を選択します
4. ウェブサイトと対話して閲覧します
5. 観察結果

パフォーマンスモニターは興味深いメトリックを提供できますが、灯台とは異なり、自分で解釈して行動を起こす方法を把握する必要があります。アドバイスは提供されませんでした。 CPU使用率を自分で調査し、受け入れられない場合は90％に尋ねる必要があります。

パフォーマンスモニターには、メトリックをオンとオフにすることができるインタラクティブな凡例があります。たとえば、：

• CPUの使用
• JSヒープサイズ
• DOMノード
• JSイベントリスナー
• 書類
• ドキュメントフレームワーク
• レイアウト/秒
• スタイルの再計算/秒

CSSの概要とローカル概要

CSS-Tricksがこれらの機能を紹介しているので、チェックしてください！

• CSSの概要：ページで使用されているCSSについて多くの興味深い統計を提供する便利なDevToolsパネル
• ローカルオーバーレイ：制作ウェブサイトをローカルリソースで上書きできるようにする強力な機能により、変更を簡単にプレビューできるように

それで、他のブラウザのdevtoolsはどうですか？

記事全体でChromeを使用していることに気付いたと確信しています。これは私の個人的なブラウザです。つまり、検討する価値があります。

• Firefox devtoolsは今素晴らしいように見えます
• Microsoft EdgeがChromiumから拡大するにつれて、これらのDevTools機能の恩恵を受けるでしょう
• Safari Technology Previewリリースノート（このページでWeb検査官を検索）で証明されているように、Safari Devtoolsは大きな進歩を遂げました

言い換えれば、これは急速に成長している地域であるため、注意してください！

結論は

私たちは非常に短い時間で多くをカバーしました！

• 灯台：パフォーマンス、アクセシビリティ、SEO、ベストプラクティスのヒントと提案を提供するパネル。
• 要素を確認する：強化要素機能をチェックするための強化は、チェック要素のツールチートのアクセシビリティ情報を提供する
• シミュレートされたビジョン欠損：低ビジョンの観点からページを表示するためのレンダリングパネルの機能。
• パフォーマンスパネルのタイミング：パフォーマンスパネルレコードの他のメトリック、最大コンテンツの描画などのユーザー指向の統計を表示する
• パフォーマンスモニター - CPU使用やDOMサイズなどの現在のWebサイトパフォーマンスメトリックのリアルタイム視覚化

最新のアップデートを知り、200を超えるWeb開発のヒントを取得したい場合は、メーリングリストの開発のヒントをご覧ください！また、ModernDevtools.comで高度なビデオコースもあります。そして、私はTwitterに多くの追加のWeb開発リソースを投稿する傾向があります。

以上が2020年のChromeDevtoolsで新しいものを見てくださいの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。