この記事では、トライアルモードの必要性を皆さんに紹介し、VSCode でデバッグモードを有効にする 3 つの方法について説明します。

VSCode でデバッグモードを有効にするにはどうすればよいですか? 3 つの方法の簡単な分析

コード作成またはメンテナンス (バグ) のプロセスでは、単純な値や問題に対して を使用できます。 Console を使用すると問題を解決できます。console が良い方法であり、すべての問題を解決できる特効薬であると考える人もいます。私はそうではないと思います。コードの実行ロジックを明確にするために、複合型 (参照型) の値をチェックするオプションもありますが、デバッグモード (debugger) を使用する必要があります。 https://juejin.cn/post/7024890041948176398#Heading-1

debugger は js のステートメントです。ここで実行します 1 行、プログラムがデバッグモードの場合、ブレークポイントが存在します。つまり、この行で停止します。この時点で、最も重要な変数の値やコールスタックなどのコンテキストを確認できます。また、単一のステップバイステップデバッグ、またはブロックごとのデバッグもサポートしています。

通常のデバッグはブラウザで行うことが多く、ブラウザではコンソールを開くだけで済みます。デバッグモードをオンにすると、##debugger ステートメントまたはカスタムブレークポイントが発生し、プログラムが停止し、debug モードに入ります。

VSCode でデバッグモードを有効にするにはどうすればよいですか? 3 つの方法の簡単な分析 ##この記事では、

vscode

プラグインを作成する予定なので、主に
vscode でデバッグモードを有効にする方法について説明します (しばらくお待ちください) 、# vscode のデバッグは避けられず、以前の単純なデバッグでは間違いなく私のニーズを満たさないため、vscode.## のデバッグモードについて学びましょう。 ## この記事ではデバッグスキルについては書きませんが、vscodeデバッグを有効にする方法
js

について書きます。

こちらは vscode公式ドキュメント デバッグモードの必要性について再議論します単純な値を確認するだけの場合は、
console

を使用できます。デバッグモードがオンになります。コストは比較的大きくなります。

ブラウザでは、オブジェクトは参照型であり、ブラウザはオブジェクトを直接折りたたまないため、ifconsole after オブジェクトを変更した後、コンソールに移動して確認します。変更されたオブジェクトが取得されます。

印刷後に自動的に折り畳まれません

手動で折りたたむと、ブラウザが値を再度読み取り、変更された値になります。

VSCode でデバッグモードを有効にするにはどうすればよいですか? 3 つの方法の簡単な分析

このような問題はオブジェクトが原因で発生するので、文字列に変換して出力すればこの問題は発生しませんが、見栄えは良くありません。場合によっては、デバッグモードを使用する必要がある場合もあります。

VSCode でデバッグモードを有効にするにはどうすればよいですか? 3 つの方法の簡単な分析

vscode でデバッグモードを有効にする

vscode

# でデバッグします。 ##js`,`ts

コードには 3 つの方法があります。

vscode で node

を実行する場合ターミナル、自動的に接続されます。

を参照。
##vscode が提供する debug ターミナルを直接使用します。
3.2 を参照
設定ファイルを使用します。3.3 を参照
1 自動接続

のターミナルで

node を実行すると、debug

モードを開始するかどうかが自動的に決定されます。さまざまなオプションに基づいています。

合計 4 つのオプションがあり、オプションを切り替える方法は 3 つあります。1.1 オプションを切り替える方法

#どの設定方法であっても変更する設定方法がわかったら、
vscode
を再起動すると効果が高まります

設定による

##構成ファイルの変更による

VSCode でデバッグモードを有効にするにはどうすればよいですか? 3 つの方法の簡単な分析

設定ファイルを開きますsettings.jsonファイルの後

// 修改或添加
{
  "debug.javascript.autoAttachFilter": "onlyWithFlag"
}

ログイン後にコピー

コマンドによって (推奨)

Ctrl Shift P を使用してコマンドを呼び出します (macまたはショートカットキーを変更した場合は自分で見つけます)。

VSCode でデバッグモードを有効にするにはどうすればよいですか? 3 つの方法の簡単な分析

attach と入力して見つけます。選択すると、これらの 4 つのオプションが表示され、オプションを再度選択して、必要なオプション

VSCode でデバッグモードを有効にするにはどうすればよいですか? 3 つの方法の簡単な分析

#1.2 各オプションの意味

##公式 Web サイトのドキュメントには記載されていませんが更新され、デフォルトのオプションは

smart

ではなくなり、
disabled

option# に変更されました。 ##意味常に (常に)smart)onlyWithFlag )inspect-brk無効) では開始しないでください# #Smart(smart) は、debug.javascript.autoAttachSmartPattern## を通じて


常に `デバッグ` モードで開始します	Intelligent(
指定されたファイルのみが `debug` モードに入ります	フラグを使用した場合のみ (
`--inspect` または	パラメーターを使用して、`debug で開始します` モード無効(
#debug `モード`

debug

モードを有効にするかどうかを指定するファイルパスです。 # 構成項目。デフォルト値は
["${ workspaceFolder}/**「、」!**/node_modules/**「、」**/$KNOWN_TOOLS$/**"]## ですdisable(disabled) モードで開始した場合、node --inspect は
debug

モードに入らず、開くことによってのみ入ることができます。次の方法で

debug
ターミナルを実行します。 debug モード、おい~ vscode も詐欺です。いつデフォルトモードが ## に変更されたのかわかりません。 #disabled なので、node --inspect を使用して debug モードに入るのに失敗したことを覚えています。これは非常に奇妙でした。今、何が起こったのか理解しました。 2 JavaScript デバッグターミナル(デバッグターミナル) debug
モードでターミナルを直接起動し、

node

起動すると debug モードに入ります。

上記の方法 (Auto Attach) により、すべての端末が vscode で起動します。 は制御されます。これは、それによって開始されたもののみを制御します。 Terminal.

3 Launch Configuration

#これがハイライトで、私がメインですこれについてもっと知りたい

VSCode でデバッグモードを有効にするにはどうすればよいですか? 3 つの方法の簡単な分析

スタートアップ構成とは、デバッグ##の起動方法を設定する方法です。 # 構成ファイルの形式のモード。実行およびデバッグのニーズを満たすための詳細な構成が提供されます。複雑なアプリケーション

#3.1 起動構成のプロパティ

##この構成ファイルは、現在のワークスペースディレクトリ

の
.vscode/launch.json にあります。手動で作成することも、vscode
# を使用して簡単に作成することもできます。

## を選択し、

node
以上です

#必須属性

1VSCode でデバッグモードを有効にするにはどうすればよいですか? 3 つの方法の簡単な分析

##必須属性。最も変更される属性は

name
である必要があります。他の 2 つは node にあり、通常は変更されません。

1VSCode でデバッグモードを有効にするにはどうすればよいですか? 3 つの方法の簡単な分析

属性名意味

属性値の例

type

デバッガタイプ。デバッグ言語ともみなされます, requestlaunchdebuglaunch name を区別するために使用します。

node => pwa-node chrome => pwa-chrome

モードのリクエストタイプには 2 つの値しかありません : start、attach:attach

このスタートアップコンフィギュレーションの名前は、ユーザーが

カスタマイズ済み、自分で理解して、自分で使用するために

request

我们常用的是 launch , 所以这里只是讨论了 launch 的使用.

对于 launch 和 attach 的区别, 可以看 B 站上这个大佬的视频, 讲解地很好. 程序员阿汤 => 介绍 launch.json

name

name的含义是: 一个launch.json中可以配置多个启动配置, 所以需要给每个启动配置起个名字, 用于区分

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "node调试",
      "port": 9229,
      "request": "attach",
      "skipFiles": ["<node_internals>/**"],
      "type": "pwa-node"
    },
    {
      "type": "pwa-chrome",
      "request": "attach",
      "name": "chrome调试",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

ログイン後にコピー

1VSCode でデバッグモードを有効にするにはどうすればよいですか? 3 つの方法の簡単な分析

选中某一个, 然后可以使用快捷键f5, 快速启动, 或者点击运行图标

1VSCode でデバッグモードを有効にするにはどうすればよいですか? 3 つの方法の簡単な分析

`launch`和`attach`都支持的属性

属性	含义
outFiles	指定`Source maps`文件所在路径
resolveSourceMapLocations	也是指定与`Source maps`相关的路径
timeout	附加的超时时间, 超时就放弃
stopOnEntry	项目启动起来, 立即`debugger`一下, 就是相当于在代码的第一行加了一个`debugger`
localRoot	这个是用来远程调试用的, 我就先不了解它了...
remoteRoot	这个是用来远程调试用的, 我就先不了解它了...
smartStep	自动跳过没有映射到的源文件
skipFiles	指定单步跳过的文件, 就是`debugger`不跟进去看的源代码
trace	开启会将一些调试输出保存到`vscode`指定的文件中

skipFiles

(这个挺有用的, 有些代码不想跟进去看, 但是经常点快了, 就进去了..., 可以把这些文件排除掉, <node_internals>/**/*.js配置上这个, 可以跳过node核心模块的代码.)

trace

开启trace后

VSCode でデバッグモードを有効にするにはどうすればよいですか? 3 つの方法の簡単な分析

`launch`支持的属性

属性	含义
program	启动项目的入口文件地址(就是要执行的`js`的路径)
args	相当于命令行参数(下面有详解)
cwd	指定程序启动的路径(下面有详解)
runtimeExecutable	指定可执行程序的启动路径(下面有详解)
runtimeArgs	给可执行程序的参数(下面有详解)
env	指定环境变量(下面有详解)

args

"args": ["aaa", "bbb"] :在命令行传递参数的方式, 在node中可以通过process.argv拿到

VSCode でデバッグモードを有効にするにはどうすればよいですか? 3 つの方法の簡単な分析

cwd

"cwd": "${workspaceFolder}/demo", 配置这个路径, 在node中, 相当于指定了process.cwd()的路径

1VSCode でデバッグモードを有効にするにはどうすればよいですか? 3 つの方法の簡単な分析

runtimeExecutable

这个可以指定启动的程序名, 比如使用nodemon启动, 或者指定路径, 比如你有 3 个版本的 node 想启动调试看看各个版本的差异, 就不需要切换全局的 node 版本, 只需要设置多个配置项就行啦. 这样很方便的.

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "v10 版本启动",
      "program": "${workspaceFolder}/demo.js",
      "request": "launch",
      "type": "pwa-node",
      "runtimeExecutable": "C:\\Program Files\\nodejsv10\\node.js" // 这里是 v10 版本的node路径
    },
    {
      "name": "v11 版本启动",
      "program": "${workspaceFolder}/demo.js",
      "request": "launch",
      "type": "pwa-node",
      "runtimeExecutable": "C:\\Program Files\\nodejsv11\\node.js" // 这里是 v11 版本的node路径
    },
    {
      "name": "v12 版本启动",
      "program": "${workspaceFolder}/demo.js",
      "request": "launch",
      "type": "pwa-node",
      "runtimeExecutable": "C:\\Program Files\\nodejsv12\\node.js" // 这里是 v12 版本的node路径
    }
  ]
}

ログイン後にコピー

runtimeArgs

这个里面写的参数会紧跟在可执行程序后面, 在node程序中, node会将它后面的第一个参数视为它要执行的文件的路径, 所以需要有所调整.

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "v10 版本启动",
      "program": "${workspaceFolder}/demo.js", // 这个现在已经不是 node 的执行文件地址了, 它只是一个参数了
      "request": "launch",
      "type": "pwa-node",
      "args": ["args1", "args2"],
      "runtimeArgs": ["${workspaceFolder}/demo.js", "runtimeArgs2"] // 因为它紧跟在 可执行程序后面, 所以它的第一个参数需要设置为它要执行的文件的地址
      // 如果它是 --experimental-modules 类型参数就没事了, 因为node会把它解析成参数, 这个参数的含义是 启动 es 模块支持. 接下来我会写一篇 js 的模块化的文章, 敬请期待哈
    }
  ]
}
// 启动的命令行是
// C:\Program Files\nodejs\node.exe E:\font-end/demo.js runtimeArgs2 .\demo.js args1 args2

ログイン後にコピー

1VSCode でデバッグモードを有効にするにはどうすればよいですか? 3 つの方法の簡単な分析

这个参数在弄成 npm 启动项目的时候, 比较有用

env

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "v10 版本启动",
      "program": "${workspaceFolder}/demo.js",
      "request": "launch",
      "type": "pwa-node",
      "env": {
        "NODE_ENV": "prod"
      }
    }
  ]
}

ログイン後にコピー

1VSCode でデバッグモードを有効にするにはどうすればよいですか? 3 つの方法の簡単な分析

`attach`支持的属性

我们常用的是 launch 方式启动, 就先不了解 attach 的方式启动了.

总结

对于如何在vscode中启动debug模式, 应该是比较清楚的了

在vscode中, 一共有三种方式启动debug调试, 分别是

自动附加(影响全局的终端), 如果对自己电脑性能有自信, 设置为always. 命令行运行进入debug模式.
强制开启(只影响这一个终端), 如果不方便配置开启全局的自动debug, 使用这种方式进入debug, 也是比较放便的, 就是重新开启这个debug终端之后, 需要cd到需要运行的js文件目录, 比较麻烦. 命令行运行进入debug模式.
配置开启(功能强大, 适合调试复杂应用),配置好.vscode/launch.json后, f5启动进入debug模式

// 比较完整一个 launch.json 配置
{
  // 使用 IntelliSense 了解相关属性。
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "v10 版本启动", // 配置名称
      "program": "${workspaceFolder}/demo.js", // 项目启动入口文件
      "request": "launch", // `debug`模式的请求方式
      "stopOnEntry": true, // 项目启动, 立即`debugger`一下
      "type": "pwa-node", // 调试器类型
      "env": {
        // 环境变量
        "NODE_ENV": "prod"
      },
      "args": ["aaaa"], // 启动命令时跟在 program 后的参数
      "skipFiles": [
        // 指定单步调试不进去的文件
        "<node_internals>/**" // node 的核心库, 比如`require`
      ],
      "cwd": "${workspaceFolder}", // 指定可执行程序的启动路径, process.cwd(),
      "runtimeExecutable": "nodemon", // 指定可执行程序名称, 或者路径, 在这里 type 为 pwa-node 默认值是 node
      "runtimeArgs": ["--experimental-modules"] // 启动命令时, 跟在 runtimeExecutable 后的参数
    }
  ]
}

ログイン後にコピー