[北京|结业弟子]JS-刘其勇|2017年03月10日的日报-技能树.IT修真院

发表于： 2017-03-10 02:48:26

1 1080

F12Console的用法，以及如何Debug程序

1.背景介绍

两部分内容：console的常用方法，以及使用开发者工具调试js代码的几个方法。

1.console对象

console对象代表浏览器的javascript控制台，主要有两个作用：1.显示网页代码运行时的错误信息。2.提供一个命令行接口，用来与网页代码互动。

2.如何开发者工具调试js代码

使用console对象的内置方法，或者使用开发者工具的断点调试功能。

知识剖析

1.console对象的几种常用方法

.log()方法：在console窗口显示信息
.log 用于输出普通信息
.info 用于输出提示性信息
.error用于输出错误信息
.warn用于输出警示信息
.debug用于输出调试信息

.table()方法,把有复合数据的对象作为表格显示
.assert()方法，验证条件并输出
.time(),.timeEnd()方法，计算一个操作消耗的时间
其它方法：
.group(),.groupend()方法：将显示信息分组
.dir()显示对象的所有属性
.clear():console窗口清屏
.trace():显示在堆栈中的调用路径

2.用开发者工具进行代码调试

使用alert（）方法暂停并查看信息
使用console对象的上述方法
console方法的命令行
开发者工具的断点调试功能

常见问题

如何进行断点调试

解决方案

开发者工具source选项卡

编码实战

扩展思考

平时上网浏览，看到感兴趣的效果，可以用开发者工具直接学习和修改
练习和项目中的遇到的bug，可以在开发者工具中修改，以便找到找到解决办法

参考文献

console对象
http://www.360doc.com/content/14/0917/16/14663225_410219222.shtml
.time()方法
http://www.jb51.net/article/59126.htm
source选项卡
http://web.jobbole.com/82562/
详细的开发者工具说明
http://web.jobbole.com/89344/?utm_source=blog.jobbole.com&utm_medium=relatedPosts

更多讨论

代码中少用console，转而在开发者工具里用各种方法调试，有哪些利弊？

谢谢

今日完成：

1 任务4：越做越复杂了，但是有所进展，基本实现了胜利页之前的内容。

由于需要在两个页面间跳转，所以很多变量需要提前定义，

    else{
              localStorage.pageType="list";
        localStorage.dayNumberStorage="1";
        location.href="TouPiaoYe.html"}
}

并且要加很多if（）

if(localStorage.pageType!="list"){
      for(i=0;i<gamerAmount;i++){
            (function (i) {
                  $(gamerDom[i]).on("click",function(){
                        if(gamerObj[i].identity=="平民"){
                              if(gamerObj[i].state=="alive"){
                                    switch(localStorage.pageType){
                                        case "killerPage":
                                        gamerObj[i].state="Dead";
              gamerObj[i].kmode="kdead";
              gamerObj[i].ktime=localStorage.dayNumberStorage;
              $(gamerDom[i]).css({"border":"0.05rem solid #f00"});
              break;

更新了玩家详情的对象的属性，一开始就该多想到

function setGamer(number,identity,state,kmode,ktime) {
    var a={
        number : number,
        identity : identity,
        state : state,
        kmode: kmode,
        ktime: ktime
    };
    return a;
}