回顾:
这段时间, 因为工作需要, 需要编写一个前端小项目.
我去, 都多久没碰前端了, 一年多了啊,.还好, 基本功还在.
项目架构
前端结构:vue3 + element-plus
后端结构: flask + sqlalchemy
=======================================================================
因为使用的VScode来实现前端代码的编辑, 这就不免需要进行代码调试debug!!!!
下面结合网上查的资料以及亲身实践, 来说下如何进行调试代码, 这里准备了两种
分类:
-
通过浏览器实现代码调试
-
通过vscode进行代码调试
详细介绍:
第一种:通过浏览器实现代码调试
准备:
一个简单的vue项目(以下代码内容仅供参考)
edge浏览器(关闭忽略列表, 要不然浏览器使用不了debugger模式)
<script>
import {ref, reactive} from 'vue'
export default {
name: 'App',
setup(){
let name = ref("王五")
let age = ref(19)
let job = reactive({type: "开发者", salary: 300})
function rename() {
// 在代码中直接添加debugger即可
debugger
console.log(name, age, job)
name.value = "李四"
age.value = 25
job.type = "研发者"
}
return {
name,
age,
job,
rename,
}
}
}
</script>
然后在浏览器, 打开开发者工具即可
第二种: 通过VScode插件实现代码调试
1. 安装vscode插件: JavaScript Debugger (Nightly)
2. 配置launch.json文件, 步骤如下:
3. 修改launch.json文件(.vscode文件下)
4. 启动项目
5. 点开需要debug的文件(其他文件中存在debugger断点, 也会生效), 启动debuger模式
这时, 会打开一个新的edge浏览器, 然后就可以在vscode中进行debugger了
好了, 今天的内容到这里就结束了, 欢迎小伙伴留言评论交流^\/^