JS调试篇

最新推荐文章于 2025-01-03 23:27:18 发布

weixin_34162695

最新推荐文章于 2025-01-03 23:27:18 发布

阅读量50

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/njqa/p/9107658.html

本文详细介绍前端开发中的多种调试技巧，包括使用console的各种方法如颜色标识、分组展示、计时等，alert的简单应用，以及如何利用debugger进行断点调试。此外还介绍了在Chrome浏览器及其集成开发环境WebStorm中的具体调试方法。

一：console大法

template：console醒目标识

1. console.log('%c 我是炼火鸟的调试信息---》','color:white;font-weight:500;font-size:15px;background:green')

console.log('%c', 'background:url("")')    // 控制台输出图片
console.log('%c obj: ','color: red;',obj)

2.console输出分组

　  console.group("第一组信息");

　　console.log("第一组第一条");

　　console.log("第一组第二条");

　　console.groupEnd();

　　console.group("第二组信息");

　　console.log("第二组第一条");

　　console.log("第二组第二条");

　　console.groupEnd();

3.三种显示效果的console(chrome浏览器)

console.log('hello'); console.info("这是info"); console.debug("这是debug");   //  console的log info  debug表现形式一样    warn和error的表现现象不一样的哦

console.warn("这是warn"); console.error("这是error");

4. 占位符： console.log("%d年%d月%d日",2018,11,01);

5. time计时

console.time("计时开始”) 

for(let i=0; i<100; i++){
    console.log(i * i）
}

console.timeEnd("计时结束")

6. 内存情况

console.profile('性能检测开始')
  // .... code here   这段时间的CPU情况
console.profileEnd('性能检测结束')  //

7.console.count(‘被执行的次数’) console.count('当前function的名字被执行的次数') //统计代码被执行的次数以便决定是否提取出来作为公共方法，开发环境下内置为AOP

8. 自定义封装的log方法

 (function logUtils(){
        return log = function() {
            let ref = console.log
            ref.call(console, '%c sandy`s debug: ' + [].slice.call(arguments).join(' '), 'color: green; font-size: 15px;')
        }
    })()
log('hello')

 function log() {
       return log = console.log.bind(console)  //  在console方法上面绑定console.log方法  bind方法是接受传参的
    }

9. console.clear() 清空控制台输出

二：alert

三：debuger之chrome浏览器

1.代码中debugger

2.在浏览器源码处打断点

四：chrome之webstrome

转载于:https://www.cnblogs.com/njqa/p/9107658.html