IE開発者ツールの実践機能解説_html/css_WEB-ITnose

F12 ショートカット キーで開発者ツールが起動します

1.JS コンテンツのフォーマット

1. 乱雑なコンテンツを含む JS スクリプト:

2. スクリプトをフォーマットするには、次の 2 つの項目をチェックします。

3. スクリプトの実行

1. 右ボタン - 「

」 :alert() の代わりにコンソールを使用します

いつコード内の値をデバッグする必要があるが、コードの実行を中断したくない場合は、コンソールで

window.console.log("HelloWorld"); を使用できます。

Four: JS をデバッグするときのブレークポイントのショートカット キー

F9: ブレークポイントの追加/削除

F10: ステップバイステップ、つまりステートメント内のメソッドや式などをスキップします

F11: ステップバイステップステートメントのデバッグ、つまりシングルステップ デバッグでは、メソッドと式にジャンプしてステートメントごとの追跡とデバッグを実行します

5: 対応する HTML と関連ソースを選択します

1. これをクリックします。 2. 対応する CSS と HTML を取得します

6: プロファイラーの役割: 各関数の呼び出し時間を検出し、Web ページのパフォーマンス エクスペリエンスを分析するために使用されます

すごいですね、すべて 0.00 - -!私のインターネット速度は良好です、笑！

7: ネットワークの役割

1.304 の結果は、データがキャッシュから直接取得されたことを示します

2.200 は、必要なファイルが正常に返されたことを意味します

3.404 は、ファイルが存在しません

4.503 はサーバーが一時的に利用できないことを意味します

5.500 はサーバーで内部エラーが発生したことを意味します。

HTTP リクエスト ヘッダー、リクエスト本文、応答ヘッダー、応答本文、ファイルのダウンロード動作に関連する Cookie、イニシエーター、および概要ビューよりも詳細なタイミング情報。言い換えれば、詳細ビューには、ブラウザーがサーバーと通信する方法に関するすべてのプロトコル レベルの情報が表示され、開発者やデバッガーにとっては間違いなく貴重な情報であり、Web サイトのデバッグ作業が非常に容易になります。 。

りー