衡水网站建设 燕丰收,黑龙江牡安建设有限公司网站,天津做网站找津坤科技专业,注册网站域名的入口是起因 每个应用#xff0c;不论大小#xff0c;都需要理解程序是如何运行失败的。当我们写的程序没有按照自己写的逻辑走的时候#xff0c;我们就会逐步一一排查问题。在平常开发过程中我们可能会借助 console.log 来排查,但是现在我们可以借助 VS Code 断点来调试项目。 前…起因 每个应用不论大小都需要理解程序是如何运行失败的。当我们写的程序没有按照自己写的逻辑走的时候我们就会逐步一一排查问题。在平常开发过程中我们可能会借助 console.log 来排查,但是现在我们可以借助 VS Code 断点来调试项目。 前置条件 浏览器Chrome编辑器VS Codevscode扩展插件Debugger for Chrome项目搭建Vue CLI 3 vue项目断点调试主要有两种方式 一浏览器断点调试 在可以从 Chrome 浏览器调试你的 Vue 组件之前你需要更新 webpack 配置以构建 source map。做了这件事之后我们的浏览器就有机会将一个被压缩的文件中的代码对应回其源文件相应的位置。这会确保你可以在一个应用中调试即便你的资源已经被 webpack 优化过了也没关系 source map可以生成一个源代码的映射文件.map文件可以让你打包压缩的代码指向回源代码。 vue-cli3设置source map 使用vue-cli3搭建项目在项目根目录vue.config.js文件配置相对应的devtool,集体devtool配置详情介绍可以参考我之前写的webpack文章 Devtool | webpack //vue.config.js module.exports {...configureWebpack: {devtool: source-map} } npm跑起项目后在Chrome浏览器F12在控制台就可以进行相对应的断点调试了 注devtool 设置成eval-cheap-module-source-map打包编译速度会比source-map更快所以建议在开发环境设置成eval-cheap-module-source-map,生成环境设置成cheap-module-source-map,更多配置可以查看webpack文档 二、VS Code断点调试 步骤一安装Debugger for Chrome插件 步骤二配置launch.json文件 {// 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。// 欲了解更多信息请访问: https://go.microsoft.com/fwlink/?linkid830387version: 0.2.0,configurations: [{type: chrome,request: launch,name: 针对 localhost 启动 Chrome,breakOnLoad: true,url: http://localhost:8080,webRoot: ${workspaceFolder},skipFiles: [node_internals/**/*.js, //跳过node核心模块代码${workspaceFolder}/node_modules/**,${workspaceFolder}/node_modules/**/*.js,${workspaceFolder}/src/node_modules/**/*.js,${workspaceFolder}/src/asserts/js/webpack:/app/webpack/**, //忽略webpack源码${workspaceFolder}/src/asserts/js/webpack:/app/node_modules/** //忽略各种包文件源码],sourceMapPathOverrides: { //指定生成的sourceMap途径参看浏览器生成的 .目录和src目录webpack:///src/*: ${webRoot}/*,webpack:///./src/*: ${webRoot}/*}}] } 1、使用插件调试Microsoft Edge Tools for VS Code 1、在是VSCode中下载Microsoft Edge Tools for VS Code插件 2、使用Microsoft Edge Tools for VS Code插件做调试 a、点击侧边栏上的Microsoft Edge Tools for VS Code插件图标会提示你在launch.json中生成相关的调试配置信息生成这个文件之后可以添加其他的调试配置信息但是请不要删除任何东西否则插件启动调试的时候就会提示你重新生成与它相关的配置信息。 {configurations: [{type: pwa-msedge,name: Launch Microsoft Edge,request: launch,runtimeArgs: [--remote-debugging-port9222],url: /home/huanzi/.vscode/extensions/ms-edgedevtools.vscode-edge-devtools-2.1.1/out/startpage/index.html, // Provide your projects url to finish configuringpresentation: {hidden: true}},{type: pwa-msedge,name: Launch Microsoft Edge in headless mode,request: launch,runtimeArgs: [--headless,--remote-debugging-port9222],url: /home/huanzi/.vscode/extensions/ms-edgedevtools.vscode-edge-devtools-2.1.1/out/startpage/index.html, // Provide your projects url to finish configuringpresentation: {hidden: true}},{type: vscode-edge-devtools.debug,name: Open Edge DevTools,request: attach,url: /home/huanzi/.vscode/extensions/ms-edgedevtools.vscode-edge-devtools-2.1.1/out/startpage/index.html, // Provide your projects url to finish configuringpresentation: {hidden: true}}],compounds: [{name: Launch Edge Headless and attach DevTools,configurations: [Launch Microsoft Edge in headless mode,Open Edge DevTools]},{name: Launch Edge and attach DevTools,configurations: [Launch Microsoft Edge,Open Edge DevTools]}] } b、配置vue项目的vue.config.js配置的文件3.x版本以上的VUE-CLI就用以下配置 module.exports {configureWebpack: {devtool: source-map,}, }; c、启动项目之后对launch.json做如下修改即可启用插件像IDEA一样调试项目。一定要在原来的基础上增加主要是增加url: http://localhost:8080,webRoot: ${workspaceFolder}这两个配置 url: http://localhost:8080这个就是启动项目后自己的项目访问路劲。 webRoot: ${workspaceFolder}这个是项目源码位置注意新版的VsCode中${workspaceFolder}已经包含了src目录这里直接写${workspaceFolder}就可以如果启动调试的时候提示无法 连接连接到目标那么试着改成${workspaceFolder}/src。 {configurations: [{type: pwa-msedge,name: Launch Microsoft Edge,request: launch,runtimeArgs: [--remote-debugging-port9222],url: http://localhost:8080,webRoot: ${workspaceFolder},presentation: {hidden: true},smartStep: true, //自动跳过未映射的代码skipFiles: [node_internals/**/*.js, //跳过node核心模块代码${workspaceFolder}/node_modules/**/*.js,${workspaceFolder}/src/node_modules/**/*.js,${workspaceFolder}/src/asserts/js/webpack:/app/webpack/**, //忽略webpack源码${workspaceFolder}/src/asserts/js/webpack:/app/node_modules/** //忽略各种包文件源码] //跳过文件},{type: pwa-msedge,name: Launch Microsoft Edge in headless mode,request: launch,runtimeArgs: [--headless,--remote-debugging-port9222],url: http://localhost:8080,webRoot: ${workspaceFolder},presentation: {hidden: true},smartStep: true, //自动跳过未映射的代码skipFiles: [node_internals/**/*.js, //跳过node核心模块代码${workspaceFolder}/node_modules/**/*.js,${workspaceFolder}/src/node_modules/**/*.js,${workspaceFolder}/src/asserts/js/webpack:/app/webpack/**, //忽略webpack源码${workspaceFolder}/src/asserts/js/webpack:/app/node_modules/** //忽略各种包文件源码] //跳过文件},{type: vscode-edge-devtools.debug,name: Open Edge DevTools,request: attach,url: http://localhost:8080,webRoot: ${workspaceFolder},presentation: {hidden: true},smartStep: true, //自动跳过未映射的代码skipFiles: [node_internals/**/*.js, //跳过node核心模块代码${workspaceFolder}/node_modules/**/*.js,${workspaceFolder}/src/node_modules/**/*.js,${workspaceFolder}/src/asserts/js/webpack:/app/webpack/**, //忽略webpack源码${workspaceFolder}/src/asserts/js/webpack:/app/node_modules/** //忽略各种包文件源码] //跳过文件}],compounds: [{name: Launch Edge Headless and attach DevTools,configurations: [Launch Microsoft Edge in headless mode,Open Edge DevTools]},{name: Launch Edge and attach DevTools,configurations: [Launch Microsoft Edge,Open Edge DevTools]}] } d、点击Microsoft Edge Tools for VS Code插件Launch Project按钮开始代码调试 2、使用VSCode自带调试功能做调试 1、配置vue项目的vue.config.js配置的文件3.x版本以上的VUE-CLI就用以下配置 module.exports {configureWebpack: {devtool: source-map,}, }; 2、启动项目后点击侧边栏中的调试按钮会提示你生成launch.json文件对launch.json做如下修改即可启用插件像IDEA一样调试项目。 注意经过个人验证使用VSCode自带的调试功能的时候webRoot需要配置成 ${workspaceFolder}/src这样才行否则就是报错不能连接到目标的错误而无法启动调试。 {configurations: [{name: Launch Chrome,request: launch,type: chrome,url: http://localhost:8080,webRoot: ${workspaceFolder}/src}] } 3、接下来开始调试项目其他和插件使用一样唯一的区别在于插件将浏览器集成在VSCode中而VSCode自带的调试功能如果不下载Chrome插件那么就只能调起外部浏览器调试。