javascript 调试技巧

Posted djh-create

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript 调试技巧相关的知识,希望对你有一定的参考价值。

1.打印输出信息

console.log 用于通常的打印信息
console.table 打印对象信息;
console.trace(‘trace car’) 查看函数的调用栈,特别地有效。

3.断点调试

有三个方法,
一、直接找出代码行加个断点;
二、在代码中添加debugger,浏览器会自动在debugger那里停住
三、在控制台输入debug(car.funcY) 。

if (thisThing) {
    debugger;
}

4.响应式调试

可以调试移动端视域

5.统计代码块执行需要的时间

对于循环的统计优化特别有效

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

7. {} 美化压缩的代码

8. 监控函数接受到的参数

在控制台输入monitor(functionName)

9. 快速获取元素

在控制台输入 $(‘css-selector’) ,将返回第一个匹配的元素;
$$(‘css-selector’) 将返回所有匹配的元素。

10.可以在网络tab右键编辑重发网络请求

此操作用来补填缺失字段重新请求参数,完善参数特别有效

11. 可以在Dom面板右键添加监控,查看dom元素为啥会发生改变







以上是关于javascript 调试技巧的主要内容,如果未能解决你的问题,请参考以下文章

实用Javascript调试技巧

10个JavaScript调试技巧,帮你更好更快地调试代码

JavaScript调试技巧

20160220 - JavaScript for OS X Automation 调试技巧

JavaScript奇淫技巧:反调试

javascript 调试技巧