VSCode中的debug调试

回顾:项目架构分类:详细介绍:第一种:通过浏览器实现代码调试第二种: 使用VScode插件实现代码调试

回顾:

这段时间, 因为工作需要, 需要编写一个前端小项目.

我去, 都多久没碰前端了, 一年多了啊,.还好, 基本功还在.

项目架构

前端结构：vue3 + element-plus

后端结构: flask + sqlalchemy

=======================================================================

因为使用的VScode来实现前端代码的编辑, 这就不免需要进行代码调试debug!!!!

下面结合网上查的资料以及亲身实践, 来说下如何进行调试代码, 这里准备了两种

分类:

1. 通过浏览器实现代码调试

2. 通过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了

好了, 今天的内容到这里就结束了, 欢迎小伙伴留言评论交流^\/^