最新文章:

您的位置: 富录-前端开发|web技术博客 > JavaScript > 学习九个Console命令,让js调试更简单

学习九个Console命令,让js调试更简单

发布时间:2017年07月21日 评论数:抢沙发阅读数: 6427

    一、显示信息命令

    <script>
    	console.log("hello");
    	console.info("信息");
    	console.error("错误");
    	console.warn("警告");
    </script>
    显示信息命令

    最常用的就是console.log();

    二、占位符

    console支持printf的占位符格式,支持的占位符有:字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o):

    占位符 作用
    %s 字符串
    %d or %i
    整数
    %f
    浮点数
    %o
    可展开的DOM
    %O
    列出DOM的属性
    %c
    根据提供的css样式格式化字符串

    <script>
    	console.log("%d年%d月%d日",2017,7,22)
    </script>

    %o、%O都是用来输出Object对象的,对普通的Object对象,两者没区别,但是打印dom节点时就不一样了:

    // 格式成可展开的的DOM,像在开发者工具Element面板那样可展开 
    console.log('%o',document.body.firstElementChild); 
    // 像JS对象那样访问DOM元素,可查看DOM元素的属性 
    // 等同于console.dir(document.body.firstElementChild) 
    console.log('%O',document.body.firstElementChild);
    %c占位符是最常用的。使用%c占位符时,对应的后面的参数必须是CSS语句,用来对输出内容进行CSS渲染。常见的输出方式有两种:文字样式、图片输出。


    文字输出:

    console.log("%c富录,欢迎您!","color: red; font-size: 20px"); 
    //输出红色的、20px大小的字符串:Hello world,欢迎您!

    除了普通文本,还能输出如知乎的console面板一样的字符画。这些字符画是可以在线生成的:

    picascii
    mg2txt
    Ascii generator

    大概方法:使用在线工具生成字符画,然后复制到sublime中,将每行开头的换行删除,且替换成 。最后只有一行代码,即保证没有换行,最后再丢到console.log("")代码中即可,当然,也可以添加结合%c做出更酷炫的效果(console输出默认是不换行的)。

    图片输出:

    由于 console不能定义img,因此用背景图片代替。此外,console不支持width和height,利用空格和font-size代替;还可以使用padding和line-height代替宽高。

    不想这么麻烦,可以试试console-image这个插件。

    三、信息分组

    <script type="text/javascript">
    	console.group("第一组信息");
    	console.log("第一组第一条:我的个人网站(http://www.arbays.com)");
    	console.log("第一组第二条:欢迎光临富录");
    	console.groupEnd();
    	console.group("第二组信息");
    	console.log("第二组第一条:欢迎投稿:990510638@qq.com");
    	console.log("第二组第二条:欢迎你加入");
    	console.groupEnd();
    </script>

    四、查看对象信息

    <script type="text/javascript">
    	var info = {
    		web:"http://www.arbays.com",
    		webname: "富录",
    		message: "欢迎光临富录!"
    	}
    	console.dir(info);
    </script>

    五、显示某个节点内容

    <div id="wrap">
    	<h1>欢迎光临富录</h1>
    	<p>http://www.arbays.com</p>
    </div>
    <script type="text/javascript">
    	var info = document.getElementById("wrap");
    	console.dirxml(info)
    </script>

    六、判断变量是否为真

    <script type="text/javascript">
    // console.assert()用来判断一个表达式或变量是否为真。如果结果为否,则在控制台输出一条相应信息,并且抛出一个异常。
    	var result = 1;
    	console.assert( result );
    	var year = 1017;
    	console.assert(year === 2018);
    </script>


    七、追踪函数的调用轨迹

    <script type="text/javascript">
    // 函数是如何被调用的,在其中加入console.trace()方法就可以了
    	function add(a,b){
            console.trace();
          return a+b;
        }
       var x = add3(1,1);
       function add3(a,b) {
    		return add2(a,b);
        }
       function add2(a,b) {
    		return add1(a,b);
        }
       function add1(a,b) {
    		return add(a,b);
        }
    </script>


    八、计时功能,可记代码的运行时间

    <script type="text/javascript">
    	//可记录代码运行时间
    	console.time("程序执行时间:")
    	for(var i = 0; i < 1000; i++) {
    		for(var j = 0; j < 1000; j++) {}
    	}
    	console.timeEnd("程序执行时间")	
    </script>


    九、console.profile()性能分析

    <script type="text/javascript">
    // 性能分析(Profiler)就是分析程序各个部分的运行时间,找出瓶颈所在,使用的方法是console.profile()。
      function All(){
    		// alert(11);
    		for(var i=0;i<10;i++){
    			funcA(1000);
    		}
    		funcB(10000);
    	}
      function funcA(count){
        for(var i=0;i<count;i++){}
      }
      function funcB(count){
        for(var i=0;i<count;i++){}
      }
      console.profile('性能分析器');
      All();
      console.profileEnd();
    </script>


二维码加载中...
本文作者:DGF      文章标题: 学习九个Console命令,让js调试更简单
本文地址: https://arbays.com/post-31.html     本文已被百度收录!
版权声明:若无注明,本文皆为“富录-前端开发|web技术博客”原创,转载请保留文章出处。
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论