控制台断点调试

HTML5学堂：在项目开发过程中，难免会需要调试一些数据，而大量的console.log()需要频繁切换JS和页面，同时最后有可能还忘记删除打印信息。使用断点调试可以更方便的掌握js执行信息。，今天来介绍下如何在浏览器上使用断点调试。

打开调试界面

首先按下F12打开调试面板，选择Sources，然后在左侧找到你需要断点调试的资源，选中就会自动打开代码。

这里用的demo是身份证验证的demo

1. /*
2. * 功能：验证身份证是否可用，如果可用，则提取生日、性别等信息
3. * 参数：传入一个字符串(建议不要采用数字，18位的数字会有精确度问题)
4. * 返回：包含基本信息的对象
5. * 作者：HTML5学堂 http://www.h5course.com
6. */
7. function regIDAllInf(str){
8.     str = str.toString();
9.     var reg = /^[1-9]\d{5}[1-9]\d{3}((0[1-9])|(1[0-2]))((0[1-9])|([1-2]\d)|(3[0-1]))((\d{4})|(\d{3}[Xx]))$/;
10.     // 用于存储结果
11.     var result = {};
12.     if (reg.test(str)) {
13.         var sum = 0;
14.         var arrID = str.split("");
15.         var arrWi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
16.         var arrY = [1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2];
17.         for (var i = 0; i < arrWi.length; i++) {
18.             sum += arrID[i] * arrWi[i];
19.         };
20.         sum %= 11;
21.         var lastID = arrID[arrID.length - 1];
22.         if (lastID == "X" || lastID == "x") {
23.             lastID = 10;
24.         };
25.         if (arrY[sum] == lastID) {
26.             result["check"] = true;
27.             result["birthday"] = str.substr(6, 8);
28.             result["cityCode"] = str.substr(0, 6);
29.             result["gender"] = (str.substr(14, 3) % 2 == 0) ? "女" : "男";
30.         } else {
31.             result["check"] = false;
32.             result["error"] = "身份证号码输入错误";
33.         }
34.     } else {
35.         result["check"] = false;
36.         result["error"] = "身份证号码格式有误";
37.     }
38.     return result;
39. }
40. console.log(regIDAllInf('110000199101010001'));

可以看到，中间代码部分，有1234行数的序号，我们需要打断点就可以直接点击左侧就可以了，这里我们在几个if else 处打上断点。

可以看出来，代码执行到断点处就暂停了，这样可以非常方便我们看数据交互状态，鼠标放在参数上面也可以看到具体的参数信息，右侧也可以看到断点时候的局部和全局的属性，当我们执行到return 的时候能更清楚的看到return 之前所有数据的状态。

断点调试的基本用法就是这样了，比起console.log()的方式打印出信息，这样做能够更全面的掌握代码的执行情况，并且不需要频繁的修改js，但是记得调试完后把断点全部取消哦，取消方法：再次左键点击一下就取消了断点调试了。是不是感觉更方便了呢。

HTML5小编-其其 耗时1.5h

欢迎沟通交流~HTML5学堂