Chrome開発、デバッグの使い方。 (転送)_html/css_WEB-ITnose

Chrome の開発者ツールを開くにはどうすればよいですか?

ページを右クリックして [要素の検査] を選択できます:

または、Chrome のツールで見つけます:

または、このショートカットを覚えておくこともできます: Ctrl+Shift+I (または Ctrl +Shift+ J を押してコンソールを直接開きます)、または F12 を直接押します。

開かれた開発者ツールは次のようになります:

しかし、私は通常、左下隅のボタンをクリックして開発者ツールを独立したウィンドウとしてポップアップすることに慣れています:

それぞれについて個別に説明しましょう。タブの機能。

要素タブ

これは、HTML や CSS を含む、ページ上の要素を表示および編集するためのものです:

左側は、ページの HTML 構造を表示および編集するためのものです。要素を直接ダブルクリックできます。要素を変更するには、右クリックして [HTML として編集] を選択し、要素の HTML を直接編集するか、要素を削除すると、すべての変更がすぐにページに表示されます。 (注: 上の右クリック メニューの最後のオプション "要素の検査" を見ましたか? これは、この開発者ツールのページも HTML で作られているという意味ですか? クリックするとわかります、へへ)

あなたJS が要素の属性または HTML を変更する場合は、ブレークポイントを直接トリガーして、要素を変更する JS コードにジャンプします。

[要素] タブの右側で要素を変更できます。要素の CSS を編集します:

ここで、各 CSS セレクターによって設定された CSS 値の範囲を確認することもできます。

次のメトリックでは、要素 (幅、高さ、パディング、マージン) が占めるスペースを確認できます:

上記のプロパティに気づきましたか?これは、要素のメソッドと属性を確認できるため、API マニュアルを確認するよりもはるかに便利です (IE や FireFox などの他のブラウザでは特定のメソッドと属性がサポートされていることに注意してください)。

[リソース] タブ

[リソース] タブでは、CSS、JS、画像などを含む、要求されたリソースを表示できます。また、Cookie、HTML5 データベース、LocalStore などのストレージ関連情報も表示できます。保存されているコンテンツを削除します。

ここの CSS ファイルには興味深い機能があり、CSS ファイルを直接変更することができ、変更はすぐに有効になります:

[ネットワーク] タブ

[ネットワーク] タブは、Web サイトのリクエストやネットワークのステータスを分析するのに役立ちます。リクエストのリクエスト ヘッダーとレスポンス ヘッダー、およびレスポンスの内容は、特に Ajax リクエストを表示する場合に非常に役立ちます。リクエストは Chrome 開発者ツールを開いた後にのみここに表示されることに注意してください。

左側の特定のリクエスト URL をクリックすると、リクエストの詳細な HTTP リクエスト ステータスが表示されます:

ここでは、HTTP リクエスト ヘッダー、HTTP レスポンス ヘッダー、HTTP 返されたコンテンツ、およびその他の情報を確認できます。開発、デバッグ、どれもとても便利です。

Scripts タブ

明らかに、このタブは JS ファイルを表示し、JS コードをデバッグするためのものです。以下の手順を参照してください:

また、JavaScript コンソールを開いて他の表示や変更を行うこともできます :

特定の XHR リクエストまたはイベントにブレークポイントを設定することもできます:

タイムライン タブ

このタイムライン タブはネットワーク リクエストの時間応答を参照しないことに注意してください (これはタブ ページのネットワーク ビューにあります)。このタイムラインは、JS の実行時間とページ要素のレンダリング時間を指します。

下部にある [記録] をクリックして、ページ上で実行されたコンテンツの記録を開始します。 (これに慣れていない場合は、記事の最後にあるリンクを参照してください)

[プロファイル] タブ

これは主に、CPU 実行時間やメモリ使用量の確認など、パフォーマンスの最適化を目的としています:

私も詳しくないのでこれ以上は言いませんが、記事末尾のリンクを参照してください。

監査タブ

これは、フロントエンド ページの最適化と Web ページの読み込み速度の高速化 (Yslow と同等) に非常に役立ちます:

分析後、実行ボタンをクリックして、ページの分析を開始します。分析結果:

ページ上のスタイルシートのどのCSSが使用されていないのかも分析できます:

コンソールタブ

Javascriptコンソールです:

エラーメッセージの表示や印刷に加えて、デバッグ情報 (console.log()) やいくつかのテスト スクリプトの作成に加えて、JavaScript API として表示することもできます。

たとえば、コンソールにどのようなメソッドやプロパティがあるかを確認したい場合は、コンソールに直接「console」と入力して実行できます:

どうですか、一目でわかりますか?別の例として、日付関数にどのようなメソッドが使用できるかを確認したいと思います。

(注: ここで示されているメソッドとプロパティの一部は ES5 の新機能であることに注意してください。他のブラウザのサポートと互換性があることに注意してください)

結論

シンプルで高速であることに加えて、Google Chrome には非常に豊富なプラグインのセットが備わっています。 Web 開発者にとって、Chrome は HTML5 や CSS3 などのいくつかの新しい標準を比較的完全にサポートしており、個人的に Chrome の開発者ツールは非常に使いやすいと考えています。これが、Web 開発者に Chrome の使用をお勧めする理由です。