知っておくべき10のChrome開発ツールとヒント

1. 遅いネットワークと遅いデバイスをシミュレートする

私たちは都市部のインターネット速度に慣れていますが、それは都市部のインターネット速度がそのままの速度であることを意味するものではありません。中国 どれも同じです。遠隔地ではネットワーク速度が依然として残念なほど遅いため、私たちが作る製品ではネットワーク速度の遅さを考慮する必要がある場合があります。それでは、どのようにシミュレーションするのでしょうか?

Google ブラウザの パフォーマンス タブを開き、右上隅にある歯車アイコンをクリックして、Newwork と CPU のシミュレーションを確認します。状況。

2. カラー セレクター

色を表す小さな四角をクリックすると、カラー セレクターがポップアップ表示されます。

カラー ピッカーを有効にすると、Web ページ上にカーソルを置き、カラー ピッカーを使用してそのピクセルの色を取得できます。 。

カラー ピッカーをポップアップ表示する小さな四角にもショートカット キーがあります。Shift を押したままクリックします。色の形式を変更します。

3. 監査

監査 (audit)、この機能は常に存在していましたが、Chrome 60 以降、地球を揺るがす変化が起こりました: Google オープンの導入ソース 別のプロジェクト: LightHouse。

監査主に 5 つの側面から Web ページを評価し、最終的にレポートを生成します:

4.Pretty Print (読みやすいコードを表示)

多くの Web サイトで Javascript コードが圧縮されていることは承知していますが、これは開発者や学習者にとって非常に読みにくいものです。Google では、圧縮ドキュメントを見やすくする機能を提供しています。

Pretty Print 機能を使用するには、下の波括弧 ｛｝ アイコンをクリックします。

5. クイック ファイル スイッチャー

ファイル名がわかっている場合は、「Sources」タブを開く必要はありません。 cmd/ctrl p を押して、検索したいファイル名を入力して Enter を押すだけでOKです。

6. レスポンシブ モード

私たちはデスクトップとモバイル デバイスの両方で Web サイトを開発していますが、通常は初期のデスクトップ エクスペリエンスを好みます。しかし、これは、モバイル デバイスを使用してインターネットにアクセスするユーザーがますます増加する傾向とは別のものです。 Web サイトのユーザー エクスペリエンスを向上させるには、モバイル デバイス上で Web サイトがどのように動作するかを正確に知る必要があります。 Chrome テストを支援するために、モバイル シミュレーター機能が開発者ツールキットに追加されました。

ほとんどの人にとって、ほとんどの場合、単に表示するだけです。さまざまな画面サイズと方向を使用して Web サイトを表示します。

サーバー上では Alibaba Cloud と連携しており、割引価格は 89/年、223/3 年と比較的安く、学生の月額 9.9 よりも安くなります。プロジェクトを構築するために購入しました。テクノロジ スタックに精通している方が良いです (古いユーザーは家族のアカウントを使用して購入できますが、私は母親のアカウントを使用しています)。3 年間購入することをお勧めします。この記事をクリックしてご覧ください。

Icomo

7. スクリーンショット

1. F12

2. [ctrlShift p]

3. 「capture 」と入力します。

4. 次のいずれかを選択します。

1. フルサイズのスクリーンショットをキャプチャする「【ウェブページ全体】
2. ノードのスクリーンショットをキャプチャする」【ノードのウェブページ】
3. "スクリーンショットをキャプチャ" [現在の画面]

8. 拡張機能

Chrome デベロッパー コンソールに拡張機能をインストールできます。多くのフレームワークには、テクノロジー (Vue、Angular、React など) の開発を簡素化するための独自の拡張機能があります。これは、注目の DevTools 拡張機能のリストです。

9. カバレッジ

カバレッジは、Chrome 開発者ツールの新機能です。文字通りの意味では、コードが実行されているときに、どの JS と CSS がすでに存在しているかを検出するために使用できます。実行中ですが、どの JS と CSS がまだ使用されていません。図に示すように、これは csdn Web ページを開いたときに表示される実行中のコードとまだ実行されていないコードです。

caver を開く方法 前提条件: Chrome ブラウザのバージョンは 59 以降である必要があります Ctrl + Shift + i で開発ツールをすばやく開き、右上隅をクリックします... 詳細ツール カバー範囲があります。

それでは、この新機能は何をするのでしょうか?

上の図に示すように、右端はロードした css および js ファイルの数を示しています。赤い領域は実行されたコードを示し、シアンの領域はロードされたが実行されていないコードを示します。ページ内で使用されていないjsコードやcssコードを発見し、必要なコードだけをユーザーに提供することでページのパフォーマンスを向上させることができます。これは、分割できるスクリプトを特定したり、重要ではないスクリプトを遅延してロードしたりする場合に役立ちます。

10. 新機能をリアルタイムでフォローアップします

Chrome の開発ツールは常に更新され、DevTools の最新情報に関する更新ビデオがリリースされます。新しい機能により、Google の便利な機能の一部をリアルタイムで知ることができます。

元のアドレス: https://medium.com/better-programming/10-must-know-chrome-developer-tools-and-tricks-d03f75d10cc9

著者: FelDev

プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。 ！

以上が知っておくべき10のChrome開発ツールとヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。