chrome 中js的调试技巧

技巧1:监控某个DOM节点的变化,包括以下
a、Subtree Modifications 子节点被修改
b、Attributes Modifications 属性被修改
b、Node removal 节点被移除
技巧2:monitor函数
使用 monitor函数来监控一函数,如下面的示例

 

 

技巧3:调试时屏蔽不相关代码
调试时代码会进入第三方的类库,第三方的类库一般来说是没有什么错误的,所以可以忽略改代码的调试,专注于自己的代码。

技巧4:格式换压缩js
当调试线上压缩过的代码的时候,会因为格式问题而苦恼。使用chrome代码美化功能之后,可以提高代码的可读性。

 

 

技巧5:获取函数的堆栈轨迹信息
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();
以上代码运行结果如下

这样可以看出 funcZ 函数被调用之后的完整运行轨迹

Leave a Reply

电子邮件地址不会被公开。 必填项已用*标注