• Chrome 开发者工具(二)------ Console


    Console 是最最常用到的模块,开发必备。

    一、控制台信息如何高效查看?

      控制台可以看到 JS 的报错信息、提示信息、及代码中打印的信息

      下图是百度首页的信息,其中红框中:

      1、向右的三角图标(Show console sidebar),可以分别查看不同类型的信息

      2、禁止图标(Clear console),清空控制台的所有信息,刷新页面后恢复

      3、眼睛图标(Create live expression),可以打开动态表达式输入框

        输入要监控的表达式,执行频率是 250 毫秒

        例如输入 Date.now(),可以看到显示的当前时间戳在实时变化,

      4、Filter 过滤框,可以过滤有关键字的信息,或没有关键字的信息

        输入中划线“”-“”,会看到自动显示出三种过滤方式:context、source、url

        选择一种方式,并在冒号后输入关键字,会显示除关键字以外的信息

        中划线去掉,会检索到只有关键字相关的信息

        普通字符也可以当做关键字检索

        可用正则表达式检索

      5、选择显示的 Log 等级

        Verbose:从Chromium58开始,仅显示 console.debug() 的输出

        Info:仅显示 console.info() 的输出

        Warnning:仅显示 console.warn() 的输出

        Errors:仅显示 console.error() 的输出

        Default:默认勾选Info、Warnings、Errors

      6、设置图标,控制台相关设置信息,勾选开启

        Hide network:隐藏网络信息,不记录 404 和 500 系列信息

        Preserve log:刷新页面可以保留控制台信息

        Selected context only:只显示当前上下文

        Group similar:类似的消息会折叠显示

        Log XMLHttpRequests:是否显示每一个 XMLHttpRequests

        Eager Evaluation:控制台写表达式时,显示预览结果

        Autocomplete from history:自动生成历史消息

        Evaluate triggers user activation:检测触发用户激活

      

    二、Console 可用的方法有哪些?

      在控制台输入 console 可以看到所有属性,主要看一些常用的

      

      1、常用打印日志信息,输出结果都一样,都可以输出任意类型的数据,且可以输出多个数据

        console.log()

        console.error()

        console.info()

        console.warn()

        console.debug()

      2、console.assert(),输出断言错误时的信息

        例:console.assert(1 > 2, 'error');  当第一个参数的结果是 false 时,输出第二个参数

      3、console.clear(),清空 console 信息

      4、console.count(),通常写在循环或函数中,显示当前行代码第几次执行,参数是任意数据

      5、console.dir(),将对象以树形结构输出

      6、console.group()、console.groupEnd(),分组显示信息,可以嵌套使用

        console.group('G1')

        console.log(11)

        console.groupEnd('G1')

        console.group('G2')

        console.log(22)

      7、console.time()、console.timeEnd(),用于计时,分别显示开始时间和结束时间

      8、console.table(),以表格的形式显示数据

      9、console.trance(),跟踪函数调用链,显示函数被哪些函数调用过

    三、听说 Console 还可以格式化输出?

      共有四种占位符:

      %f:浮点数

      %c:字符

      %d 或 %i:整数

      %o:对象

    //输出带有样式的文字
    console.log("%c这是蓝色的20号字","color:blue;font-size:20px;");
    //输出图片
    console.log("%c","background:url(‘http://www.baidu.com/img/tupian.jpg‘)");
    //格式化输出日期
    console.log("今天是%i年%i月%i日",2016,05,04);
    //输出小数
    console.log("%f是圆周率",3.141592653);
    var obj = {
      name : ‘pelli‘,
      age : 24
    }
    console.log("%o",obj);

    四、可以直接在控制台执行 js 脚本

      非常方便 JS 脚本验证调试。

      注意,打印结果之前的换行是 Shift + Enter

  • 相关阅读:
    Windows系统下八大具有高逼格的DOS命令之一【ping】
    NOIP初赛 之 逻辑运算
    动态规划 —— 背包问题一 专项研究学习
    使用前端原生 js,贪吃蛇小游戏
    纯html+css制作3D立方体和动画效果
    css3实现3D动画轮播图
    原生js的弹力小球
    小球的问题
    早期练手:功能相对比较完善的 js 计算器
    自动布局简介
  • 原文地址:https://www.cnblogs.com/rendd/p/13274867.html
Copyright © 2020-2023  润新知