Chrome デバッグ ツール Qixinji_html/css_WEB-ITnose

孔子はこう言いました: 労働者が自分の仕事をうまくやりたいなら、まず自分の道具を研ぎ澄まさなければなりません。私も予約しました：孔子は正しいです！

フロントエンド担当者にとって、ブラウザのデバッグ ツールに習熟することはパフォーマンスの最適化に必要な条件です。

まず、Chrome デバッグ ツールを開く方法を知る必要があります。

右クリックして「要素の検査」を選択するか、ショートカット キー (⌥⌘I) を使用できます。

要素

次に、Chrome デバッグ ツールの各ツールの機能を簡単に紹介します。

Element

Elements セクションでは、ページ全体の Dom 構造を確認できます。ここでは、HTML の編集、要素 CSS の表示、要素の検索などを行うことができます。

ネットワーク

このセクションでは、ページに読み込まれたすべてのリソースの応答ステータス、応答時間、ブラウザの待ち時間、ステータス コード、MINE タイプ、リソース サイズなどを表示できます。

ソース

ソースは、ページにロードされているリソース、画像、CSS、JS などをソースごとに分類して表示します。

タイムライン

以前のツールと比較して、タイムラインははるかに高度です。ブラウザのレンダリング プロセスを表示できます。コードを解析し、レイアウトし、描画し、レンダリング レイヤーをマージします。詳細については、前の記事「ブラウザ レンダリング プロセス

プロファイル

プロファイル ツールは主に、CPU 使用率とスタックによって要求されたメモリを検出するために使用されます。」

リソース

リソース ツールは、ソースとは異なり、ドキュメントの種類を分類して表示します。また、ページ LocalStorage、SessionStorage、Cookie などを表示、追加、削除、変更できます。

監査

監査ツールは非常に賢いもので、ページを最適化する方法、CSS と JS をマージする必要があること、画像のサイズを明確にする必要があることを示します。特定の CSS ファイル内の未使用の CSS の割合。

コンソール

コンソールはおなじみですよね?多くの場合、「}」が欠落していると構文エラーが報告されると考えられます。もちろん、それ以上の効果があります。 詳細を見るにはここをクリックしてください

奇妙なテクニック

• 非表示の更新ボタン、開発者ツールを開いた状態で、左上隅の更新ボタンを長押しします。読み込みオプションが表示されます。

  更新ボタン

• ソースパネルの下のファイルを変更でき、バージョンのロールバックがサポートされています。ファイルを開いて編集し、保存します。右クリックして [ローカル変更] を開くと、保存されたレコードが表示され、特定の時点までロールバックすることを選択できます。名前を付けて保存することもできます~

  保存、ロールバック

• CSS セレクター、Elements ツールのセレクター、CSS セレクターをサポート

  css セレクターをサポートします

• jQuery 構文を選択した後、右クリックして [要素パネルに表示] を選択して [戻る] にジャンプすることもできます。要素ツール。

  `jQuery 構文をサポートします

• 使用されているフォント、CSS モジュールを要素ツールの右側に表示すると、次のことがわかります。下部の要素の最終的な詳細 使用されるフォント。

  特定の要素によって最終的に使用されるフォント

• 設定、devtools での設定は、DevTools を開いたときのキャッシュの強制クリアをサポートします。 AJAX を記録し、ソース マップを開き、シミュレーターを追加、削除、または変更します。

  devtools での設定

• 「ソース」パネルで「フォルダーをワークスペースに追加」を右クリックし、「フォルダーをワークスペースに追加」を選択します。このディレクトリ内の任意のファイルを直接編集できます。

  フォルダーをワークスペースに追加

• ソースの下のスニペットを使用すると、スクリプト、ブックマーク、またはブラウザーで実行している内容の小さな部分を保存できます。デバッグ中に頻繁に使用されるコードに使用できます。これらのスニペットは、[ソース] パネルで作成、保存、実行できます。

  スニペット

12 月 15 日更新

• ビューにスクロールし、ブラウザーを要素までスクロールしますLocation

  Scroll Into View

• スニペット。ここには、 allcolors.js の実行など、多くの実用的なスニペットがあります。現在のページのすべての色の値を一覧表示できます。

  スニペット

• Sass のデバッグ、ツールと Chrome のちょっとした設定でソースマップを生成し、Sass をデバッグできます。 Coffeescript を実行し、リアルタイムで保存します。 関連記事: CSS プリプロセッサの使用 、 Sass および Chrome DevTools による開発

  sass のデバッグ

• $0,$_印刷、要素パネルでタグを選択

  $0,$_ 印刷

  コンソール パネルでは $0 または $_ を使用できますすぐに印刷できます

  すぐに印刷できます

• コンソールにはさらに多くの機能があります。 コンソール パネルには、console.error、console.group、console.time などの多くの機能もあります。 API を自分で確認してください

console.group merge 出力

スタイルの追加

• Chrome Dev 開発者向けオプション。ブラウザに chrome://flags と入力すると、多くのブラウザの多くの隠れた機能が表示され、開発者ツールの実験が可能になります。

  chrome://flags

  次に設定を入力すると、多くの新しい開発者向けオプションが追加されていることがわかります。

  開発者向けオプション

  レイヤーパネルを開くと、ページ内の複合レイヤーを確認できます。 (ページの理由を探すときに非常に便利です)

  レイヤーパネルを開きます

• ページの応答性ブレークポイントを表示し、次の形式で開きますシミュレータでは、左上隅にボタンがあり、それをクリックすると、ページ上に応答性のブレークポイントが表示されます。

  ページの応答ブレークポイントを表示

概要

この記事は完了しました。概要プロセスも再度確認されました。 。これらのスキルは特別なスキルとはみなされないかもしれませんが、習得したからといってすぐに強力になるわけではありません。しかし、これらをよく理解し、上手に活用すれば、場合によってはコーヒーを飲む時間を大幅に節約できるかもしれません。

出典: w3ctrain