文章目录

前言

推荐几个前后端调试比较基础的Google常用的调试方式

一、四种常用的前端断点调试

1.普通断点–运行到位置就会断住

Sources进入到正在调试到文件，选中行号下次运行到此就会进入断点（白色的行号为不可打点）
在这里插入图片描述

2.条件断点–输入表达式条件为 true才会断住

举例：Sources进入执行文件，选择console.log()行号右键，选择Add c… 比如添加代码段或者变量 为true时向下执行

在这里插入图片描述在这里插入图片描述

3.dom断点

选中元素右键，当子树、属性、节点移除时都会进入断点，适合调试dom变化
在这里插入图片描述

二、Network快速重发请求

每次前端填写完一大堆数据，后端说再调一次时那种绝望。Replay XHR可以拯救你 把请求参数和地址全部重新请求一次，再也不用再重填页面和搞校验了
在这里插入图片描述

三、Console创建临时数据调试

比如我们打印了一段数据，如果想重新修改一遍这个数据去做个向下的数据准备，是不是还要去修改代码。控制台在打印数据出右键选择Store… 浏览器会创建一个全局变量去copy一份名叫temp的对象，此时我们在这修改数据配合断点就不用频繁去修改代码一遍遍执行查看
在这里插入图片描述

四、Sources测试代码段

测试代码段，例如有个function需要测试或者做些练习
Sources下的snippets（如果没有就点后面的符号往后翻）新建 填写代码段 最后enter执行（run处）信息就会打印在console上了（sources页面里的console可以使用esc关闭或显示）
在这里插入图片描述

总结

持续更新一些常用的调试方式。vue浏览器调试工具：Vue.js devtools

# javascript
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue