先决条件

你必须安装好 Chrome 和 VS Code。同时请确保自己在 VS Code 中安装了 Debugger for Chrome 扩展的最新版本。

请通过 Vue CLI,遵循它的 README 中的安装文档安装并创建一个项目。然后进入这个新创建的应用的目录,打开 VS Code。

在 Chrome Devtools 中展示源代码

在可以从 VS Code 调试你的 Vue 组件之前,你需要更新 webpack 配置以构建 source map。做了这件事之后,我们的调试器就有机会将一个被压缩的文件中的代码对应回其源文件相应的位置。这会确保你可以在一个应用中调试,即便你的资源已经被 webpack 优化过了也没关系。

打开 config/index.js 并找到 devtool 属性。将其更新为:

devtool: 'source-map',

从 VS Code 启动应用如果使用 Vue CLI 3 你需要设置 vue.config.js 内的 devtool 属性:

module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}

  

点击在 Activity Bar 里的 Debugger 图标来到 Debug 视图,然后点击那个齿轮图标来配置一个 launch.json 的文件,选择 Chrome 环境。然后将生成的 launch.json 的内容替换成为接下来的两段配置:

{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
]
}

  

在 src/components/HelloWorld.vue 的 line90 的地方设置一个断点,这里的 data函数返回一个字符串。设置一个断点

  1. 在根目录打开你惯用的终端并使用 Vue CLI 开启这个应用:

  2. npm start
  3. 来到 Debug 视图,选择 ‘vuejs: chrome’ 配置,然后按 F5 或点击那个绿色的 play 按钮。

  4. 随着一个新的 Chrome 实例打开 http://localhost:8080,你的断点现在应该被命中了。

在 VS Code 和 Chrome 中调试的更多相关文章

  1. 在 Chrome 中调试 Android 浏览器

    最近需要使用 Chrome Developer Tools 调试 Android 浏览器,但是官方指南并不是很好使,经过一番折腾,终于调试成功了,在此把经验分享给需要的朋友. Chrome Devel ...

  2. 在visual code的debugger for chrome中调试webpack构建的项目

    一直使用chrome中内置的调试器, 感觉世界那么美好, 自从学了react之后,使用visual code作为编辑器, 它提供了很多插件, 其中就包括debugger for chrome, 一款使 ...

  3. 在桌面chrome中调试android设备中的web页面

    准备工作 1, 桌面版chrome 2, Android设备(安装有chrome浏览器) 3, Android-sdk Android-sdk安装及设置 SKD安装 从http://developer ...

  4. 如何在sublime+chrome中调试php代码?

    1.搭建php本地运行环境具体点击如何使用phpstudy本地搭建多站点(每个站点对应不同的端口) 2.下载php_xdebug.dll, [5.3版以上的php下载地址]http://pecl.ph ...

  5. 在Chrome+Visual Studio中调试asp.net程序很慢的问题(Firefox也有类似问题)

    在Chrome+Visual Studio中调试asp.net程序很慢的问题(Firefox也有类似问题) 今天开始起在Chrome中调试,发现问题主要出在菜单栏(layout文件)中,google了 ...

  6. chrome中 GET /undefined 404

    Chrome中调试网站,会出现 这是由 crxMouse Chrome™ 手势 引起的,关闭即可

  7. vscode(Visual Studio Code)中安装Debugger for Chrome插件调试页面

    最近换了下编辑器,改用vscode(Visual Studio Code),很喜欢它左边显示的文件路径,轻松新建文件夹和文件,也喜欢它的编码转换功能,gbk和utf-8可以随时切换,因为公司网站有些页 ...

  8. Chrome 中的 JavaScript 断点设置和调试技巧 (转载)

    原文地址:http://han.guokai.blog.163.com/blog/static/136718271201321402514114/ 你是怎么调试 JavaScript 程序的?最原始的 ...

  9. SharePoint Framework 在Visual Studio Code中调试你的本地解决方案

    博客地址:http://blog.csdn.net/FoxDave Visual Studio Code不知道大家都有没有,界面清爽,编辑快速,是一个非常好的前端开发工具.本文介绍如何使用Goog ...

随机推荐

  1. 线程安全的CopyOnWriteArrayList介绍

    证明CopyOnWriteArrayList是线程安全的 先写一段代码证明CopyOnWriteArrayList确实是线程安全的. ReadThread.java import java.util. ...

  2. raw_socket(原始套接字)以及普通socket使用终极总结

      一.传输层socket(四层socket,普通socket) 可参考本人以下博客: Windows Socket编程之UDP实现大文件的传输:http://blog.csdn.net/luchen ...

  3. 9.7 dubbo心跳机制

    dubbo的心跳机制: 目的:检测provider与consumer之间的connection连接是不是还连接着,如果连接断了,需要作出相应的处理. 原理: provider:dubbo的心跳默认是在 ...

  4. Spring.profiles多环境配置最佳实践

    转自:https://www.cnblogs.com/jason0529/p/6567373.html Spring的profiles机制,是应对多环境下面的一个解决方案,比较常见的是开发和测试环境的 ...

  5. Html5游戏框架createJS组件--EaselJS

    CreateJS库是一款HTML5游戏开发的引擎,是一套可以构建丰富交互体验的HTML5游戏的开源工具包,旨在降低HTML5项目的开发难度和成本,让开发者以熟悉的方式打造更具现代感的网络交互体验. 掌 ...

  6. npm install node-sass失败

    Cannot download "https://github.com/sass/node-sass/releases/download/v3.8.0/win32-x64-46_bindin ...

  7. 阿里云日志服务采集自建Kubernetes日志(标准输出日志)

    日志服务支持通过Logtail采集Kubernetes集群日志,并支持CRD(CustomResourceDefinition)进行采集配置管理.本文主要介绍如何安装并使用Logtail采集Kuber ...

  8. 一张图作为Python入门(图片来自网络)

  9. wamp设置实现本机IP或者局域网访问

    在 httpd.conf 中查找 Allow from 127.0.0.1 Order Deny,Allow Deny from all Allow from 127.0.0.1 在此下面加上 All ...

  10. linux下编译安装pthreads扩展

    这里讲的是如何编译安装pthreads,以后编译安装其他PHP扩展可以参考此方法. 下载pthreads源码:http://pecl.php.net/package/pthreads 首先确定安装的p ...