• 技术文章 >开发工具 >VSCode

    【吐血总结】VSCode的调试和使用小技巧，让你开发工作效率倍增

    青灯夜游青灯夜游2022-03-09 20:18:23转载3294

    本篇文章给大家总结分享一些VSCode各场景高级调试与使用技巧，让你的日常开发工作效率倍增，希望对大家有所帮助！

    VsCode自从诞生以来，以其各自优异的特性迅速走红。尤其是对于前端开发小伙伴来说，几乎成为必不可少的开发工具。所以，熟练掌握VsCode的各自使用技巧与调试技巧会让你的日常开发工作效率倍增。本文将会以大量图文的方式，从下面几个方面详细介绍VsCode的各种技巧：

    基本技巧

    快速启动

    VsCode安装后，会自动写入环境变量，终端输入code即可唤起VsCode应用程序。

    常用快捷键

    1.png

    2.png

    垂直标尺

    在配置文件中添加如下配置，可以增加字符数标尺辅助线

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

    3.png

    进阶技巧

    断点的基本使用

    下面以在VsCode中快速调试一个Node项目为例，演示断点的基本使用。后文会继续结束各种高级断点。

    4.png

    5.png

    program字段用于指定你的程序入口文件，${workspaceFolder}表示当前项目根路径

    6.png

    7.png

    8.png

    浮窗的操作按钮功能依次为：

    日志断点

    日志断点是普通断点的一种变体，区别在于不会中断调试，而是可以把信息记录到控制台。日志断点对于调试无法暂停或停止的服务时特别有用。步骤如下:

    9.png

    可以使用{}使用变量，比如在此处添加日志断点，b的值为${b}

    10.png

    11.png

    12.png

    表达式条件断点

    条件断点是表达式结果为true时才会进行断点，步骤如下:

    13.png

    14.png

    15.png

    16.png

    命中计数断点

    只有该行代码命中了指定次数，才会进行断点。步骤如下:

    17.png

    18.png

    19.png

    内联断点

    仅当执行到达与内联断点关联的列时，才会命中内联断点。这在调试在一行中包含多个语句的缩小代码时特别有用。比如for循环，短路运算符等一行代码包含多个表达式时会特别有用。步骤如下:

    20.png

    21.png

    补充知识点：数据面板介绍

    22.png

    23.png

    24.png

    25.png

    补充知识点：监听面板介绍

    可以将变量添加到监听面板，实时观察变量的变化。

    26.png

    27.png

    28.png

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

    开发 Web 程序通常需要在 Web 浏览器中打开特定 URL，以便在调试器中访问服务器代码。VS Code 有一个内置功能“ serverReadyAction ”来自动化这个任务。

    var express = require('express');
var app = express();

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

app.listen(3000, function() {
  console.log('Example app listening on port 3000!');
});
    {
  "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映射为URI，其中%s使用pattern中的第一个捕获组替换。最后使用该URI作为外部程序打开的URI。

    29.png

    终局：各场景调试实战

    调试NodeJS项目

    关于NodeJs项目的调试方法，已经在上述的断点的基本使用部分做了介绍，可以网上滚动翻阅。

    调试Typescript项目

    38.png

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

    39.png

    40.png

    41.png

    42.png

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

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

    43.png

    44.png

    注意，如果编译后的js文件不在相应的位置，通过图中的outFiles字段可以指定ts编译后的js路径。

    45.png

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

    修改工作区ts版本的方法：

    46.png

    47.png

    48.png

    调试html项目

    学会了上述ts的调试后，我们尝试调试html文件，并且html文件中引入ts文件:

    <!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>
    const num: number =  1221;
console.log(num);

function fn(arg: string): void {
  console.log('fn', arg);
}

document.body.append('World')

fn("he");

    49.png

    {
  // 使用 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}"
    }
  ]
}

    50.png

    调试Vue项目的两种方式

    下面介绍两种调试vue2项目的3种方法，其他框架的调试也类似：

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

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

    51.png

    {
  "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编译命令。

    注意：此方式的主要点在于launch.json配置文件中，通过preLaunchTask字段指定调试前先运行一个任务脚本，preLaunchTask的值对应tasks.json文件中的label值。

    更多详细内容，大家可以点击这里的参考文档查阅。

    https://github.com/microsoft/vscode-recipes/tree/main/vuejs-cli

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

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

    52.png

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

    53.png

    更多详细内容，请点击这里的参考文档查阅。

    https://vuejs.org/v2/cookbook/debugging-in-vscode.html

    借助vscode插件Debugger for Firfox在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}/" }]
    }
  ]
}

    54.png

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

    调试Electron项目

    Electron很多人都使用过，主要用于开发跨平台的系统桌面应用。那么来看下vue-cli-electron-builder创建的Electron项目怎么调试。步骤如下：

    module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}
    {
  "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\\."
        }
      }
    }
  ]
}

    在主进程相关代码上打上断点，然后启动调试主进程命令就可以调试主进程了

    55.png

    注意，这里的options参数是根据实际的情况，自定义添加我们运行项目时所需要的参数，比如我这里因为启动项目的npm命令是:

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

    56.png

    切换到渲染进程的调试选项，在渲染进程的代码处打上断点，点击调试。注意，此时并不会有断点终端，需要ctrl+r手动刷新软件进程才会看到渲染进程的断点。

    57.png

    58.png

    同时开启渲染进程和主进程的调试，只需要切换到调试全部的选项即可。注意，此种方式因为compounds[].configurations配置是并行执行的，并不一定能保证渲染进程调试一定能附加到主进程调试成功（估计是时机问题），有些时候会调试渲染进程不成功。所以，可以采取上面的方式进行调试。

    59.png

    更多调试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"

    60.png

    创建全局代码片段

    61.png

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

    62.png

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

    63.png

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

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

    64.png

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

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

    65.png

    技巧二：Emmet

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

    66.gif

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

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

    67.png

    技巧四：代码重构建议

    68.png

    69.png

    70.png

    71.png

    72.png

    补充：VsCode扩展插件开发

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

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

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

    73.png

    74.png

    75.png

    76.png

    77.png

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

    以上就是【吐血总结】VSCode的调试和使用小技巧，让你开发工作效率倍增的详细内容，更多请关注php中文网其它相关文章！

    声明：本文转载于：掘金社区，如有侵犯，请联系admin@php.cn删除
    专题推荐：VSCode
    上一篇：怎么配置VSCode，苏爽的调试Vue、React 代码！ 下一篇：自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • VSCode插件开发实战：实现一个代码诊断插件• VSCode中如何进行Golang开发？开发环境配置介绍• 熟记这些VSCode快捷方式，提高你的开发效率！• VSCode中怎么配置同步？官方同步方案分享（强烈推荐）• 详解VSCode中怎么使用代码模板（snippets）
    1/1

    PHP中文网

    首页 首页课程 课程文章文章问答 问答博客博客词典 词典手册 手册资源 资源搜索 搜索APP下载 APP下载