浅析Visual Studio Code断点调试Vue


Posted in Javascript onFebruary 27, 2018

很多人习惯在 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代码中打断点进行调试了。
Javascript 相关文章推荐
由JavaScript中call()方法引发的对面向对象继承机制call的思考
Sep 12 Javascript
js怎么判断flash swf文件是否加载完毕
Aug 14 Javascript
javascript创建对象、对象继承的实用方式详解
Mar 08 Javascript
Javascript打印局部页面实例
Jun 21 Javascript
浅析Bootstrap表格的使用
Jun 23 Javascript
详解使用nvm安装node.js
Jul 18 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
Oct 18 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
Apr 23 Javascript
超轻量级的js时间库miment使用解析
Aug 02 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
Oct 30 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
Jul 30 Javascript
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
angularJs 表格添加删除修改查询方法
Feb 27 #Javascript
ExtJs整合Echarts的示例代码
Feb 27 #Javascript
angularJS实现动态添加,删除div方法
Feb 27 #Javascript
浅谈React中的元素、组件、实例和节点
Feb 27 #Javascript
AngularJS动态添加数据并删除的实例
Feb 27 #Javascript
JS严格模式知识点总结
Feb 27 #Javascript
总结js函数相关知识点
Feb 27 #Javascript
You might like
PHP编程与应用
2006/10/09 PHP
简体中文转换为繁体中文的PHP函数
2006/10/09 PHP
PHP+JS无限级可伸缩菜单详解(简单易懂)
2007/01/02 PHP
ThinkPHP5.0 图片上传生成缩略图实例代码说明
2018/06/20 PHP
PHP多进程通信-消息队列使用
2019/03/08 PHP
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
2010/07/14 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
2020/09/12 Javascript
JQquery的一些使用心得分享
2012/08/01 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
2012/12/10 Javascript
如何用js控制frame的隐藏或显示的解决办法
2013/03/20 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
2015/11/17 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
Web开发必知Javascript技巧大全
2016/02/23 Javascript
Jquery跨域获得Json的简单实例
2016/05/18 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
js实现PC端和移动端刮卡效果
2020/03/27 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
Vue+ElementUI table实现表格分页
2019/12/14 Javascript
在vue项目中 实现定义全局变量 全局函数操作
2020/10/26 Javascript
Python CSV模块使用实例
2015/04/09 Python
Python实现的最近最少使用算法
2015/07/10 Python
Python中static相关知识小结
2018/01/02 Python
对Python的多进程锁的使用方法详解
2019/02/18 Python
python实现中文文本分句的例子
2019/07/15 Python
Pycharm Plugins加载失败问题解决方案
2020/11/28 Python
详解使用CSS3的@media来编写响应式的页面
2017/11/01 HTML / CSS
CSS3贝塞尔曲线示例:创建链接悬停动画效果
2020/11/19 HTML / CSS
Raffaello Network德国:意大利拉斐尔时尚购物网
2019/05/01 全球购物
荷兰鞋类购物网站:Donelli
2019/05/24 全球购物
《四季》教学反思
2014/04/08 职场文书
会员卡清退活动总结
2014/08/27 职场文书
班级光棍节联谊会策划书
2014/10/10 职场文书
单位作风建设自查报告
2014/10/23 职场文书
前端框架ECharts dataset对数据可视化的高级管理
2022/12/24 Javascript