前端调试全文及翻译

最新推荐文章于 2024-11-04 18:02:14 发布

解孔明

最新推荐文章于 2024-11-04 18:02:14 发布

阅读量401

点赞数 5

文章标签：前端

本文链接：https://blog.youkuaiyun.com/qq_41623592/article/details/143134619

版权

前端调试

调试、前端、JavaScript

背景

看变量老是把console.log()打来打去，总归是有点费劲，而且还容易被log后运行的逻辑影响，之前老是用不成功，最近小小用起一下，特此记录

解决方案

首先参考一下，前端调试入门、

console 控制台

在处理逻辑中使用console.log(***)输出内容，这我也会，不过文章提到一些小技巧，特此记录

console.log:
在控制台输出内容，假设有多个变量需要输出，直接输出没办法查看对应名称，可以添加一个中括号 console.log({name,sex,age})

const name = "小明";
const age = 20;
const sex = "女";
console.log(name, sex, age)
// 小明 20 女
console.log({name, sex, age})
// { name:"小明"，sex:"女"，age:20 }

console.warn：在控制台输出警告信息，用于代码存在不合理或不符合规范但不影响系统运行的提示
console.error：在控制台输出错误信息，用于代码错误和异常的提示
console.time和console.timeEnd：配合使用，用于计算代码段的执行时间，有助于性能调试和判断

console.time();
let sum = 0;
for (let i = 0; i < 10000; i++) {
    sum += i;
}
console.timeEnd();

console.dir：对于DOM节点的打印输出，如果采用console.log会以标签的形式输出，和直接查看没有太大的差异，
如果想要查看DOM相关事件和属性，可以采用console.dir输出DOM节点对应的js对象映射
console.table：可以将数组（或者是类数组的对象，或者就是一个对象）打印成一个表格

breakpoint 断点

手动在代码块中写入debugger，但是不需要断点的时候，需要删除掉对应的断点代码

这个debugger有时候可能明明写了但不生效，需要在f12开发者工具右上角的设置》Ignoer List》取消勾选/node_modules/|/bower_components/即可。
参考文章

普通断点：在想断住的那一行左侧单击一下就可以添加一个断点，运行到该处就会断住
(这里我打的断点没有用，debug模式运行也不行，等这里走通了再往下写)

调试断点收集

声明：本文使用八爪鱼rpa工具从gitee自动搬运本人原创（或摘录，会备注出处）博客，如版式错乱请评论私信，如情况紧急或久未回复请致邮 xkm.0jiejie0@qq.com 并备注原委；引用本人笔记的链接正常情况下均可访问，如打不开请查看该链接末尾的笔记标题（右击链接文本，点击复制链接地址，在文本编辑工具粘贴查看，也可在搜索框粘贴后直接编辑然后搜索），在本人博客手动搜索该标题即可；如遇任何问题，或有更佳方案，欢迎与我沟通！