zoukankan      html  css  js  c++  java
  • JS 灵活使用 console 调试

    前言:

    Web 开发中最常用的调试就是 console.log(),console 除了 本身 log() 方法外,还有其他很多方法。

    console.log()

    console.log() 有许多意想不到的功能,我们经常使用 console.log(object) 来查看一个对象,或者使用 console.log(object,otherobject,string) 来查看数据信息。

    除此之外,console.log() 还有另外一种写法:console.log(msg,values),类似 Java 或 PHP 中的 sprintf

    console.log('I like %s but I do not like %s.', 'GaoSirs', 'pus');

    这里会输出:

    I like GaoSirs but I do not like pus.

    常见的占位符有 %o(它接受对象),%s(它接受字符串),d%(它接受数字),%c(它接受 css 语句);

    其中比较有趣的是 %c: 使用%c占位符时,对应的后面的参数必须是CSS语句,用来对输出内容进行CSS渲染

    console.log('I am a %cbutton', 'color: white; background-color: orange; padding: 2px 5px; border-radius: 2px');

    console.dir()

    console.dir() 与 console.log() 类似。尽管略有不同。

    console.warn()

    可能是最直接的的替换 console.log(),可以用完全相同的方式使用 console.warn()。唯一区别是输出的背景色是黄色的。

    具体来说,输出处于警告级别而不是信息级别,因此浏览器要稍微区别对待它。

    console.table()

    console.table() 旨在以一种比仅仅转出原始对象数组更整洁的方式显示表格数据。

    const data = [{
      id: "7cb1-e041b126-f3b8",
      seller: "WAL0412",
      buyer: "WAL3023",
      price: 203450,
      time: 1539688433
    },
    {
      id: "1d4c-31f8f14b-1571",
      seller: "WAL0452",
      buyer: "WAL3023",
      price: 348299,
      time: 1539688433
    },
    {
      id: "b12c-b3adf58f-809f",
      seller: "WAL0012",
      buyer: "WAL2025",
      price: 59240,
      time: 1539688433
    }];

    如果以 console.log() 输出以上内容,我们会得到一些无用的输出数据

     (3) [{…}, {…}, {…}]

    通过 console.table() 输出则有用的多:

    第二个参数是所需列的列表:

    console.table(data, ["id", "price"]);

    注意:console.table() 只能处理最多1000行,所以它可能不适合所以数据集。

    console.assert()

    console.assert() 是对输入的表达式进行断言,只有表达式为 False 时 ,才输出相应的信息到控制台。

    var arr = [1, 2, 3];
    console.assert(arr.length === 4);

    console.count()

    console.count() 只是作为一个计数器,或者作为一个命名计数器,可以统计代码执行次数。

    还有一个 console.countReset(), 可以用它重置计数器。

    除此之外,还有许多调试方法,这里就不一 一叙述了,虽然用处不是很大,但它仍然是一个有趣的想法,这样使你的代码调试更加清晰。

    随笔参考
      https://segmentfault.com/a/1190000018756503#articleHeader6
    感谢博主分享!
  • 相关阅读:
    python 引用和对象理解
    ABP .Net Core 部署到IIS 问题汇总
    Ionic2 cordova angular2 打包到Android apk环境搭建
    学习ABP ASP.NET Core with Angular 环境问题
    [AngularJS 2 实践 一]My First Angular App
    即时通信系统Openfire分析之一:Openfire与XMPP协议
    S3C6410启动过程分析
    使用Word发表博客园博文
    github学习笔记
    Mac环境下 配置Python数据分析环境
  • 原文地址:https://www.cnblogs.com/gaosirs/p/10722543.html
Copyright © 2011-2022 走看看