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

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

2023-11-16 975
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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
阿甘兄
目录
相关文章
中间件小哥
|
人工智能 自然语言处理 Java
DeepSeek 满血版在 VScode 和 IDEA 中怎么用？手把手教程来了
沉默王二分享了通义灵码的使用教程，这款插件集成了DeepSeek-R1和Qwen等模型，支持Java、Python、Go等多种编程语言，适用于IDEA、VSCode等开发环境。它不仅能提供智能问答、代码补全和Bug修复功能，还能通过“AI程序员”实现多文件代码修改。体验流畅，算力充足，无需担心限流问题。文章详细介绍了安装步骤及各项功能的实际操作，展示了其在提升开发效率方面的强大实力。目前，通义灵码正持续优化，未来将带来更多惊喜。
中间件小哥
4858 1
34789737
|
10月前
|
JavaScript 安全
vue3使用ts传参教程
Vue 3结合TypeScript实现组件传参，提升类型安全与开发效率。涵盖Props、Emits、v-model双向绑定及useAttrs透传属性，建议明确声明类型，保障代码质量。
34789737
705 0
竹相_左小空空
|
人工智能 网络安全 开发工具
vscode代码推送到github库菜鸡专用教程
vscode代码推送到github库菜鸡专用教程
竹相_左小空空
4000 3
潜意识Java
|
资源调度 JavaScript 前端开发
创建vue3项目步骤以及安装第三方插件步骤【保姆级教程】
这是一篇关于创建Vue项目的详细指南，涵盖从环境搭建到项目部署的全过程。
潜意识Java
1233 1
nanshaws
|
JavaScript Java CDN
vue3完整教程从入门到精通（新人必学1，vue3快速上手）
本文提供了Vue 3从入门到精通的完整教程，涵盖了创建Vue应用、通过CDN使用Vue、定义网站以及使用ES模块构建版本的步骤和示例代码。
nanshaws
11213 1
vue3完整教程从入门到精通（新人必学1，vue3快速上手）
风吹落叶花飘荡
|
JavaScript 前端开发 编译器
TypeScript教程（一）在vscode中的配置TypeScript环境
本文是一篇TypeScript入门教程，介绍了在VS Code中配置TypeScript环境的步骤，包括安装Node.js、使用npm安装TypeScript、配置npm镜像源、安装VS Code的TypeScript扩展，以及创建和运行一个简单的TypeScript "Hello World"程序。
风吹落叶花飘荡
1632 2
TypeScript教程（一）在vscode中的配置TypeScript环境
平凡程序猿~
|
编译器 C语言 C++
VSCode安装配置C语言（保姆级教程）
VSCode安装配置C语言（保姆级教程）
平凡程序猿~
3250 5
nanshaws
|
JavaScript
vue3完整教程从入门到精通（新人必学2，搭建项目）
本文介绍了如何在Vue 3项目中安装并验证Element Plus UI框架，包括使用npm安装Element Plus、在main.js中引入并使用该框架，以及在App.vue中添加一个按钮组件来测试Element Plus是否成功安装。
nanshaws
876 0
vue3完整教程从入门到精通（新人必学2，搭建项目）
nanshaws
|
Linux C语言 C++
vsCode远程执行c和c++代码并操控linux服务器完整教程
这篇文章提供了一个完整的教程，介绍如何在Visual Studio Code中配置和使用插件来远程执行C和C++代码，并操控Linux服务器，包括安装VSCode、安装插件、配置插件、配置编译工具、升级glibc和编写代码进行调试的步骤。
nanshaws
4479 0
vsCode远程执行c和c++代码并操控linux服务器完整教程
暗夜星空313-11407
|
前端开发 搜索推荐 C++
Marp 教程：如何在 VSCode 中引入自定义样式和主题
本文介绍了如何在 Marp 中引入自定义样式和主题，使你的幻灯片更加个性化和独特。首先，你需要安装 VSCode 和 Marp 插件，了解 Marp 的基本结构。接着，通过创建自定义 CSS 文件并在 Markdown 文件中引入，实现样式定制。此外，还可以创建和使用自定义主题，以及进行高级自定义，如调整布局、引入自定义字体和定义复杂动画。最后，使用 Marp 的预览功能实时查看效果。
暗夜星空313-11407
1966 0

热门文章

最新文章

  • 1
    解决Chrome插件安装时出现的“程序包无效”问题
  • 2
    什么？你竟然还没有用这几个chrome插件？
  • 3
    如何在Google Chrome浏览器中修复“ Err_SSL_Protocol_Error”？
  • 4
    在Chrome上使用ActiveX控件
  • 5
    cssViewer牛逼的chrome插件
  • 6
    浏览器原理 20 # Chrome开发者工具：利用网络面板做性能分析
  • 7
    15 个可在 Chrome 浏览器上体验 WebGL 的例子
  • 8
    Python+Selenium 自动化-指定chrome驱动运行selenium实例演示，运行指定位置下的浏览器驱动
  • 9
    ubuntu下安装google-chrome遇到的那些问题和解决方案，手把手教你安装
  • 10
    Chrome 92 新增 at 和 randomUUID 方法，Canvas 支持 Display P3 色域
  • 1
    Vue 3性能优化
    637
  • 2
    vue中的keep-alive问题（2）
    691
  • 3
    Vue 3
    1235
  • 4
    vue3使用ts传参教程
    706
  • 5
    基于Vite7.1+Vue3+Pinia3+ArcoDesign网页版webos后台模板
    1115
  • 6
    Vue中如何实现兄弟组件之间的通信
    820
  • 7
    虚拟列表在Vue3中的具体应用场景有哪些？
    1149
  • 8
    除了循环引用，Vue3还有哪些常见的性能优化技巧？
    575
  • 9
    在 Vue 中，如何在回调函数中正确使用 this？
    616
  • 10
    vue3循环引用自已实现
    287

    • 相关课程

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

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索
    • 下一篇
    一条命令迁移，帮你实现 OpenClaw 与 Hermes Agent 记忆互通！