クロムデバッグプロセスの概要

2322 ワード

html テキストリンク

Chromeにデバッグ

デバッグは、スクリプト内のエラーを検出して除去することを意味します.
モダンブラウザとホスト環境の大部分は、開発者ツール内にUI形式でデバッグツールを備えています.

ファイルナビゲーション領域:ページを整理するためのすべてのリソースをツリー形式で表示する

コードエディタ領域:ソースコード編集

JavaScriptデバッグエリア:デバッグツール提供

ブレークポイントを使用して、停止を実行するときに変数にどの値が含まれているかを知ることができます.
コマンドは運転停止時に実行できます

function hello(name) {
  let phrase = `Hello, ${name}!`;

  debugger;  // <-- 여기서 실행이 멈춥니다.

  say(phrase);
}

デバッガコマンドでは、ブレークポイントを設定する効果が表示されます.(編集から離れずにブレークポイントを設定)

Watch-式を計算して結果を表示

+버튼(add expression)をクリックし、必要な式を入力してenter割り込み点の値を表示

入力された式を実行中に再評価する

コールスタック-ブレークポイントへのブートコードの実行経路を逆順表示

Scope-現在定義されているすべての変数を出力

Local:関数の領域変数

thisの情報も個別に出力

グローバル:グローバル変数

トレース実行に必要なアイコンは、コアJavaScriptページを参照してください.

この問題について(クロムデバッグプロセスの概要), 我々は、より多くの情報をここで見つけました https://velog.io/@rand_guy/크롬-디버깅-과정-정리

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol