ホームページ > 記事 > 開発ツール > 【吐血まとめ】開発作業効率を倍増させるVSCodeのデバッグと使い方のヒント

【吐血まとめ】開発作業効率を倍増させるVSCodeのデバッグと使い方のヒント

青灯夜游転載: 2022-03-08 11:27:165475ブラウズ

この記事では、日常の開発作業の効率を 2 倍にするために、シナリオごとの VSCode の高度なデバッグと使用スキルを要約して共有します。皆様のお役に立てれば幸いです。【吐血まとめ】開発作業効率を倍増させるVSCodeのデバッグと使い方のヒント

#VsCode は、誕生以来、その優れた機能により急速に人気を博しました。特にフロントエンド開発パートナーにとっては、ほぼ必須の開発ツールとなっています。そのため、VsCode のそれぞれの使い方スキルとデバッグスキルをマスターすることで、日々の開発作業の効率が倍増します。この記事では、VsCode のさまざまなテクニックを、豊富な画像と文章を使って以下の切り口から詳しく紹介します。

前編では、よく使うショートカットキーなど、VsCode の基本的なテクニックを中心に紹介します。、補助定規など。この部分に精通している人は、直接スキップしてください。 [推奨学習: "vscode 入門チュートリアル "]
2 番目のパートでは、主にさまざまなブレークポイント (ログブレークポイント、インラインブレークポイント、式ブレークポイントなど)、データパネルなどに焦点を当てます。 .
第 3 部では、主に Node プログラム、TS プログラム、Vue プログラム、Electron プログラム、Html などの実践的なデバッグなど、さまざまなプロジェクトの実践的なデバッグについて説明します。
最後の部コードスニペット、リファクタリング、Emmet など、その他の役立つヒントについて説明します。

基本的なヒント

クイックスタート

VsCode をインストールすると、環境変数が自動的に書き込まれる場合は、ターミナルに code と入力して VsCode アプリケーションを呼び出します。

よく使用されるショートカットキー

ctrl pファイルをすばやく検索してジャンプし、指定行にジャンプするには : を追加します

ctrlShiftp 現在のコンテキストに基づいて、使用可能なすべてのコマンドにアクセスします。
ctrl Shift c外部でターミナルを開き、現在のプロジェクトパスに移動します
ctrl 左を押しますキー 1 の記号 隠し端子パネルの表示
Ctrl B サイドバーの切り替え
Ctrl \ 素早い分割ファイル編集
Alt 左クリック 複数のカーソルの追加
Alt 左シフト 1 回クリック 同じ列内のすべての位置にカーソルを追加します。
#Alt Shift マウスで選択します。 # 同じ開始点と終了点を持つ領域を選択します。

現在の行または選択した領域を 1 行上/下に移動します

文字数を増やすには、設定ファイルに以下の設定を追加します。定規の補助線

"editor.rulers": [40, 80, 100]

高度なスキル

breakpoint 基本的な使用法

以下では、ブレークポイントの基本的な使用法を示す例として、VsCode でのノードプロジェクトの簡単なデバッグを取り上げます。次の記事では、引き続きさまざまな高度なブレークポイントを完了していきます。

#Nodejs の基本ノードプロジェクトを作成する#左側のデバッグパネルを開き、デバッグするノードプロジェクトの名前を選択し、デバッグ構成を追加します

デバッグプロジェクトタイプとして Node.js を選択します。【吐血まとめ】開発作業効率を倍増させるVSCodeのデバッグと使い方のヒント

##生成されたプロジェクトを開きます.vscode/launch.json ファイル、プログラムエントリファイルを指定します。【吐血まとめ】開発作業効率を倍増させるVSCodeのデバッグと使い方のヒント

フィールドはプログラムエントリファイルを指定するために使用され、

は表します現在のプロジェクトのルートパス#プログラムにブレークポイントを追加するには、左側のサイドバーをクリックしてブレークポイントを追加します【吐血まとめ】開発作業効率を倍増させるVSCodeのデバッグと使い方のヒント

#Press

to start debugging. デバッグが成功すると、フローティングウィンドウ操作バーが表示されます。【吐血まとめ】開発作業効率を倍増させるVSCodeのデバッグと使い方のヒント

フローティングウィンドウの操作ボタンの機能は順に表示されます。

#Continue (F5 【吐血まとめ】開発作業効率を倍増させるVSCodeのデバッグと使い方のヒント

)、 Debug nextステップ (F10

シングルステップジャンプ Enter (F11
シングルステップアウト (Shift F11
再デバッグ (Ctrl Shift F5
デバッグ終了 (Shift F5
ログブレークポイント
ログブレークポイントは通常のブレークポイントの一種ですが、 がデバッグ を中断せず、情報をコンソールに記録できる点が異なります。ログブレークポイントは、一時停止または停止できないサービスをデバッグする場合に特に役立ちます。次の手順に進みます:

を使用して変数を使用できます。たとえば、

実行してデバッグ結果を表示します

条件付きブレークポイントは、式の結果が

##示されているように、

インラインブレークポイント

Shift F9

追加の知識ポイント: データパネルの概要

変数を右クリックして、変数値の設定、変数値のコピー、その他の操作を行うことができます

データパネルに焦点を当てると、値を入力して検索およびフィルタリングできます。以下に示すボタンをクリックして、フィルタリングするかどうかを制御します。

モニタリングパネルの [追加] ボタンを直接選択して変数を追加することもできます。

変数を追加した後、変数の変化をリアルタイムでモニタリングできます。

补充知识点：调试服务器时打开一个URI

一段简单的server代码

var express = require(&#39;express&#39;);
var app = express();

app.get(&#39;/&#39;, function(req, res) {
  res.send(&#39;Hello World!&#39;);
});

app.listen(3000, function() {
  console.log(&#39;Example app listening on port 3000!&#39;);
});

配置launch.json，以支持打开URI

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",

  "serverReadyAction": {
    "pattern": "listening on port ([0-9]+)",
    "uriFormat": "http://localhost:%s",
    "action": "openExternally"
  }
}

pattern

uriFormat

%s

pattern

按F5调试，会自动打开浏览器，且会在下图所示处中断，当继续执行后，浏览器才能看到输出了server的内容

终局：各场景调试实战

调试NodeJS项目

断点的基本使用

调试Typescript项目

调试TS项目前，先创建一个TS项目
- 先初始化一个ts程序，生成默认的tsconfig.json文件
```
# 终端运行
tsc --init
```
- 打开tsconfig.json文件，开启sourceMap选项和指定编译后输出的路径
VS Code 内置了对 Ts 调试的支持。为了支持调试 Ts 与正在执行的 Js 代码相结合，VS Code 依赖于调试器的source map在 Ts 源代码和正在运行的 Js 之间进行映射，所以需要需要开启sourceMap选项。
```
{
    "sourceMap": true,
    "outDir": "./out"
}
```
- 新建index.ts文件，写一个基本的ts代码
```
const num: number = 123;
console.log(num);

function fn(arg: string): void {
  console.log(&#39;fn&#39;, arg);
}

fn("Hello");
```
手动编译调试TS 在上述的ts基本项目中：
- 终端执行ts的编译命令tsc
- 此时可以看到生成了out文件夹，里面包含一个index.js和一个index.js.map文件
- 在index.ts中随意添加一个断点
- 按F5或者运行 -> 启动调试，此时可以看到可以正常debug调试
通过构建任务构建调试TS
- 按Ctrl+Shift+B或选择终端 -> 运行生成任务，此时会弹出一个下拉菜单
- 选择tsc构建选项，此时可以看到自动生成了编译文件
注意，如果你使用的是其他终端(比如cmder)的话，有可能会生成不了，如下图所示，使用默认的powershell即可：
- 调试的话和上述步骤一样，在有了编译后的文件后，按F5即可
监视改变并实时编译
- 按Ctrl + Shift + B选择监视选项，可以实时监视文件内容发生变化，重新编译
- 如下图所示，会实时编译

补充知识点：tasks配置文件的创建方式

方法1：点击终端 -> 配置任务 -> 选择任务可以生成对应的tasks.json配置

方法2：点击终端 -> 运行生成任务 -> 点击设置图标也可以生成对应的tasks.json配置

补充知识点：每次调试时重新编译

按上述的操作已经生成了task.json配置文件

{
	"version": "2.0.0",
	"tasks": [
    {
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "problemMatcher": [
        "$tsc"
      ],
      "group": "build",
      "label": "tsc: 构建 - tsconfig.json"
    }
  ]
}

点击运行 -> 添加配置 -> 选择nodejs

在生成的launch.json文件中，添加preLaunchTask字段，值是tasks.json的label值，一定要相同，注意大小写。该字段的作用是在执行命令前先执行改task任务。

outFiles

ts

js

在index.ts文件中按F5启动调试，可以看到调试前已经生成了编译文件，而后就可以正常调试了。

补充知识点：VsCode的TS版本说明

vscode本身内置了对ts的支持
vscode内置的ts版本（即工作区版本），仅仅用于IntelliSense（代码提示），工作区ts版本与用于编译的ts版本无任何关系。

在状态栏选择typescript的图标，选择版本切换

选择你需要的版本即可

调试html项目

创建html，引入ts编译后的js文件

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h3>Hello</h3>
  <script src="./out/index.js"></script>
</body>
</html>

ts源文件如下：

const num: number =  1221;
console.log(num);

function fn(arg: string): void {
  console.log(&#39;fn&#39;, arg);
}

document.body.append(&#39;World&#39;)

fn("he");

打debug

launch.json启动命令配置

{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "file:///E:/demo/vscode/debug/ts/index.html",
      "preLaunchTask": "tsc: 构建 - tsconfig.json",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

选择我们的启动命令

按F5可以正常唤起chrome浏览器，并在vscode的ts源码处会有debug效果

调试Vue项目的两种方式

不使用vscode插件Debugger for chrome的方法

初始化vue项目，配置vue.config.js，指定要生成sourceMaps资源

module.exports = {
  configureWebpack: {
    // 生成sourceMaps
    devtool: "source-map"
  }
};

根目录下创建./vscode/launch.json文件 或者选择运行 -> 添加配置 -> Chrome

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}",
      "breakOnLoad": true,
      "pathMapping": {
        "/_karma_webpack_": "${workspaceFolder}"
      },
      "sourceMapPathOverrides": {
        "webpack:/*": "${webRoot}/*",
        "/./*": "${webRoot}/*",
        "/src/*": "${webRoot}/*",
        "/*": "*",
        "/./~/*": "${webRoot}/node_modules/*"
      },
      "preLaunchTask": "serve"
    }
  ]
}

添加任务脚本

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "serve",
      "type": "npm",
      "script": "serve",
      "isBackground": true,
      "problemMatcher": [
        {
          "base": "$tsc-watch",
          "background": {
            "activeOnStart": true,
            "beginsPattern": "Starting development server",
            "endsPattern": "Compiled successfully"
          }
        }
      ],
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}

npm run serve

按F5启动调试即可

launch.json

preLaunchTask

tasks.json

label

更多详细内容，大家可以点击这里的参考文档查阅。 https://github.com/microsoft/vscode-recipes/tree/main/vuejs-cli

借助vscode插件Debugger for Chrome在Chrome中调试

第一步还是初始化vue项目，添加vue.config.js文件配置，指定要生成sourceMaps资源

module.exports = {
  configureWebpack: {
    // 生成sourceMaps
    devtool: "source-map"
  }
};

vscode中扩展中安装Debugger for Chrome插件，并确保没有禁用插件

手动启动项目的运行, 此方式不需要配置tasks.json任务

# 终端执行命令，启动项目
npm run serve

按F5启动调试即可

更多详细内容，请点击这里的参考文档查阅。 https://vuejs.org/v2/cookbook/debugging-in-vscode.html

借助vscode插件`Debugger for Firfox`在Firefox中调试

和Debugger for Chrome基本一样，区别在于安装Debugger for Firfox插件，并在launch.json配置中，增加调试Firefox的配置即可，配置如下

{
  "version": "0.2.0",
  "configurations": [
    // 省略Chrome的配置...
    // 下面添加的Firefox的配置
    {
      "type": "firefox",
      "request": "launch",
      "reAttach": true,
      "name": "vuejs: firefox",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
    }
  ]
}

调试时选择对应的调试命令即可

Firefox初始启动时不会触发调试，需要刷新一次

调试Electron项目

vue-cli-electron-builder

Electron

在初始化项目后，首先修改vue.config.js文件配置，增加sourceMaps配置：

module.exports = {
  configureWebpack: {
    devtool: &#39;source-map&#39;
  }
}

创建调试配置.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Electron: Main",
      "type": "node",
      "request": "launch",
      "protocol": "inspector",
      "preLaunchTask": "bootstarp-service",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
      },
      "args": ["--remote-debugging-port=9223", "./dist_electron"],
      "outFiles": ["${workspaceFolder}/dist_electron/**/*.js"]
    },
    {
      "name": "Electron: Renderer",
      "type": "chrome",
      "request": "attach",
      "port": 9223,
      "urlFilter": "http://localhost:*",
      "timeout": 0,
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/*"
      }
    },
  ],
  "compounds": [
    {
      "name": "Electron: All",
      "configurations": ["Electron: Main", "Electron: Renderer"]
    }
  ]
}

Electron: Main

Electron: Renderer

compounds[].

configurations

并行的

preLaunchTask

tasks.json

label

preLaunchTask

compounds

configurations

创建任务脚本

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "bootstarp-service",
      "type": "process",
      "command": "./node_modules/.bin/vue-cli-service",
      "windows": {
        "command": "./node_modules/.bin/vue-cli-service.cmd",
        "options": {
          "env": {
            "VUE_APP_ENV": "dev",
            "VUE_APP_TYPE": "local"
          }
        }
      },
      "isBackground": true,
      "args": [
        "electron:serve", "--debug"
      ],
      "problemMatcher": {
        "owner": "custom",
        "pattern": {
          "regexp": ""
        },
        "background": {
          "beginsPattern": "Starting development server\\.\\.\\.",
          "endsPattern": "Not launching electron as debug argument was passed\\."
        }
      }
    }
  ]
}

启动调试

options

"serve-local:dev": "cross-env VUE_APP_TYPE=local VUE_APP_ENV=dev vue-cli-service electron:serve"

主进程调试成功

开始调试渲染进程

ctrl+r

刷新渲染进程后的效果，如下图，已经进入了断点

另一种方式

compounds[].configurations

更多调试Electron的内容，可以点击参考文档查阅。
https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/recipes.html#debugging-with-vscode

补充：更进一步：
VS调试React app文档（https://medium.com/@auchenberg/live-edit-and-debug-your-react-apps-directly-from-vs-code-without-leaving-the-editor-3da489ed905f）
VS调试Next.js文档（https://github.com/microsoft/vscode-recipes/tree/main/Next-js）
更多...（https://code.visualstudio.com/docs/nodejs/debugging-recipes）

其他技巧

技巧一：代码片段（snippets）

从扩展商店中安装snippets

@category:"snippets"

创建全局代码片段

选择文件 -> 首选项 -> 用户片段
选择新建全局代码片段文件

添加代码片段文件的文件名称，会生成.code-snippets后缀的文件
定义用户片段

{
  "自动补全console.log": {
    "scope": "javascript,typescript",
      "prefix": "log",
      "body": [
        "console.log(&#39;$1&#39;);",
        "$2"
      ],
    "description": "输出console.log(&#39;&#39;)"
  }
}

关键词	类型	说明
scope	`string`	代码片段生效的作用域，可以是多个语言，比如`javascript,typescript`表示在js和ts生效，不加`scope`字段表示对所有文件类型生效
prefix	`string	string[]`
body	`string[]`	代码片段内容，数组的每一项会是一行
description	`string`	`IntelliSense` 显示的片段的可选描述
$1 -$ n	-	定义光标的位置，光标根据数字大小按tab依次跳转；注意`$0`是特殊值，表示光标退出的位置，是最后的光标位置。

在键盘输入log时效果如下

6【吐血まとめ】開発作業効率を倍増させるVSCodeのデバッグと使い方のヒント

指定光标处的默认值并选中

"body": [
  "console.log(&#39;${1:abc}&#39;);"
],

6【吐血まとめ】開発作業効率を倍増させるVSCodeのデバッグと使い方のヒント

指定光标处的默认值有多个，并提供下拉选择

用两个竖线包含多个选择值，|多个选择值直接用逗号隔开|

"body": [
  "console.log(&#39;${1:abc}&#39;);",
  "${2|aaa,bbb,ccc|}"
],

6【吐血まとめ】開発作業効率を倍増させるVSCodeのデバッグと使い方のヒント

新建当前工作区的代码片段

只需要选择文件 -> 首选项 -> 用户片段 -> 新建xxx文件夹的代码片段, 新建后会在当前工作区生成.vscode/xxx.code-snippets文件

6【吐血まとめ】開発作業効率を倍増させるVSCodeのデバッグと使い方のヒント

技巧二：Emmet

vscode内置了对Emmet的支持，无需额外扩展。例如html的Emmet演示如下:

【吐血まとめ】開発作業効率を倍増させるVSCodeのデバッグと使い方のヒント

技巧三：对光标处代码变量快速重命名

选中或者光标所处的位置，按F2可以对所有的变量重命名

6【吐血まとめ】開発作業効率を倍増させるVSCodeのデバッグと使い方のヒント

技巧四：代码重构建议

选中要重构的代码，点击出现的黄色小灯的图标

6【吐血まとめ】開発作業効率を倍増させるVSCodeのデバッグと使い方のヒント

选中重构的类型

6【吐血まとめ】開発作業効率を倍増させるVSCodeのデバッグと使い方のヒント

输入新的变量名

【吐血まとめ】開発作業効率を倍増させるVSCodeのデバッグと使い方のヒント

还可以重构到函数

7【吐血まとめ】開発作業効率を倍増させるVSCodeのデバッグと使い方のヒント

TS中还可以提取接口等等

7【吐血まとめ】開発作業効率を倍増させるVSCodeのデバッグと使い方のヒント

补充：VsCode扩展插件开发

VsCode扩展插件可以做什么事情？

定制主题、文件图标
扩展工作台功能
创建webView
自定义新的语言提示
支持调试特定的runtime

基于Yeoman快速开发VsCode插件，步骤如下:

安装Yeoman和用于生成模板的插件VS Code Extension Generator（https://www.npmjs.com/package/generator-code）

# 终端运行，主要node版本需要12及以上，node10会安装报错
npm i -g yo generator-code

运行yo code创建命令，选择要生成的项目模板。这里演示New extension

7【吐血まとめ】開発作業効率を倍増させるVSCodeのデバッグと使い方のヒント

根据提示依次选择

7【吐血まとめ】開発作業効率を倍増させるVSCodeのデバッグと使い方のヒント

生成的内容如下

7【吐血まとめ】開発作業効率を倍増させるVSCodeのデバッグと使い方のヒント

按F5生成编译项目，此时会自动打开一个新窗口
在新窗口按Ctrl+Shfit+P,输入Hello World命令

7【吐血まとめ】開発作業効率を倍増させるVSCodeのデバッグと使い方のヒント

此时会弹出一个弹窗的效果

7【吐血まとめ】開発作業効率を倍増させるVSCodeのデバッグと使い方のヒント

至此，一个最简单的插件就完成了

更多关于VSCode的相关知识，请访问：vscode教程！！

以上が【吐血まとめ】開発作業効率を倍増させるVSCodeのデバッグと使い方のヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript typescript node.js json firefox chrome electron html npm 运算符 for 循环接口 map JS 作用域 github vscode webview https microsoft 重构自动化

声明：

この記事はjuejin.cnで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

前の記事：VSCode の設定方法、Su Shuang の Vue と React コードのデバッグ方法!次の記事：VSCode の設定方法、Su Shuang の Vue と React コードのデバッグ方法!

続きを見る

【吐血まとめ】開発作業効率を倍増させるVSCodeのデバッグと使い方のヒント

基本的なヒント

クイック スタート

よく使用されるショートカット キー

文字数を増やすには、設定ファイルに以下の設定を追加します。定規の補助線

breakpoint 基本的な使用法

以下では、ブレークポイントの基本的な使用法を示す例として、VsCode でのノード プロジェクトの簡単なデバッグを取り上げます。次の記事では、引き続きさまざまな高度なブレークポイントを完了していきます。

条件付きブレークポイントは、式の結果が

Shift F9

补充知识点：调试服务器时打开一个URI

终局：各场景调试实战

调试NodeJS项目

调试Typescript项目

补充知识点：tasks配置文件的创建方式

补充知识点：每次调试时重新编译

补充知识点：VsCode的TS版本说明

调试html项目

调试Vue项目的两种方式

不使用vscode插件Debugger for chrome的方法

借助vscode插件Debugger for Chrome在Chrome中调试

借助vscode插件Debugger for Firfox在Firefox中调试

调试Electron项目

其他技巧

技巧一：代码片段（snippets）

从扩展商店中安装snippets

创建全局代码片段

新建当前工作区的代码片段

技巧二：Emmet

技巧三：对光标处代码变量快速重命名

技巧四：代码重构建议

补充：VsCode扩展插件开发

関連記事

クイックスタート

よく使用されるショートカットキー

以下では、ブレークポイントの基本的な使用法を示す例として、VsCode でのノードプロジェクトの簡単なデバッグを取り上げます。次の記事では、引き続きさまざまな高度なブレークポイントを完了していきます。

借助vscode插件`Debugger for Firfox`在Firefox中调试