https://code.visualstudio.com/docs/editor/debugging#_launchjson-attributes tasks.json 在项目的 .vscode 目录创建 tasks.json 文件,然后将下方内容粘贴进去: {"version":"2.0.0","tasks":[{"label":"vuejs: start","type":"npm",// 需要执行的命令(对应于 package.json 中的 scripts 命令)"script":...
在src/components/HelloWorld.vue的line90的地方设置一个断点,这里的data函数返回一个字符串。 在根目录打开你惯用的终端并使用 Vue CLI 开启这个应用: npm run serve 来到Debug 视图,选择“vuejs:chrome/firefox”配置,然后按F5或点击那个绿色的 play 按钮。 随着一个新的浏览器...
code是 VS Code 自带的命令,如果你运行时提示没有此命令,可以看官方文档launching-from-the-command-line[2]设置一下。 debug-vuejs-project-with-vscode是我的项目名称。 生成sourcemap 文件 Vite 如果是通过create-vue[3]创建的项目,则修改vite.config.ts配置文件,在开发环境生成 sourcemap 文件。
1. 通过第一步的方式以远程调试打开的方式打开 Chrome 2. 在 vue 项目中执行npm run dev以调试方式启动项目 3. 点击 VS Code 左侧边栏的调试按钮,选择Attach to Chrome并点击绿色开始按钮,正常情况下就会出现调试控制条。 现在就可以在 vue 文件的 js 代码中打断点进行调试了。
直接在 Chrome 的调试窗口中调试 Vue 代码有诸多不便, 好在 Visual Studio Code 中提供了 Debugger for Chrome 插件,能够通过配置直接在 VS Code 断点调试代码, 并且在 VS Code 的调试窗口看到 Chrome 中 console 相同的值,这篇文章就来介绍一下这个配置过程。
在VS Code 中打开你的 Vue 项目,找到你想要调试的文件,并确保该文件的左侧出现了蓝色的小圆点,表示该文件存在于当前的工作区中。 四、设置断点 在你想要设置断点的代码行左侧点击鼠标左键,就可以在那一行上设置一个断点。断点的作用是在执行代码时暂停程序的执行,并且你可以在暂停时查看当前的变量值,甚至修改变量...
code是 VS Code 自带的命令,如果你运行时提示没有此命令,可以看这里设置一下。 debug-vuejs-project-with-vscode是我的项目名称。 生成sourcemap 文件 Vite 如果是通过create-vue创建的项目,则修改vite.config.ts配置文件,在开发环境生成 sourcemap 文件。
首先，我们需要从VS Code官网下载并安装VS Code。然后，在Extensions视图中搜索并安装Vue.js插件和Debugger for Chrome插件。2. 创建Vue项目 在VS Code中，我们可以使用Vue CLI来创建Vue项目。在终端中输入`vue create my-project`命令，然后按照提示填写项目信息即可。3. 配置launch.json文件 在VS Code中，我们需要...
"version": "0.2.0", "configurations": [ { "name": "Launch Microsoft Edge and open the Edge DevTools", "request": "launch", "type": "vscode-edge-devtools.debug", "url": "http://localhost:8080", "sourceMapPathOverrides": {
打个VS Code搜索Debugger for Chrome插件并安装 配置launch.json文件 { "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "vuejs: chrome", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}/src", "breakOnLoad": true, "sourceMapPa...