AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

Vue系列教程（04）- VsCode断点调试（Debugger for Chrome）

2023-11-16 830
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Vue系列教程（04）- VsCode断点调试（Debugger for Chrome）

1. 引言

在前面的章节，已经讲解了Vue的环境搭建以及VsCode的安装使用，有兴趣的同学可以参阅下：

本文主要讲解Vue项目在VsCode下的断点调试。

2. 断点调试

1.首先下载Debugger for Chrome，按下图依次操作

2.创建launch.js，按下图依次点击操作：

在项目，可以看到生成launch.js文件，其内容如下：

3.在package.json启动项目：

4.启动成功后，打断点调试：

其它的细节大家实战中学习，本文到此结束！

文章标签：
JavaScript
Web App开发
前端开发
关键词：
vscode教程
vscode vue
教程vscode
vue Chrome
Chrome vue
阿甘兄
目录
相关文章
34789737
|
6月前
|
JavaScript 安全
vue3使用ts传参教程
Vue 3结合TypeScript实现组件传参，提升类型安全与开发效率。涵盖Props、Emits、v-model双向绑定及useAttrs透传属性，建议明确声明类型，保障代码质量。
34789737
546 0
潜意识Java
|
资源调度 JavaScript 前端开发
创建vue3项目步骤以及安装第三方插件步骤【保姆级教程】
这是一篇关于创建Vue项目的详细指南，涵盖从环境搭建到项目部署的全过程。
潜意识Java
1102 1
nanshaws
|
JavaScript Java CDN
vue3完整教程从入门到精通（新人必学1，vue3快速上手）
本文提供了Vue 3从入门到精通的完整教程，涵盖了创建Vue应用、通过CDN使用Vue、定义网站以及使用ES模块构建版本的步骤和示例代码。
nanshaws
10972 1
vue3完整教程从入门到精通（新人必学1，vue3快速上手）
java冯坚持
|
Web App开发 JSON JavaScript
vue学习：chrome 中 vuetools 开发插件 的下载、安装
这篇文章介绍了如何在Chrome浏览器中下载、安装并测试Vue.js开发插件——vue-devtools。
java冯坚持
4178 0
vue学习：chrome 中 vuetools 开发插件 的下载、安装
nanshaws
|
JavaScript
vue3完整教程从入门到精通（新人必学2，搭建项目）
本文介绍了如何在Vue 3项目中安装并验证Element Plus UI框架，包括使用npm安装Element Plus、在main.js中引入并使用该框架，以及在App.vue中添加一个按钮组件来测试Element Plus是否成功安装。
nanshaws
690 0
vue3完整教程从入门到精通（新人必学2，搭建项目）
CodeQi技术小栈
|
移动开发 JavaScript 编译器
Vue3 系列教程 — Vue 3 简介
Vue3 系列教程 — Vue 3 简介
CodeQi技术小栈
341 4
CodeQi技术小栈
|
JavaScript 前端开发 开发者
Vue3 系列教程 — 为什么选择 Vue 框架? (开篇)
Vue3 系列教程 — 为什么选择 Vue 框架? (开篇)
CodeQi技术小栈
233 3
luckyzf332
|
资源调度 JavaScript PHP
Vue3+ element plus 前后分离admin项目安装教程
Vue3+ element plus 前后分离admin项目安装教程
luckyzf332
452 0
朝阳39
|
API
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate，异步Action，storeToRefs()，修改State的 $patch，$reset
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate，异步Action，storeToRefs()，修改State的 $patch，$reset
朝阳39
4312 1
朝阳39
|
JavaScript
vue3 【提效】自动注册组件 unplugin-vue-components 实用教程
vue3 【提效】自动注册组件 unplugin-vue-components 实用教程
朝阳39
1144 1

热门文章

最新文章

  • 1
    Vue2+Vue3基础入门到实战项目（一）—— 课程学习笔记
  • 2
    Vue中如何进行文件浏览与文件管理
  • 3
    Vue3组件（14）控件属性的设置方式
  • 4
    Vue报错：Error in v-on handler: “ReferenceError: regeneratorRuntime is not defined“
  • 5
    Vue内HTML字符串绑定点击事件
  • 6
    Vue高级与前端项目架构 2
  • 7
    Vue框架简介
  • 8
    Vue实现导出Excel功能
  • 9
    基于Vue项目整合Element UI 做登录和注册表单，如果你看不懂就是我的问题。
  • 10
    尤雨溪：关于 Vue3 和生活，想和前端们聊聊这些
  • 1
    Chrome 下载大文件报错！用 Streamsaver.js 完美填坑
    3763
  • 2
    产品发布策略：如何让Chrome插件在竞争激烈的市场中脱颖而出
    296
  • 3
    开发实战：从0到1实现Chrome元素截图插件的完整过程
    689
  • 4
    从痛点到解决方案：为什么我开发了Chrome元素截图插件
    304
  • 5
    快速搞定Dify+Chrome MCP：打造能操作网页的AI助手
    1516
  • 6
    Win10 Chrome认不出新Emoji？两个扩展搞定显示与输入
    940
  • 7
    快速掌握Dify+Chrome MCP：打造网页操控AI助手
    1175
  • 8
    快速搞定Dify+Chrome MCP：打造能操作网页的AI助手
    1348
  • 9
    基于PyCharm与Mac系统的Chrome历史记录清理工具开发实战
    393
  • 10
    Python + Chrome 爬虫：如何抓取 AJAX 动态加载数据？
    566

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索
    • 下一篇
    PHP：将本地文件上传到阿里云OSS存储