vscode使用及调试方式和技巧

news2024/9/24 3:28:01

常用快捷键

ctrl + ~	显示隐藏终端面板
Ctrl+\	快速拆分文件编辑
Alt+ ↑↓	移动当前代码行的位置
Ctrl+D	选中当前匹配项
Ctrl+B	切换侧边栏
alt+ 单机左键或长按鼠标滚轮+鼠标左键下拉	添加多处光标
Ctrl+p	快捷键设置

vscode调试

2022年了，该学会用VSCode debug了 - 掘金 (juejin.cn)

之前在html文件里写了点东西，想调试下，启动调试后发现调试的不是我当前打开页面的这个html文件(我想调试index2.html但是一点启动调试总是调试的index.html)，然后搜了下资料原来是需要配置的(默认调试工作目录下的index.html),所以记录下问题

可以自己选择配置

下面是我的简单配置(当然还有很多用法我没去配置,别问为啥问就是一般条件下用不着,vscode支持配置task.json配置和launch.json配置进行调试html文件,我只用了配置launch.json)

{
  // 使用 IntelliSense 了解相关属性。
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "chrome debugger1",
      "type": "chrome",
      "request": "launch",
      //  默认打开的文件--${workspaceRoot}当前打开文件夹的根目录
      "file": "${workspaceRoot}/index.html",
      //  ${workspaceFolder}表示当前工作区的根文件夹及其所有子文件夹
      "webRoot": "${workspaceFolder}"
      //  运行的本地chrome浏览器exe的路径
      // "runtimeExecutable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
      //  调试时运行的url
      // "url": "http://localhost:5500",
      //  调试时运行的端口
      // "port": 5433
    },
    {
      "name": "Chrome debugger2",
      "request": "launch",
      "type": "chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}",
      //  默认打开的文件--${workspaceRoot}当前打开文件夹的根目录
      "file": "${workspaceRoot}/index2.html"
    }
  ]
}

可使用调试快捷键或者点右上角小图标

行动	解释
继续/暂停 F5	继续：恢复正常的程序/脚本执行（直到下一个断点）。暂停：检查在当前行执行的代码并逐行调试。
跨步 F10	将下一个方法作为单个命令执行，而无需检查或遵循其组件步骤。
步入 F11	输入下一个方法以逐行执行其执行。
退出 Shift+F11	在方法或子例程中时，通过完成当前方法的剩余行（就像它是单个命令一样）返回到先前的执行上下文。
重新启动 Ctrl+Shift+F5	终止当前程序执行，然后使用当前运行配置重新开始调试。
停止 Shift+F5