首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

vscode中调试vue工程

在 debug 时,通常的方式如下几种: 源代码中增加 debugger 或者 console.log 在 Chrome 浏览器 Sources 中加断点 vscode 中直接调试,对源码定位准确直观(...第一步: 首先确保 Chrome浏览器已正确安装,并在 vscode 中添加 vscode-chrome-debug 插件; 第二步: 修改 webpack 相关配置,输出 source-map...以 Vue CLI 3.X 为例,vue.config.js 中增加如下配置: module.exports = { chainWebpack: (config) => { if (isDev...第三步: 配置 launch.json 文件,具体配置 vscode-chrome-debug 插件有详细描述。 第四步: 增加断点,启动即可,会开启一个新的浏览器窗口。...其他: 如果 vue 文件中不能加断点,是由于 vscode 配置问题导致,如下修改:首选项 => 设置 => 搜索”debug“ => 功能/调试 => 勾选 Debug:Allow Breakpoints

65430

vscode中调试vue工程

在 debug 时,通常的方式如下几种: 源代码中增加 debugger 或者 console.log 在 Chrome 浏览器 Sources 中加断点 vscode 中直接调试,对源码定位准确直观...第一步: 首先确保 Chrome浏览器已正确安装,并在 vscode 中添加 vscode-chrome-debug 插件; ?...第三步: 配置 launch.json 文件,具体配置 vscode-chrome-debug 插件有详细描述。 ? 第四步: 增加断点,启动即可,会开启一个新的浏览器窗口。...其他: 如果 vue 文件中不能加断点,是由于 vscode 配置问题导致,如下修改:首选项 => 设置 => 搜索”debug“ => 功能/调试 => 勾选 Debug:Allow Breakpoints...其他参考地址: https://github.com/Microsoft/vscode-chrome-debug https://github.com/Microsoft/vscode-recipes/

1.1K21
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    关于vscode断点调试

    很多人习惯在 Chrome 的调试窗口中调试 Vue 代码, 或者直接使用 console.log 来观察变量值, 这是非常痛苦的一件事,需要同时打开至少 3 个窗体。个人还是更加习惯于断点调试。...这篇文章将介绍如何配置 Visual Studio Code 和 Chrome 来完成直接在 VS Code 断点调试代码, 并且在VS Code的调试窗口看到Chrome中console相同的值。...调试 按钮, 在弹出的调试配置窗口中点击 设置 小齿轮, 然后选择 chrome, VS Code 将会在工作区根目录生成.vscode 目录,里面会有一个 lanch.json 文件并会自动打开 用下面的配置文件覆盖自动生成的...sourcemap 如果你是基于 webpack 打包的 vue 项目, 可能会存在断点不匹配的问题, 还需要做些修改: 打开根目录下的 config 目录下的 index.js 文件 将dev 节点下的...现在就可以在.vue文件的js代码中打断点进行调试了。

    1.9K20

    怎样在VSCode中调试C++程序

    概述 VSCode 是目前最热门的IDE之一,在本节,我们将介绍怎样在 VSCode 中进行 C++ 程序的调试。...C/C++ 插件 该插件支持 C/C++ 代码的提示、C++程序调试 以及 C++源码的阅读,是 VSCode 的官方插件 插件地址: https://marketplace.visualstudio.com...创建调试配置文件 准备好源代码并且安装好插件之后,我们可以打开 VSCode 的 调试(debug) 菜单栏,如下图 通过点击图示中的菜单创建 VSCode 的C++调试(debug)配置文件,此时在...关键参数: program: 该配置的值指向带调试信息的二进制程序。我们最终将编译生成的程序放在 build 目录中,所以这里可以填写 ${workspaceFolder}/build/a.out。...preLaunchTask: 该参数定义调试器启动之前的执行任务。默认配置文件中并不包含该参数,我们需要手动添加,用于自动编译变更后的 C++ 代码。 4.3.

    4K00

    VScode调试Linux详解

    方式,远程有一个gdbserver,本地机器通过网络发指令给gdbserver完成调试 6)    基于vscode远程调试Linux       该方法支持调试Linux程序,不要编译器参与,可以完美的将...Makefile工程简单的接管起来调试,可以是基于ssh+vscode方式或者gdb+vscode+gdbserver方式。...本文重点介绍该ssh+vscode方法的使用。...二.基于vscode ssh远程调试Linux实战 1   软件安装 1)服务器安装gdb 注意我们是ssh+vscode方式,没有用到gdbserver,故不需要安装gdbserver。...,就可以启动远程的hello可执行文件,并进行单步,断点等各种调试 5) vscode同样支持attach到某个进程进行在线调试,对线上正在运行的进程进行各种调试和状态查看等

    3.8K30

    VSCode前端调试的几种场景

    VSCode前端调试的几种场景 前言 看了神光的前端调试秘籍通关,以及查询一些资料后总结的。这本小册真的强烈推荐,非常有用,非常有用。...VSCode实现调试主要就是靠的编写lauch.json文件来实现。下面就来看看几种场景。 普通页面 的路径就能发现,这个路径实际是不存在的,所以自然就没有办法编辑。 这是因为Vue生成的sourcemap文件中,存转换前的文件的sources默认存的是相对路径。...(这里判断是vite搞的操作,是因为通过vue-cli搭建的Vue3调试不会出现这个问题) 解决方案就是添加optimizeDeps配置,强制排除依赖项”vue”(解决方案是看的神光大佬的小册评论区知道的...这里可以通过上面的调试脚本启动的方法来验证: VSCode调试配置: { "name": "Launch via NPM", "request": "launch", "runtimeArgs

    1.3K20

    UE4在vscode环境中开发调试

    UnrealVS\VS* 目录下vsix文件,双击运行安装 vs安装UE4.natvis /Engine/Extras/VisualStudioDebugging/UE4.natvis 拷贝到 vs的Common7.../Packages/Debugger/Visualizers目录下,调试时值鼠标移动到变量上,值可见 UE4 使用vscode开发 修改配置后,File菜单项点击生成vscode项目,再启动即可...可以在launch.json中添加如下代码,实现简单的附加调试操作 { “name”: “(Windows) 附加”, “type”: “cppvsdbg”, “request”: “...attach”, “processId”: “${command:pickProcess}” }, c++代码自动补全,改成tag parser(版本较老容易出现错误提示,ue4中个人感觉更好用些,...default是最新版) 或者下载clang(ue4不是标准的C++语法clang和cpp_tool个人感觉都一样) Clang

    2K20

    使用vscode调试你的node应用

    目前个人使用 vscode 进行日常开发, 本文主要介绍 vscode 平台的 debugger 调试功能. vscode 本身就内置了 nodejs 的 debug 支持, 除此之外还有有非常多 debug...[添加配置] 之后 vscode 会在打开项目路径中帮我们新增.vscode/launch.json文件, 文件中已经补充了最基础的配置. { // 使用 IntelliSense 了解相关属性。...很多时候生成的构建配置如果不符合我们的预期, 而又没办法一眼看出问题所在时, 我们就可以对生成配置的过程进行调试....而 vscode 中的attach模式也是一样的道理, 我们可以先以 debug 模式运行程序, 然后通过attach把 vscode 的 debugger 连接到已经运行的程序中去....而launch则可以理解为, vscode 帮我们以 debug 模式来运行程序, 并自动把 vscode 的 debuggerattach到运行的进程中.

    2.6K30
    领券