Web前端开发能不能学会 JS调试技巧都包括哪些

Web前端开发能不能学会？JS调试技巧都包括哪些？很多学Web前端开发的人都反应JavaScript学习难度大，不仅要掌握变量、常量、数据类型等基础知识点，还要学习面向对象、进行项目设计。在完成项目之后，调试非常重要，下面就给大家分享一些比较好的JavaScript调试技巧。

1、debugger

有时候我们需要打断点进行单步调试，一般会选择在浏览器控制台直接打断点，但这样还需要先去Sources里面找到源码，然后再找到需要打断点的那行代码，比较费时间。使用debugger关键词，我们可以直接在源码中定义断点。你可以在JavaScript代码中加入一句debugger来手工造成一个断点效果。需要带有条件的断点的话，你只需要用if语句包围它：

if (somethingHappens) {

debugger;

}

但要记住在程序发布前删掉它们。

2、设置在DOM node发生变化时触发断点

有时候你会发现DOM会发生一些奇怪的变化，让你很难找出问题的根源。谷歌浏览器的开发工具里有一个超级好用的功能，专门可以对付这种情况，叫做“Break on…”，你在DOM节点上右键，就能看到这个菜单项。断点的触发条件可以设置成这个节点被删除、节点的属性有任何变化，或它的某个子节点有变化发生。

3、获取函数的堆栈跟踪信息

使用JavaScript框架，会引入大量代码。创建视图并触发事件，最后你想了解函数调用的过程。由于JavaScript不是一个很结构化的语言, 有时候很难知道什么时候发生了什么。使用console.trace (仅仅只是在控制台中跟踪) 可以方便地调试JavaScript。

4、不要使用 alert

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

5、使用console.table

经常有同学会遇到这样的场景：获取到一个用户列表，每个用户有很多属性，但是我们只想查看其中的某些属性，在用console.log打印出来的时候需要把每个用户对象展开一个个查看，非常麻烦，console.table完美的解决这个问题。

如果你想了解更多前端​学习技巧，想要真正学好Web前端开发，建议参加专业的学习方式。可以亲身体验实际的教学水平，判断自己适不适合学web前端!