"trace": true, "sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/*" } } 启动调试 在VS Code中设置断点。 按下F5启动调试,会自动打开Chrome并访问http://localhost:8080。 此时可以在VS Code中查看断点、变量等调试信息。 三、使用console.log进行简单调试 对于一些简单的调试任务,可以使用c...
首先说下souceMap的作用,建立编辑区与实际生产环境的代码行映射。可能说的有些抽象,给出如下例子: 如图所示,由于这个是生产环境压缩的代码,因此只能显示第二行报错 。但生产环境下我们需要快速debug,sourceMap能够告诉我们实际开发环境下代码在哪一行,配置方式有两种: (1)在webpack的配置文件的module.e...
"request": "launch", "name": "vuejs: chrome", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}/src", "breakOnLoad": true, "sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/*" } }, { "type": "firefox", "request":...
下载好以后,老规矩先 npm install 一下安装好依赖文件,然后我们打开package.json文件找到script 标签中的 dev 命令 然后修改配置 在后边加上一段代码 --sourcemap 如下图 然后运行 npm run dev 命令,重新打包生成vue.js文件 这时候也会生成一个对应的vue.js.map文件。 3,新建文件开始打断点调试 根目录下找到 e...
也就是调试配置里多了个 sourceMapPathOverrides: 那怎么映射呢? 可以在源码里随便加个 debugger,在浏览器里看下现在映射的路径是啥: 这里的 webpack://test-vue-debug/src/App.vue?11c4 就是要映射的路径,那映射到哪里呢? 很明显是映射到本地的路径,也就是这样: workspaceRoot 是 vscode 提供的环境变...
“sourceMapPathOverrides”: { “webpack:///src/*”: “${webRoot}/*” } } ] } “` 上面的配置假设您的Vue应用程序运行在本地主机的8080端口上。 3. 启动调试 在VS Code的侧边栏中选择Vue插件,然后点击“Debug”按钮。选择“Vue Debug”配置,然后点击调试按钮启动调试。
"sourceMapPathOverrides":{"webpack:///./src/*": "${webRoot}/*" } }, { "type": "firefox", "request": "launch", "name": "vuejs: firefox", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}/src", "pathMappings": [{ "url": "webpack:///src/", "path": "...
"sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/*" } }, { "type": "firefox", "request": "launch", "name": "vuejs: firefox", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}/src", "pathMappings": [{ "url": "webpack:///src/", "path": "...
执行npm run dev:sourcemap命令,执行成功以后就会在dist目录下生成vue.js.map文件 然后就可以在example目录下,写一些自己想要测试的例子,然后通过debug的形式找到对应内容在代码中的位置 深入源码 Vue 初始化的代码位置 既然要深入了解 Vue 初始化的内容,那么我们就得先找到 Vue 初始化是在哪里进行的,那么查找的方式...
也就是调试配置里多了个 sourceMapPathOverrides: 那怎么映射呢? 可以在源码里随便加个 debugger,在浏览器里看下现在映射的路径是啥: 这里的 webpack://test-vue-debug/src/App.vue?11c4 就是要映射的路径,那映射到哪里呢? 很明显是映射到本地的路径,也就是这样: ...