控制台断点调试

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

打开调试界面

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

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

/*
* 功能:验证身份证是否可用,如果可用,则提取生日、性别等信息
* 参数:传入一个字符串(建议不要采用数字,18位的数字会有精确度问题)
* 返回:包含基本信息的对象
* 作者:HTML5学堂 http://www.h5course.com
*/
function regIDAllInf(str){
    str = str.toString();
    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]))$/;
    // 用于存储结果
    var result = {};
    if (reg.test(str)) {
        var sum = 0;
        var arrID = str.split("");
        var arrWi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
        var arrY = [1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2];
        for (var i = 0; i < arrWi.length; i++) {
            sum += arrID[i] * arrWi[i];
        };
        sum %= 11;
        var lastID = arrID[arrID.length - 1];
        if (lastID == "X" || lastID == "x") {
            lastID = 10;
        };
        if (arrY[sum] == lastID) {
            result["check"] = true;
            result["birthday"] = str.substr(6, 8);
            result["cityCode"] = str.substr(0, 6);
            result["gender"] = (str.substr(14, 3) % 2 == 0) ? "女" : "男";
        } else {
            result["check"] = false;
            result["error"] = "身份证号码输入错误";
        }
    } else {
        result["check"] = false;
        result["error"] = "身份证号码格式有误";
    }
    return result;
}
console.log(regIDAllInf('110000199101010001'));

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

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

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

HTML5小编-其其 耗时1.5h

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-03-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序小工

【PHP】第三方登录OAuth2.0

对于网站应用程序,涉及到登录和第三方 api 接口时,都会接触到 Token 等概念,而这部分的逻辑原理则是来自于 OAuth 授权协议, 目前的 OAuth...

582
来自专栏有趣的Python

最新Django2.0.1在线教育零基础到上线教程(六)4-10

演示地址: http://mxonline.mtianyan.cn 教程仓库地址1: https://github.com/mtianyan/DjangoGe...

4157
来自专栏Java帮帮-微信公众号-技术文章全总结

JavaWeb20-文件上传;下载(Java真正的全栈开发)

文件上传&下载一.文件上传 1. 文件上传介绍 要将客户端(浏览器)大数据存储到服务器端,不将数据直接存储到数据库中,而是要将数据存储到服务器所在的磁盘上,这就...

2766
来自专栏SDNLAB

ODL碳版本模块开发及流程梳理

文章主要基于ODL碳版本,进行简单插件的构建、安装、部署,以一个插件开发为例,介绍ODL新版本开发过程中的一些具体问题。 ? 一、碳版本简易开发流程 1.1 开...

4118
来自专栏云计算教程系列

如何使用Python-GnuPG和Python 3验证代码和加密数据

GnuPG包提供用于生成和存储加密密钥的完整解决方案。它还允许您加密和签名数据和通信。

1517
来自专栏惨绿少年

练习题二下

1.1 第8题 linux 系统运行级别一般为 0-6,请分别写出每个级别的含义。 1.1.1 运行级别的含义 0 关机 1 单用户模式 2 多用户模式 没有...

1840
来自专栏友弟技术工作室

beego配置

beego 目前支持 INI、XML、JSON、YAML 格式的配置文件解析,但是默认采用了 INI 格式解析,用户可以通过简单的配置就可以获得很大的灵活性。 ...

3757
来自专栏崔庆才的专栏

App爬虫神器mitmproxy和mitmdump的使用

3024
来自专栏极客编程

IPFS环境安装与入门教程

IPFS(InterPlanetary File System,星际文件系统)是去中心化的,本文是介绍IPFS节点软件的系统环境搭建安装与使用方法的入门教程,并...

732
来自专栏Vamei实验室

Linux常用命令

我总结了常用的Linux命令,方便你的Linux使用。下面是格式说明,你现在可以跳过,直到遇到疑问时再来查询。 $ 命令行提示符 粗体表示命令 斜体表示参数 ...

1657

扫描关注云+社区