AI 助理
备案控制台登录注册
开发者社区 开发与运维 文章 正文

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

2023-11-16 445 发布于吉林
版权
举报
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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
阿甘兄
+关注
3414文章
目录
打赏
0
0
0
0
242
分享
相关文章
cafehaus
|
2月前
|
JavaScript 前端开发 jenkins
抛弃node和vscode，如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下，仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库，直接编写HTML文件实现页面功能，展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具，但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器，提供了一种高效、轻量的开发思路。
cafehaus
77 10
潜意识Java
|
2月前
|
资源调度 JavaScript 前端开发
创建vue3项目步骤以及安装第三方插件步骤【保姆级教程】
这是一篇关于创建Vue项目的详细指南，涵盖从环境搭建到项目部署的全过程。
潜意识Java
319 1
nanshaws
|
5月前
|
JavaScript Java CDN
vue3完整教程从入门到精通（新人必学1，vue3快速上手）
本文提供了Vue 3从入门到精通的完整教程，涵盖了创建Vue应用、通过CDN使用Vue、定义网站以及使用ES模块构建版本的步骤和示例代码。
nanshaws
2403 0
vue3完整教程从入门到精通（新人必学1，vue3快速上手）
nanshaws
|
5月前
|
JavaScript
vue3完整教程从入门到精通（新人必学2，搭建项目）
本文介绍了如何在Vue 3项目中安装并验证Element Plus UI框架，包括使用npm安装Element Plus、在main.js中引入并使用该框架，以及在App.vue中添加一个按钮组件来测试Element Plus是否成功安装。
nanshaws
179 0
vue3完整教程从入门到精通（新人必学2，搭建项目）
diygwcom
|
5月前
|
资源调度 JavaScript PHP
Vue3+ element plus 前后分离admin项目安装教程
Vue3+ element plus 前后分离admin项目安装教程
diygwcom
149 0
CodeQi技术小栈
|
7月前
|
移动开发 JavaScript 编译器
Vue3 系列教程 — Vue 3 简介
Vue3 系列教程 — Vue 3 简介
CodeQi技术小栈
129 4
CodeQi技术小栈
|
7月前
|
JavaScript 前端开发 开发者
Vue3 系列教程 — 为什么选择 Vue 框架? (开篇)
Vue3 系列教程 — 为什么选择 Vue 框架? (开篇)
CodeQi技术小栈
84 3
土木林森
|
7月前
|
JavaScript 前端开发 开发者
【颠覆你的前端世界！】VSCode + ESLint + Prettier：一键拯救Vue代码于水深火热之中，打造极致编程体验之旅！
【8月更文挑战第9天】随着前端技术的发展，保持代码规范一致至关重要。本文介绍如何在VSCode中利用ESLint和Prettier检查并格式化Vue.js代码。ESLint检测代码错误，Prettier保证风格统一。首先需安装VSCode插件及Node.js包，然后配置ESLint和Prettier选项。在VSCode设置中启用保存时自动修复与格式化功能。配置完成后，VSCode将自动应用规则，提升编码效率和代码质量。
土木林森
762 1
朝阳39
|
8月前
|
JavaScript IDE 开发工具
vue3【2024版】开发环境搭建（含官网和nvm下载切换最新版node，修改node下载源，创建项目，启动项目，安装vscode插件Vue - Official）
vue3【2024版】开发环境搭建（含官网和nvm下载切换最新版node，修改node下载源，创建项目，启动项目，安装vscode插件Vue - Official）
朝阳39
558 3
朝阳39
|
8月前
|
API
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate，异步Action，storeToRefs()，修改State的 $patch，$reset
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate，异步Action，storeToRefs()，修改State的 $patch，$reset
朝阳39
2467 1

热门文章

最新文章

  • 1
    通义灵码插件在VSCode中的运用
    25
  • 2
    AI程序员：通义灵码 2.0应用VScode前端开发深度体验
    44
  • 3
    利用通义灵码AI在VS Code中快速开发扫雷游戏：Qwen2.5-Max模型的应用实例
    19667
  • 4
    vscode代码推送到github库菜鸡专用教程
    22
  • 5
    【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗？-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
    10
  • 6
    vue渲染页面的原理
    62
  • 7
    vscode推送项目到github仓库故障解决1
    17
  • 8
    Pinia 如何在 Vue 3 项目中进行安装和配置？
    13
  • 9
    极致的灵活度满足工程美学：用Vue Flow绘制一个完美流程图
    26
  • 10
    高效工作流：用Mermaid绘制你的专属流程图；如何在Vue3中导入mermaid绘制流程图
    36
  • 1
    vue2和vue3的响应式原理有何不同？
    21
  • 2
    高效工作流：用Mermaid绘制你的专属流程图；如何在Vue3中导入mermaid绘制流程图
    51
  • 3
    管理数据必备；侦听器watch用法详解，vue2与vue3中watch的变化与差异
    29
  • 4
    属性描述符初探——Vue实现数据劫持的基础
    23
  • 5
    你真的会使用Vue3的onMounted钩子函数吗？Vue3中onMounted的用法详解
    24
  • 6
    极致的灵活度满足工程美学：用Vue Flow绘制一个完美流程图
    42
  • 7
    【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗？-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
    118
  • 8
    Pinia 如何在 Vue 3 项目中进行安装和配置？
    47
  • 9
    vue渲染页面的原理
    93
  • 10
    Vue中的class和style绑定
    48

    • 相关课程

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

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 基于函数计算部署Serverless VSCode WebIDE
    • 下一篇
    阿里云百炼已上线超强推理开源模型QwQ-32B，尺寸更小，性能比肩DeepSeek满血版
    目录
    AI助理

    你好，我是AI助理

    可以解答问题、推荐解决方案等