zoukankan      html  css  js  c++  java
  • console对象与控制台

    原文地址:https://wangdoc.com/javascript/

    console对象

    console对象是JavaScript的原生对象。
    console的常见用途有两个。

    • 调试程序,显示网页代码运行时的错误信息。
    • 提供一个命令行接口,用来与网页代码互动。
      console对象的浏览器实现,包含在浏览器自带的开发工具中。Chrome可以通过Option + Command + i快捷打开。
      打开开发者工具以后,顶端有多个面板。
    • Elements:查看网页的HTML源码和CSS代码。
    • Resources:查看网页加载的各种资源文件(比如:代码文件、字体文件、CSS文件等),以及在硬盘上创建的各种内容(比如:本地缓存、Cookie、Local Storage等)。
    • Network:查看网页的HTTP通信情况。
    • Sources:查看网页加载的脚本源码。
    • Timeline:查看各种网页行为随时间变化的情况。
    • performance:查看网页的性能情况,比如CPU和内存消耗。
    • Console:用来运行JavaScript命令。

    console对象的静态方法

    console.log(),console.info(),console.debug()

    console.log方法用于在控制台输出信息。它可以接受一个或多个参数,将它们连接起来输出。

    console.log("Hello World");
    console.log("a", "b", "c");
    

    如果第一个参数是格式字符串(使用了格式占位符),console.log方法将依次用后面的参数替换占位符,然后再进行输出。

    console.log("%s + %s = %s", 1, 2, 3);
    

    console.log方法支持以下占位符,不同类型的数据必须使用对应的占位符。

    • %s字符串
    • %d整数
    • %i整数
    • %f浮点数
    • %o对象的链接
    • %cCSS格式字符串
    console.log("%cThis text is styled", "color: red; background: yellow; font-size: 24px;");
    

    上述代码运行后,输出的内容将显示为黄底红字。
    console.infoconsole.log方法的别名,用法完全一样。
    console.debug方法与console.log方法类似,会在控制台输出调试信息。但是,默认情况下,console.debug输出的信息不会显示,只有在打开显示级别在verbose的情况才会显示。
    console对象的所有方法,都可以被覆盖。因此可以按照自己的需要,定义console.log方法。

    ["log", "info", "warn", "error"].forEach(function(method) {
        console[method] = console[method].bind(
            console,
            new Date().toISOString();
        );
    });
    

    console.table()

    对于某些复合类型的数据,console.table方法可以将其转为表格显示。

    console.count()

    console.count方法用于计数,输出它被调用了多少次。

    console.dir(),console.dirxml()

    console.dir方法用来对一个对象进行检查(inspect),并以易于阅读和打印的格式显示。

    console.time(),console.timeEnd()

    这两个方法用于计时,可以算出一个操作所花费的准确时间。

    console.time("Array initialize");
    var array = new Array(10000);
    for (let i = array.length -1; i >= 0; i--) {
        array[i] = new Object();
    }
    console.timeEnd("Array initialize")
    
  • 相关阅读:
    通过AEC解读WF的核心原理(三)Execute方法Activity的入口
    LINQ解 爱因斯坦迷题
    通过AEC解读WF的核心原理(一)Activity的副本
    动态表单
    通过AEC解读WF的核心原理(九)实现IEventActivity
    WF3.5 的SendActivity、ReceiveActivity与WorkflowServiceHost(1)
    通过AEC解读WF的核心原理(六)创建复本ForEach循环
    WF的异常捕获与资源补偿
    WF资料打包下载
    NET下的流程图开发包介绍
  • 原文地址:https://www.cnblogs.com/chris-jichen/p/10039847.html
Copyright © 2011-2022 走看看