HTML5学堂-码匠 HTML5学堂

您当前位于:ECMAScript 基础语法 ——> 如何使用谷歌控制台进行JS代码的断点调试

如何使用谷歌控制台进行JS代码的断点调试

2016/03/29 07:56:46 | 作者:HTML5学堂(码匠) | 分类:ECMAScript 基础语法 | 关键词:断点调试,控制台,代码调试

控制台断点调试

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 之前所有数据的状态。

断点调试,执行到return语句

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

HTML5小编-其其 耗时1.5h

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

iOS,APP,码集,案例交互,JavaScript学习,WEB前端,HTML5

iOS APP 码集

案例交互式学习JS