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

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

2023-11-16 786
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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
阿甘兄
目录
相关文章
中间件小哥
|
10月前
|
人工智能 自然语言处理 Java
DeepSeek 满血版在 VScode 和 IDEA 中怎么用？手把手教程来了
沉默王二分享了通义灵码的使用教程，这款插件集成了DeepSeek-R1和Qwen等模型，支持Java、Python、Go等多种编程语言，适用于IDEA、VSCode等开发环境。它不仅能提供智能问答、代码补全和Bug修复功能，还能通过“AI程序员”实现多文件代码修改。体验流畅，算力充足，无需担心限流问题。文章详细介绍了安装步骤及各项功能的实际操作，展示了其在提升开发效率方面的强大实力。目前，通义灵码正持续优化，未来将带来更多惊喜。
中间件小哥
2392 1
竹相_左小空空
|
11月前
|
人工智能 网络安全 开发工具
vscode代码推送到github库菜鸡专用教程
vscode代码推送到github库菜鸡专用教程
竹相_左小空空
2372 3
人人都是码农
|
JavaScript 前端开发 jenkins
抛弃node和vscode，如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下，仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库，直接编写HTML文件实现页面功能，展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具，但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器，提供了一种高效、轻量的开发思路。
人人都是码农
324 10
暗夜星空313-11407
|
前端开发 搜索推荐 C++
Marp 教程：如何在 VSCode 中引入自定义样式和主题
本文介绍了如何在 Marp 中引入自定义样式和主题，使你的幻灯片更加个性化和独特。首先，你需要安装 VSCode 和 Marp 插件，了解 Marp 的基本结构。接着，通过创建自定义 CSS 文件并在 Markdown 文件中引入，实现样式定制。此外，还可以创建和使用自定义主题，以及进行高级自定义，如调整布局、引入自定义字体和定义复杂动画。最后，使用 Marp 的预览功能实时查看效果。
暗夜星空313-11407
1448 0
暗夜星空313-11407
|
前端开发 C++
Marp 教程：使用 VSCode 编写专业 PPT
Marp 是一款基于 Markdown 的幻灯片制作工具，结合 VSCode 的强大编辑功能，可让你高效地创建专业 PPT。本教程将指导你如何在 VSCode 中安装 Marp 插件、配置主题和样式，并使用 Markdown 语法创建和美化幻灯片。内容包括基本结构、布局、图片与图表插入、表格制作，以及高级功能如动画效果、数学公式和代码高亮。最后，你将学会如何预览和导出幻灯片。
暗夜星空313-11407
1804 0
风吹落叶花飘荡
|
JavaScript 前端开发 编译器
TypeScript教程（一）在vscode中的配置TypeScript环境
本文是一篇TypeScript入门教程，介绍了在VS Code中配置TypeScript环境的步骤，包括安装Node.js、使用npm安装TypeScript、配置npm镜像源、安装VS Code的TypeScript扩展，以及创建和运行一个简单的TypeScript "Hello World"程序。
风吹落叶花飘荡
1241 2
TypeScript教程（一）在vscode中的配置TypeScript环境
平凡程序猿~
|
编译器 C语言 C++
VSCode安装配置C语言（保姆级教程）
VSCode安装配置C语言（保姆级教程）
平凡程序猿~
2040 5
java冯坚持
|
Web App开发 JSON JavaScript
vue学习：chrome 中 vuetools 开发插件 的下载、安装
这篇文章介绍了如何在Chrome浏览器中下载、安装并测试Vue.js开发插件——vue-devtools。
java冯坚持
3782 0
vue学习：chrome 中 vuetools 开发插件 的下载、安装
nanshaws
|
Linux C语言 C++
vsCode远程执行c和c++代码并操控linux服务器完整教程
这篇文章提供了一个完整的教程，介绍如何在Visual Studio Code中配置和使用插件来远程执行C和C++代码，并操控Linux服务器，包括安装VSCode、安装插件、配置插件、配置编译工具、升级glibc和编写代码进行调试的步骤。
nanshaws
3265 0
vsCode远程执行c和c++代码并操控linux服务器完整教程
土木林森
|
JavaScript 前端开发 开发者
【颠覆你的前端世界！】VSCode + ESLint + Prettier：一键拯救Vue代码于水深火热之中，打造极致编程体验之旅！
【8月更文挑战第9天】随着前端技术的发展，保持代码规范一致至关重要。本文介绍如何在VSCode中利用ESLint和Prettier检查并格式化Vue.js代码。ESLint检测代码错误，Prettier保证风格统一。首先需安装VSCode插件及Node.js包，然后配置ESLint和Prettier选项。在VSCode设置中启用保存时自动修复与格式化功能。配置完成后，VSCode将自动应用规则，提升编码效率和代码质量。
土木林森
1214 1

热门文章

最新文章

  • 1
    iOS 调试：通过 Safari/Chrome 调试 WebView
  • 2
    什么？你竟然还没有用这几个chrome插件？
  • 3
    [Chrome Net Stack]用户行为统计算法
  • 4
    Chrome浏览器的跨域问题
  • 5
    Chrome浏览器进程：了解多进程架构优劣的探索
  • 6
    Chrome 87 新特性解读，多年来 Chrome 性能最大提升！
  • 7
    Google Chrome 語音辨識
  • 8
    基于.net开发chrome核心浏览器【四】
  • 9
    实用工具 | 推荐 9 个好用的 Chrome 插件
  • 10
    Dewey – 标记和搜索 Chrome 浏览器书签
  • 1
    解决 VSCode 安装通义灵码后左侧菜单栏不显示按钮的问题
    2764
  • 2
    用通义灵码在VsCode生成新浪新闻某文章HTML页面
    244
  • 3
    【Azure 环境】VS Code登录China Azure(Function)报错 An error occurred while signing in: invalid_request - AADSTS65002
    305
  • 4
    VS Code调试Function报错｜无法加载Diagnostics.Abstractions怎么办？
    273
  • 5
    如何使用vscode的Docker插件管理ubuntu 拉取服务器的镜像以及创建容器
    337
  • 6
    Windows10添加自定义右键菜单VS Code
    534
  • 7
    Linux环境下VSCode快速安装终极指南：debian/ubuntu/linux平台通用
    2438
  • 8
    【Function App】本地通过VS Code调试Function时候遇见无法加载文件错误Microsoft.Extensions.Diagnostics.Abstractions
    309
  • 9
    在VScode环境下配置Python环境的方法
    847
  • 10
    DeepSeek 满血版在 VScode 和 IDEA 中怎么用？手把手教程来了
    2392

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    第五届伏魔挑战赛如约来袭，诚邀各路高手来战！