JavaScript调试方法

一、console.log和debugger调试方法

这两种方法使我们一般最喜欢的调试方法

一旦执行到这行代码,Chrome 会在执行时自动停止。

你甚至可以使用条件语句加上判断,这样可以只在你需要的时候运行。

if (thisThing) {
    debugger;
} 

这两种方法还有一个弊端,有人形容他们两的词语用到了肮脏,哈哈哈哈哈

(之所以形容他肮脏主要是因为调试完后还要删除这段代码)

二、console.table方法进行调试

当遇到一个对象时,我们需要看到他的值,一般我们会使用到console.log方法;

但是当遇到一个较为复杂结构的对象,输出的结果会不便于我们观察,这个时候我们就用到了console.table方法

var animals = [
    { animal: 'Horse', name: 'Henry', age: 43 },
    { animal: 'Dog', name: 'Fred', age: 13 },
    { animal: 'Cat', name: 'Frodo', age: 18 }
];
 
console.table(animals);

三、console.time和console.end方法

要确切地知道某段代码需要执行多长时间,尤其是在调试慢循环时,可能会非常有用。

您甚至可以通过为该方法分配标签来设置多个定时器。让我们看看它是如何工作的:

console.time('Timer1');
 
var items = [];
 
for(var i = 0; i < 100000; i++){
   items.push({index: i});
}
 
console.timeEnd('Timer1');

  

四、console.trace方法——获取函数的堆栈跟踪信息

函数执行的顺序——方便自己了解自己的代码,像是一个特定的为自己定制的菜单

var car; 
var func1 = function() {
    func2();
} 
var func2 = function() {
    func4();
}
var func3 = function() {
} 
var func4 = function() {
    car = new Car();
    car.funcX();
}
var Car = function() {
    this.brand = ‘volvo’;
    this.color = ‘red’;
    this.funcX = function() {
        this.funcY();
    }
    this.funcY = function() {
        this.funcZ();
    }
    this.funcZ = function() {
        console.trace(‘trace car’)
    }
} 
func1();

  

 

 五、debug(funcName)——快速查找要调试的函数

在控制台中使用 debug(funcName),当到达传入的函数时,代码将停止。

这个调试方法很快, 但缺点是不适用于私有函数或匿名函数。

但除了私有和匿名函数, 这可能是找到调试函数的最快方法。

 (注意:这个函数和console.debug 函数是不同的东西。)

var func1 = function() {
    func2();
};
 
var Car = function() {
    this.funcX = function() {
        this.funcY();
    }
 
    this.funcY = function() {
        this.funcZ();
    }
}
 
var car = new Car();

  

六、Blackbox script——在调试过程中屏蔽不相关的代码

现在,我们经常在应用中引入多个库或框架

其中大多数都经过良好的测试且相对没有陷阱。

但是,调试器仍然会进入与调试任务无关的文件。

解决方案是屏蔽不需要调试的脚本。当然也可以包括你自己的脚本。

 

七、在复杂的调试过程中寻找重点

在更复杂的调试中,我们有时希望输出很多行。

你可以做的事情就是使用更多控制台函数来保持良好的输出结构,

console.logconsole.debug, console.warn, console.info, console.error

但有时候,某些 JavaScrip 调试信息并不是你需要的。

现在,可以自己美化调试信息了。

在调试 JavaScript 时,可以使用 CSS 并自定义控制台信息:

console.todo = function(msg) {
    console.log(‘ % c % s % s % s‘, ‘color: yellow; background - color: black;’, ‘–‘, msg, ‘–‘);
}
 
console.important = function(msg) {
    console.log(‘ % c % s % s % s’, ‘color: brown; font - weight: bold; text - decoration: underline;’, ‘–‘, msg, ‘–‘);
}
 
console.todo(“This is something that’ s need to be fixed”);
console.important(‘This is an important message’);

  

在 console.log() 中, 可以用 %s 设置字符串,%i 设置数字,%c 设置自定义样式等等,还有很多更好的 console.log() 使用方法。

如果使用的是单页应用框架,可以为视图(view)消息创建一个样式,为模型(models),集合(collections),控制器(controllers)等创建另一个样式。

也许还可以像 wlog,clog 和 mlog 一样发挥想象力!

 

posted on 2017-12-01 09:50  木之子梦之蝶  阅读(353)  评论(0编辑  收藏  举报

导航