浅析Visual Studio Code断点调试Vue

很多人习惯在 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代码中打断点进行调试了。
赞 (0)

相关推荐

  • 配置Visual Studio 以调试.net framework源代码第1/2页

    配置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进行断点调试

    详解使用Visual Studio Code对Node.js进行断点调试

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

  • Visual Studio调试技巧汇总

    Visual Studio调试技巧汇总

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

  • Visual Studio中js调试的方法图解

    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原生开发的10个调试技巧

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

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

  • 详解如何使用VisualStudio高效开发调试AndroidNDK

    详解如何使用VisualStudio高效开发调试AndroidNDK

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

  • visual studio code 调试php方法（图文详解）

    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

  • C#客户端程序Visual Studio远程调试的方法详解

    C#客户端程序Visual Studio远程调试的方法详解

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

  • Visual Studio 2017通过SSH调试Linux上.NET Core

    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

随机推荐