浅析Visual Studio Code断点调试Vue

2024-09-27 11:49:12

很多人习惯在 Chrome 的调试窗口中调试 Vue 代码，或者直接使用 console.log 来观察变量值，这是非常痛苦的一件事，需要同时打开至少 3 个窗体。个人还是更加习惯于断点调试。这篇文章将介绍如何配置 Visual Studio Code 和 Chrome 来完成直接在 VS Code 断点调试代码, 并且在VS Code的调试窗口看到Chrome中console相同的值。

设置 Chrome 远程调试端口

首先我们需要在远程调试打开的状态下启动 Chrome, 这样 VS Code 才能 attach 到 Chrome 上:

Windows

右键点击 Chrome 的快捷方式图标，选择属性
在目标一栏，最后加上--remote-debugging-port=9222 注意要用空格隔开

macOS

打开控制台执行：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Linux

打开控制台执行：

google-chrome --remote-debugging-port=9222

Visual Stuido Code 安装插件

点击 Visual Studio Code 左侧边栏的扩展按钮，然后在搜索框输入Debugger for Chrome并安装插件，再输入，安装完成后点击 reload 重启 VS Code

添加 Visual Studio Code 配置

点击 Visual Studio Code 左侧边栏的调试按钮，在弹出的调试配置窗口中点击设置小齿轮，然后选择 chrome, VS Code 将会在工作区根目录生成.vscode 目录，里面会有一个 lanch.json 文件并会自动打开
用下面的配置文件覆盖自动生成的 lanch.json 文件内容。

{
 // 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": "chrome",
   "request": "attach",
   "name": "Attach to Chrome",
   "port": 9222,
   "webRoot": "${workspaceRoot}/src",
   "url": "http://localhost:8080/#/",
   "sourceMaps": true,
   "sourceMapPathOverrides": {
    "webpack:///src/*": "${webRoot}/*"
   }
  }
 ]
}

修改 webpack 的 sourcemap

如果你是基于 webpack 打包的 vue 项目，可能会存在断点不匹配的问题, 还需要做些修改：

打开根目录下的 config 目录下的 index.js 文件
将dev 节点下的 devtool 值改为 'eval-source-map'
将dev节点下的 cacheBusting 值改为 false

开始调试吧

一切具备了，现在验收成果了

通过第一步的方式以远程调试打开的方式打开 Chrome
在 vue 项目中执行npm run dev以调试方式启动项目
点击 VS Code 左侧边栏的调试按钮，选择 Attach to Chrome 并点击绿色开始按钮，正常情况下就会出现调试控制条。
现在就可以在.vue文件的js代码中打断点进行调试了。

分享Visual Studio原生开发的10个调试技巧

最近碰巧读了Ivan Shcherbakov写的一篇文章,<11个强大的Visual Studio调试小技巧>.这篇文章只介绍了一些有关Visual Studio的基本调试技巧,但是还有其他一些同样有用的技巧.我整理了一些Visual Studio(至少在VS 2008下)原生开发的调试技巧.(如果你是工作在托管代码下,调试器会有更多的特性,在CodeProject中有介绍它们的文章),下面是我的整理的一些技巧: 异常中断 | Break on Exception Watch窗口中的伪变量 |
Visual Studio 2017通过SSH调试Linux上.NET Core

Visual Studio 2017 通过SSH 调试Linux 上.NET Core 应用程序. 本文环境开发环境:Win10 x64 Visual Studio 2017 部署环境:Ubuntu 14.04 x64 .NET Core SDK 1.0.1 Ubuntu上安装.NET Core SDK Ubuntu 14.04 x64 sudo sh -c 'echo "deb [arch=amd64] https://apt-mo.trafficmanager.net/repos/dotn
详解如何使用VisualStudio高效开发调试AndroidNDK

本文介绍了如何使用VisualStudio高效开发调试AndroidNDK,分享给大家,具体如下: 场景场景一:Java层代码与SO的开发分为不同的程序猿负责,开发SO的时候基本上APK的其他文件不会修改. 场景二:主要代码就是C++,Java层代码也只是个DEMO,Java代码基本没啥修改. 常见的做法是: 1. 使用编辑器或者编译器编写C++代码. 2. 使用NDK命令编译SO. 3. 重新打包APK,或者直接替换APK中的SO文件再重签名. 4. 安装到手机. 5. 运行. 6. 崩溃.
C#客户端程序Visual Studio远程调试的方法详解

一,需求来源在开发过程中,可能会要使用Win7 ,Win8 ,Win10等不同版本的系统去做兼容性调试,也有时候会去针对特别的显卡,无线网卡等等硬件设备的机器做优化,有一种较优的方案,那就是使用Visual Studio的远程调试功能,可以直接将测试机作为调试目标,直接跟踪断点和异常,可以像在本机调试一样,迅速的找到错误的地方.,而不需要在测试机安装VS环境. >传统桌面客户端的远程调试相比UWP,ASP等项目来说,配置比较麻烦,因为它是非部署的应用程序,原理是复制编译的文件到远程计算机,通过
visual studio code 调试php方法（图文详解）

简介 php是动态语言没有调试器的话排错起来很是麻烦.vscode可以说是程序员的福音,启动速度快,插件越来越多,跨平台.现在说一下vscode上调试php文件所需文件 xampp 集成服务器 vscode Xdebug php-debug 插件 1: 在vscode中按 F1, 输入ext install php-debug 安装调试插件 2:去 https://xdebug.org/download.php下载php对应版本的插件,php版本可以在xampp中的readme看到,下载这个P
Visual Studio调试技巧汇总

调试是软件开发周期中很重要的一部分.它具有挑战性,同时也很让人疑惑和烦恼.总的来说,对于稍大一点的程序,调试是不可避免的.最近几年,调试工具的发展让很多调试任务变的越来越简单和省时. 1 悬停鼠标查看表达式值调试是很有挑战性的.比如在函数内逐步运行可以看出哪里出错,查看堆栈信息可以知道函数被谁调用等等. 但是无论哪种情况下,查看表达式和局部变量的值都是很麻烦的(把表达式和局部变量放到watch窗口里). 一种更简单的方法,把鼠标停在所需查看的数据上.如果是类或结构,那么点击展开可以很方便快速地
Visual Studio中js调试的方法图解

第一步:在需要打断点处写上 debugger; 第二部:在IE中将禁用脚本调试的钩去掉打开IE -> 工具 -> 选项 -> 高级 -> 去掉禁用脚本调试(Internet Explorer)和禁用脚本调试(其他) 不用调试时记得将IE去掉的钩,钩上,以免打开其它网页报错!
使用Fiddler调试visual studion多个虚拟站点的问题分析

1:localhost.和127.0.0.1.带来的URL行为不一致无法走本地代理,这个无法本地调试的问题并不是个BUG,微软官方是有给出过解释的,这是源于IE浏览器和.NET框架对于本地请求是不走代理的,因而Fiddler无法检测数据.于是为本地地址加.符号,这就带来URL行为不一致的问题. 取当前Context.Request.URL,会发现系统自动将地址中的.符号忽略了,这为我们针对URL编码带来了不一致的问题: 2:target machine actively refused it(
配置Visual Studio 以调试.net framework源代码第1/2页

基本步骤注意,这个功能在Visual Studio 2008 Express版里不支持.1)安装Visual Studio 2008 QFE.这个QFE只是更新一个Visual Studio调试器的DLL,以便可以获取源代码,更多细节参加下载页面.2)运行Visual Studio 2008依次展开Tools->Options->Debugging->General.如果你在Visual Basic Profile环境下运行,你需要将lower left of the Options D
详解使用Visual Studio Code对Node.js进行断点调试

在开发的过程中,几乎不可能一次性就能写出毫无破绽的程序,断点调试代码是一个普遍的需求. 作为前端开发工程师,以往我们开发的JavaScript程序都运行在浏览器端,利用Chrome提供的开发者工具就可以方便的进行源码断点调试.其步骤有四,详情不表,粗略概括如下: 打开Chrome开发者工具: 点击进入Sources标签页,在页面的左侧就能看到JS代码的目录: 找到需要设置断点的源文件,在需要中断的哪行代码左侧单击鼠标左键,就可以设置断点,如果你的代码是uglify过的,则需导入相应的source

浅析Visual Studio Code断点调试Vue

相关推荐

随机推荐