Vue系列教程(04)- VsCode断点调试(Debugger for Chrome)

简介: 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.启动成功后,打断点调试:

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

目录
打赏
0
0
0
0
242
分享
相关文章
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
77 10
创建vue3项目步骤以及安装第三方插件步骤【保姆级教程】
这是一篇关于创建Vue项目的详细指南,涵盖从环境搭建到项目部署的全过程。
319 1
|
5月前
|
vue3完整教程从入门到精通(新人必学1,vue3快速上手)
本文提供了Vue 3从入门到精通的完整教程,涵盖了创建Vue应用、通过CDN使用Vue、定义网站以及使用ES模块构建版本的步骤和示例代码。
2403 0
vue3完整教程从入门到精通(新人必学1,vue3快速上手)
|
5月前
|
vue3完整教程从入门到精通(新人必学2,搭建项目)
本文介绍了如何在Vue 3项目中安装并验证Element Plus UI框架,包括使用npm安装Element Plus、在main.js中引入并使用该框架,以及在App.vue中添加一个按钮组件来测试Element Plus是否成功安装。
179 0
vue3完整教程从入门到精通(新人必学2,搭建项目)
Vue3+ element plus 前后分离admin项目安装教程
Vue3+ element plus 前后分离admin项目安装教程
149 0
【颠覆你的前端世界!】VSCode + ESLint + Prettier:一键拯救Vue代码于水深火热之中,打造极致编程体验之旅!
【8月更文挑战第9天】随着前端技术的发展,保持代码规范一致至关重要。本文介绍如何在VSCode中利用ESLint和Prettier检查并格式化Vue.js代码。ESLint检测代码错误,Prettier保证风格统一。首先需安装VSCode插件及Node.js包,然后配置ESLint和Prettier选项。在VSCode设置中启用保存时自动修复与格式化功能。配置完成后,VSCode将自动应用规则,提升编码效率和代码质量。
762 1
vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)
vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)
558 3
|
8月前
|
API
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
2467 1

热门文章

最新文章

AI助理

你好,我是AI助理

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