search

WangShuXian6 / blog

FE-BLOG
https://wangshuxian6.github.io/blog/
MIT License
46 stars 10 forks source link

Visual Studio Code [VSCode] #125

Open WangShuXian6 opened 3 years ago

WangShuXian6 commented 3 years ago

Visual Studio Code

WangShuXian6 commented 3 years ago

Visual Studio Code 断点调试

浏览器调试

设置断点

image

按F5 配置 VSCode 连接到 Chrome

会打开 .vscode/launch.json 文件 ，修改端口为当前项目的端口 

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

F5 开始调试

image

WangShuXian6 commented 1 year ago

Windows WSL in VSCode

在VSCode中使用WSL环境编译Windows本地项目

插件 WSL https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl WSL 扩展允许您在 Windows 上使用 VS Code 来构建在 Windows 子系统 for Linux （WSL） 上运行的 Linux 应用程序。您可以在使用基于 Linux 的工具、运行时和实用程序进行开发时获得 Windows 的所有生产力。 安装后，点击 VSCode 左下角图标即可 image

在Windows中使用Linux环境调试Windows本地项目

点击 VSCode 左下角图标

image

VSCode 打开windows 本地项目