Javascript实用调试技巧分享

prtyaa 2023-12-26 17:04:14  65991

分类专栏：资讯

前言

见过太多同学调试Javascript只会用简单的console.log甚至alert，看着真为他们着急。下面我就分享一些实用且聪明的调试技巧，希望能让大家调试自己代码的时候更加从容自信。

一、不要使用 alert

首先，alert只能打印出字符串，如果打印的对象不是String，则会调用toString()方法将该对象转成字符串（比如转成[object Object]这种），所以除非你打印String类型的对象，其他什么信息都获取不到。其次，alert会阻塞UI和javascript的执行，必须点击'OK'按钮才能继续，非常低效。所以，喜欢使用alert的同学可以改改这个习惯了。

二、使用 console.log

console.log谁都会用，但是很多同学只知道最简单的console.log(x)这样打印一个对象，当你的代码里面console.log多了之后，会很难将某条打印结果和代码对应，所以我们可以给打印信息加上一个标签便于区分：

var num = 1;
console.log('断点', num);

标签不一定要有明确的含义，视觉效果显著就可以了，当然有明确意义更好。

console.log可以接收任意多的参数，最后将这些对象拼接输出

如果打印信息过多，不容易找到目标信息的话，可以在控制台中进行过滤

三、快速查找DOM元素

有时我们需要查找网页上的某些元素，这时chrome和firefox提供了一种更快的方法，使用类似于jQuery的查询语句：

$('p')返回符合条件的第一个元素，$$('p')返回所有符合条件的元素。

四、使用`debugger`打断点

有时候我们需要打断点进行单步调试，使用debugger关键词，我们可以直接在源码中定义断点，比如：

网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。

本文链接：https://www.xckfsq.com/news/show.html?id=30892

赞同 0

评论 0 条

Javascript实用调试技巧分享

前言

一、不要使用 alert

二、使用 console.log

三、快速查找DOM元素

四、使用debugger打断点

相关文章

关注我们

四、使用`debugger`打断点