《图解Vue3.0》- 调试

最新推荐文章于 2025-05-27 23:58:34 发布

原创

最新推荐文章于 2025-05-27 23:58:34 发布 · 3.6k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #ecmascript #前端框架

如何对vue3项目进行调试

调试是开发过程中必备的一项技能，掌握了这项技能，可以很好的定义bug所在。一般在开发vue3项目时，有三种方式。

代码中添加debugger;
使用浏览器调试：sourcemap需启用
vs code 调试：先开启node服务，后启用vs code的调试模式

具体使用如下：

debugger调试法

当打开开发者模式时才会起作用(F12), 但是使用完之后将其删除，不然遗留在代码中，不利于自己与他人开发。一般配置文件，也不允许其出现，.eslintrc.json, rules: "no-debugger":"error"

<template>
    <div>请求数据：{
  
  { loginMsg }}</div>
    <button @click="loginBtn">点击获取mock数据</button>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import axios from 'axios';

const loginMsg = ref('');

const loginBtn = () => {
    debugger;
    axios.get('api/test').then((res) => {
        loginMsg.value = JSON.stringify(res);
    });
};

</script>