浅析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 相关文章推荐
纯js实现背景图片切换效果代码
Nov 14 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
Jun 20 Javascript
深入分析Javascript跨域问题
Apr 17 Javascript
jquery选择器简述
Aug 31 Javascript
在JavaScript中模拟类(class)及类的继承关系
May 20 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
Aug 20 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
Angularjs 手写日历的实现代码(不用插件)
Oct 18 Javascript
小程序组件之仿微信通讯录的实现代码
Sep 12 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 Javascript
Angular CLI 使用教程指南参考小结
Apr 10 Javascript
Vue发布项目实例讲解
Jul 17 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代码包装修正版
2008/03/15 PHP
PHP 简单日历实现代码
2009/10/28 PHP
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
javascript css float属性的特殊写法
2008/11/13 Javascript
JavaScript读取中文cookie时的乱码问题的解决方法
2009/10/14 Javascript
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
JS中动态添加事件(绑定事件)的代码
2011/01/09 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
2013/01/03 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
javascript控制台详解
2015/06/25 Javascript
easyui Draggable组件实现拖动效果
2015/08/19 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
AngularJS辅助库browserTrigger用法示例
2016/11/03 Javascript
jQuery图片轮播实现并封装(一)
2016/12/03 Javascript
JS中的数组转变成JSON格式字符串的方法
2017/05/09 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
2019/01/15 Javascript
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
JS Math对象与Math方法实例小结
2019/07/05 Javascript
js new Date()实例测试
2019/10/31 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
2019/12/17 Javascript
JS字符串补全方法padStart()和padEnd()
2020/05/27 Javascript
[52:37]完美世界DOTA2联赛循环赛 Forest vs DM BO2第一场 10.29
2020/10/29 DOTA
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
用Python编写脚本使IE实现代理上网的教程
2015/04/23 Python
Python虚拟环境项目实例
2017/11/20 Python
python GUI库图形界面开发之PyQt5动态加载QSS样式文件
2020/02/25 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
法律专业实习鉴定
2013/12/22 职场文书
商场中秋节广播稿
2014/01/17 职场文书
小学教师个人先进事迹材料
2014/05/17 职场文书
2014最新党员违纪检讨书
2014/10/12 职场文书
采购部2015年度工作总结
2015/07/24 职场文书
linux目录管理方法介绍
2022/06/01 Servers