浅析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 相关文章推荐
jquery Moblie入门—hello world的示例代码学习
Jan 08 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
Aug 01 Javascript
js购物车实现思路及代码(个人感觉不错)
Dec 23 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
Apr 16 Javascript
JSON+HTML实现国家省市联动选择效果
May 18 Javascript
JQuery设置时间段下拉选择实例
Dec 30 Javascript
高性能JavaScript 重排与重绘(2)
Aug 11 Javascript
Bootstrap每天必学之按钮(一)
Nov 24 Javascript
jQuery实现简单隔行变色的方法
Feb 20 Javascript
通过jquery实现页面的动画效果(实例代码)
Sep 18 Javascript
vue基于v-charts封装双向条形图的实现代码
Dec 09 Javascript
JavaScript中MutationObServer监听DOM元素详情
Nov 27 Javascript
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 和 MYSQL
2006/10/09 PHP
PHP XML error parsing SOAP payload on line 1
2010/06/17 PHP
php skymvc 一款轻量、简单的php
2011/06/28 PHP
PHP实现HTML生成PDF文件的方法
2014/11/07 PHP
TP3.2批量上传文件或图片 同名冲突问题的解决方法
2017/08/01 PHP
js本身的局限性 别让javascript做太多事
2010/03/23 Javascript
AlertBox 弹出层信息提示框效果实现步骤
2010/10/11 Javascript
JavaScript游戏之是男人就下100层代码打包
2010/11/08 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
2012/10/11 Javascript
jQuery创建DOM元素实例解析
2015/01/19 Javascript
Jquery遍历Json数据的方法
2015/04/20 Javascript
jquery读取xml文件实现省市县三级联动的方法
2015/05/29 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
ES6学习之变量的解构赋值
2017/02/12 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
2017/12/26 Javascript
[02:25]DOTA2英雄基础教程 生死判决瘟疫法师
2013/12/06 DOTA
机器学习10大经典算法详解
2017/12/07 Python
解决python大批量读写.doc文件的问题
2018/05/08 Python
基于wxPython的GUI实现输入对话框(2)
2019/02/27 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
Python可以实现栈的结构吗
2020/05/27 Python
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
Julep官网:美容产品和指甲油
2017/02/25 全球购物
新西兰床上用品和家居用品购物网站:Adairs
2018/04/27 全球购物
会计专业毕业生自我鉴定
2013/10/29 职场文书
证券期货行业个人的自我评价
2013/12/26 职场文书
节能环保家庭事迹材料
2014/08/27 职场文书
办公室领导干部作风整顿个人整改措施
2014/09/17 职场文书
党员教师四风问题整改措施思想汇报
2014/10/08 职场文书
群众路线自我剖析及整改措施
2014/11/04 职场文书
初中语文教学研修日志
2015/11/13 职场文书
小学教代会开幕词
2016/03/04 职场文书
导游词之蓬莱长岛
2019/12/17 职场文书
动画「进击的巨人」第86话播出感谢绘公开
2022/03/21 日漫
配置Kubernetes外网访问集群
2022/03/31 Servers