江夏
主 题

vue-cli中调试

  1. 可以在webpack配置之后，直接在浏览器源代码的映射文件打断点调试。
language 复制代码 
configureWebpack: {
  devtool: 'source-map'
}

2.再vscode的调试界面配置以下配置，其中url需保证和当前运行的项目地址一致。（调试中，没有进入到的页面断点也是不会触发的）

language 复制代码 
{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "msedge",
            "request": "launch",
            "name": "针对 localhost 启动 Edge",
            "url": "http://localhost:8092/dating/",
            "webRoot": "${workspaceFolder}"
        }
    ]
}
  1. ]

nuxt中调试

  1. 可以在nuxt.config.ts配置之后，直接在浏览器源程序的映射文件打断点调试。
language 复制代码 
export default defineNuxtConfig({
  debug: process.env.NODE_ENV !== 'production'
})
  1. 也可类似vue-cli一样在vscode配置之后 debugger调试

vite中调试

  1. 可以在nuxt.config.ts配置之后，直接在浏览器源代码的映射文件打断点调试。
  2. 也可类似vue-cli一样在vscode配置之后 debugger调试

nestjs中调试

  1. nestjs为后端服务，自然只能用vscode进行调试了
  2. 在vscode的运行与调试界面增加以下配置，然后在nest程序中打断点。启动所配置的程序，再触发断点条件，即可在编辑器中实时看到，变量得数据变化。
language 复制代码 
{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "启动程序",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}\\src\\main.ts",
            "outFiles": [
                "${workspaceFolder}/**/*.js"
            ]
        }
    ]
}

全部评论(0)