1.背景介绍

前言：调试技巧，在任何一项技术研发中都可谓是必不可少的技能。掌握各种调试技巧，必定能在工作中起到事半功倍的效果。譬如，快速定位问题、降低故障概率、帮助分析逻辑错误等等。而在互联网前端开发越来越重要的今天，如何在前端开发中降低开发成本，提升工作效率，掌握前端开发调试技巧尤为重要。

此次分享，我们将具体说说，调试中，alert，F12console的用法，以及如何通过控制台给代码设置断点进行调试。

2.知识剖析

一.骨灰级调试大师Alert

那还是互联网刚刚起步的时代，网页前端还主要以内容展示为主，浏览器脚本还只能为页面提供非常简单的辅助功能的时候。那个时候，网页主要运行在以IE6为主的浏览器中，JS的调试功能还非常弱，只能通过内置于Window对象中的alert方法来调试。

打开控制台，看一下。

二.新一代调试console

1.什么是console？

Console 是用于显示 JS和 DOM 对象信息的单独窗口。并且向 JS 中注入1个 console 对象，使用该对象 可以输出信息到 Console 窗口中。（可以打开编辑器测试一下。）

三.利用断点debug程序

断点，调试器的功能之一，可以让程序中断在需要的地方，从而方便其分析。也可以在一次调试中设置断点，下一次只需让程序自动运行到设置断点位置，便可在上次设置断点的位置中断下来，极大的方便了操作，同时节省了时间。——百度百科

JS断点调试，即是在浏览器开发者工具中为JS代码添加断点，让JS执行到某一特定位置停住，方便开发者对该处代码段的分析与逻辑处理。为了能够观察到断点调试的效果，我们预先随意准备一段JS代码：

3.常见问题

为什么不提倡用alert进行调试？

4.解决方案

随着JS在Web前端中能做的事情越来越多，责任越来越大，而地位也越来越重要。传统的alert调试方式已经渐渐不能满足前端开发的种种场景。而且alert调试方式弹出的调试信息，那个窗口着实不太美观，而且会遮挡部分页面内容，着实有些不太友好。另一方面，alert的调试信息，必须在程序逻辑中添加类似”alert(xxxxx)”这样的语句，才能正常工作，并且alert会中断代码，会阻碍页面的继续渲染。这就意味着开发人员调试完成后，必须手动清除这些调试代码，实在有些麻烦。另外，如果在循环中使用alert，光关闭弹出的窗口就够自己累的了，哈哈！

5.编码实战

<script>

(function(){

function sum(a,b){

console.log('传入实参:a='+ a +',b='+ b);

            var rnd = Math.random()*200;

            rnd = parseInt(rnd);

            console.log('被加的随机数为：' + rnd);

            a += rnd;

            b += 2 * rnd;

            console.log('变化后的a,b:a='+ a + ',b=' + b);

            return a+b; 

}

console.log(sum(10,20));

})();

</script>       

6.扩展思考

什么时候用alert比较合适，什么时候用console比较合适,什么时侯设置断点比较合适?