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

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

2023-11-16 1032
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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开发
前端开发
阿甘兄
目录
相关文章
霍格沃兹测试开发muller老师
|
搜索推荐 C++ 开发者
VSCode安装使用教程，保姆级！
本文介绍了Visual Studio Code（VS Code）的安装和基本使用，包括从官网下载安装包，按照步骤在Windows系统上安装，以及设置个性化主题。此外，还强调了安装插件以增强功能，例如安装简体中文插件，并展示了如何搜索和安装插件。VS Code作为一个免费、开源的轻量级编辑器，其丰富的扩展性和高效性使其成为开发者工具的首选。
霍格沃兹测试开发muller老师
1131 0
JavaPub
|
JSON JavaScript 数据格式
vue在vscode代码格式化
vue在vscode代码格式化
JavaPub
985 2
人人都是码农
|
JavaScript 前端开发 jenkins
抛弃node和vscode，如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下，仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库，直接编写HTML文件实现页面功能，展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具，但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器，提供了一种高效、轻量的开发思路。
人人都是码农
578 10
java冯坚持
|
Web App开发 JSON JavaScript
vue学习：chrome 中 vuetools 开发插件 的下载、安装
这篇文章介绍了如何在Chrome浏览器中下载、安装并测试Vue.js开发插件——vue-devtools。
java冯坚持
4937 0
vue学习：chrome 中 vuetools 开发插件 的下载、安装
土木林森
|
JavaScript 前端开发 开发者
【颠覆你的前端世界！】VSCode + ESLint + Prettier：一键拯救Vue代码于水深火热之中，打造极致编程体验之旅！
【8月更文挑战第9天】随着前端技术的发展，保持代码规范一致至关重要。本文介绍如何在VSCode中利用ESLint和Prettier检查并格式化Vue.js代码。ESLint检测代码错误，Prettier保证风格统一。首先需安装VSCode插件及Node.js包，然后配置ESLint和Prettier选项。在VSCode设置中启用保存时自动修复与格式化功能。配置完成后，VSCode将自动应用规则，提升编码效率和代码质量。
土木林森
1673 1
朝阳39
|
JavaScript IDE 开发工具
vue3【2024版】开发环境搭建（含官网和nvm下载切换最新版node，修改node下载源，创建项目，启动项目，安装vscode插件Vue - Official）
vue3【2024版】开发环境搭建（含官网和nvm下载切换最新版node，修改node下载源，创建项目，启动项目，安装vscode插件Vue - Official）
朝阳39
2474 3
VipSoft
|
Web App开发 资源调度 JavaScript
Chrome 安装 Vue Devtools 调试工具
Chrome 安装 Vue Devtools 调试工具
VipSoft
353 0
朝阳39
|
Web App开发 JavaScript 开发者
谷歌浏览器chrome安装vue调试插件Vue-Devtools
谷歌浏览器chrome安装vue调试插件Vue-Devtools
朝阳39
4423 0
好奇的菜鸟
|
JavaScript
VScode格式化vue文件--避免html属性换行
VScode格式化vue文件--避免html属性换行
好奇的菜鸟
1735 0
aliyun5606190238
|
自然语言处理 API C++
阿里通义推出SmartVscode插件，自然语言控制VS Code，轻松开发应用，核心技术开源！
SmartVscode插件深度解析：自然语言控制VS Code的革命性工具及其开源框架App-Controller
aliyun5606190238
2847 1
阿里通义推出SmartVscode插件，自然语言控制VS Code，轻松开发应用，核心技术开源！

热门文章

最新文章

  • 1
    vue仿微信界面聊天室项目|vue聊天案例
  • 2
    vue中router页面之间参数传递,params失效,建议使用query
  • 3
    Vue3——Router4教程(小满版本)（一）
  • 4
    VUE element-ui之使用外部图标---iconfont篇
  • 5
    VTJ.PRO 首发 MasterGo 设计智能识别引擎，秒级生成 Vue 代码
  • 6
    【Vue3 第十二章】组件注册 & 命名格式
  • 7
    Vue 3 数组变更详解：哪些操作会修改原数组？| 笔记
  • 8
    vue + element Table的数据多选，多页选择数据回显，分页记录保存选中的数据。
  • 9
    vue路由导航守卫（全局守卫、路由独享守卫、组件内守卫）
  • 10
    Vue 自定义组件添加点击(@click)事件
  • 1
    Chrome 下载大文件报错！用 Streamsaver.js 完美填坑
    5976
  • 2
    产品发布策略：如何让Chrome插件在竞争激烈的市场中脱颖而出
    475
  • 3
    开发实战：从0到1实现Chrome元素截图插件的完整过程
    871
  • 4
    从痛点到解决方案：为什么我开发了Chrome元素截图插件
    466
  • 5
    快速搞定Dify+Chrome MCP：打造能操作网页的AI助手
    1981
  • 6
    Win10 Chrome认不出新Emoji？两个扩展搞定显示与输入
    1728
  • 7
    快速掌握Dify+Chrome MCP：打造网页操控AI助手
    1618
  • 8
    快速搞定Dify+Chrome MCP：打造能操作网页的AI助手
    1917
  • 9
    基于PyCharm与Mac系统的Chrome历史记录清理工具开发实战
    630
  • 10
    Python + Chrome 爬虫：如何抓取 AJAX 动态加载数据？
    895

    • 相关课程

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

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
  • 低代码开发师（初级）实战教程
    • 下一篇
    一条命令迁移，帮你实现 OpenClaw 与 Hermes Agent 记忆互通！