VSCode可视化调试Vue代码

系统管理员 2023-06-27 11:13 17阅读 0赞

## 1.安装扩展Browser Preview ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9saWhlZmVpLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]  
安装完成后在侧栏会多出一个图标，点击后就能打开内置谷歌浏览器  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9saWhlZmVpLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 1]

## 2.安装扩展Debugger for Chrome ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9saWhlZmVpLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 2]

## 3.在项目里创建launch.js文件 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9saWhlZmVpLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 3]  
会在当前项目下生成文件夹和配置文件  
![在这里插入图片描述][20190614101624441.png]

## 4.编辑launch.js ##

url与项目启动后的地址保持一致

{ 
        // 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": "browser-preview",
                "request": "launch",
                "name": "Browser Preview: Launch",
                "url": "http://localhost:8080",
                "webRoot": "${workspaceFolder}/src",
                "sourceMapPathOverrides": { 
                    "webpack:///src/*": "${webRoot}/*",
                    "webpack:///./src/*": "${webRoot}/*"
                }
            }
        ]
    }

## 5.配置项目vue.config.js ##

module.exports = { 
        productionSourceMap: false,
        configureWebpack: { 
            devtool: 'source-map'
        }
        //或者下面这种方式
        //configureWebpack: config => { 
    	// config.devtool = 'source-map'; 
    	//}
    };

## 6.配置项目babel.config.js ##

module.exports = { 
        env: { 
            debug: { 
                sourceMap: true,
                retainLines: true
            }
        },
        //presets: ['@vue/app'] //@vue/cli-plugin-babel 3.x版本
        presets: ['@vue/cli-plugin-babel/preset'] //@vue/cli-plugin-babel 4.x版本
    };

## 7.在项目js文件或vue文件左侧序号行打好断点 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpaGVmZWlfY29kZXI_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9saWhlZmVpLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 4]

## 8.启动vue项目 ##

服务端运行的地址和端口必须与launch.js中保持一致  
![在这里插入图片描述][20190614103122815.png]

## 9.按F5或点击绿色小三角启动调试 ##

默认进入调试状态并出现调试工具条，自动在右侧打开浏览器窗口  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9saWhlZmVpLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 5]

## 10.自动进入设置的断点 ##

按F5：继续下一个断点  
按F10：下一步  
按F11：进入详细步骤（比如函数体内）  
按Shift+F11：跳出详细步骤

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9saWhlZmVpLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 6]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9saWhlZmVpLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 7]

## 注意点： ##

1.这个创建的文件夹必须在项目根目录下，否则断点无法激活  
![在这里插入图片描述][20190614101624441.png]  
2.**launch.js**、**vue.config.js**、**babel.config.js**配置文件在不同版本上会有差异，根据自己的版本来配置

3.修改**launch.js**、**vue.config.js**、**babel.config.js**这些配置文件后，手动`npm run serve`重启下项目

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9saWhlZmVpLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200106122302404.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9saWhlZmVpLmJsb2cuY3Nkbi5uZXQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9saWhlZmVpLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200106122624903.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9saWhlZmVpLmJsb2cuY3Nkbi5uZXQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9saWhlZmVpLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200106122903136.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9saWhlZmVpLmJsb2cuY3Nkbi5uZXQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9saWhlZmVpLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200106123132401.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9saWhlZmVpLmJsb2cuY3Nkbi5uZXQ=,size_16,color_FFFFFF,t_70
[20190614101624441.png]: https://img-blog.csdnimg.cn/20190614101624441.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpaGVmZWlfY29kZXI_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190614104005482.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpaGVmZWlfY29kZXI=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9saWhlZmVpLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191231113153676.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9saWhlZmVpLmJsb2cuY3Nkbi5uZXQ=,size_16,color_FFFFFF,t_70
[20190614103122815.png]: https://img-blog.csdnimg.cn/20190614103122815.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9saWhlZmVpLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200106134833692.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9saWhlZmVpLmJsb2cuY3Nkbi5uZXQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9saWhlZmVpLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200106135749353.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9saWhlZmVpLmJsb2cuY3Nkbi5uZXQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9saWhlZmVpLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20191231121344622.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9saWhlZmVpLmJsb2cuY3Nkbi5uZXQ=,size_16,color_FFFFFF,t_70