• JavaScript Debug 之 Console


    简评:只知道 console.log ?是时候提升一下对 console 的认知了。

    JavaScript console 是现代浏览器的一种内置功能,它允许开发者:

    • 查看网页上的错误和警告日志。
    • 使用 JavaScript 命令与网页进行交互。
    • 调试应用程序并直接在浏览器中遍历 DOM。
    • 检查和分析网络活动。

    基本上,你可以使用它来管理和监控 JavaScript 在浏览器中正确运行。

    Console.log, Console.error, Console.warn 和 http://Console.info

    log( ) / error( ) / warn( ) 和 info( ) 是最常用的方法,你可以将多个参数传递给这些方法(输出会使用空格分隔开来)。

    v2-a586802df9eed22addd5270d6c883227_hd.jpg

    Console.group

    这个方法允许你对一些列 console.logs (error 和 info 同理)分组在一个可以折叠的组中,

    用法非常简单,只需要将 console.log 放置 console.group 和 console.groupEnd 中即可。

    v2-0fbb29e3b0abb73ad53ff23b25332ab6_hd.jpg

    输出如下:

    v2-5c4bf3128ac0a6aa0f7631c5c3150b60_hd.jpg

    Console.table

    使用 console.log 来显示一个 JSON 或者一个非常大的 JSON 数组的时候不便于阅读,这时候可以使用 console.table 来显示效果会更好。

    v2-40dea106b5b6f80eb9a92377d504b232_hd.jpg

    输出结果:

    v2-41023631acbc3f532a11a3e093244a62_hd.jpg

    Console.count, Console.time 和 Console.timeEnd

    console.time 和 console.timeEnd 可以方便的查看代码段耗费的时间。console.count 可以用于记录代码执行的次数:

    v2-53da579733668ba1c77a73dee9a80d1a_hd.jpg

    输出如下:

    v2-e8a2e8eaeb11609ef5194c96d2d2efa1_hd.jpg

    Console.trace 和 Console.assert

    这个方法会在被调用的地方打印堆栈信息,例如:你正在创建一个 JS 库,并且想告诉用户错误产生的地方。

    v2-f68776ae3e33a87a277b6458b264bb49_hd.jpg

    结果输出如下:

    v2-f53cc55c6eda6507956dcff31915e723_hd.jpg

    生产环境中删除所有 Consoles

    我们往往在开发环境才需要使用 console,并希望在生产环境去除这部分内容。这时候可以使用 uglifyjs-webpack-plugin 删除生产环境不想不留的 consoles。

    const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
    var debug = process.env.NODE_ENV !== "production";
    

    .....
    optimization: {
    minimizer: !debug ? [
    new UglifyJsPlugin({
    // Compression specific options
    uglifyOptions: {
    // Eliminate comments
    comments: false,
    compress: {
    // remove warnings
    warnings: false,
    // Drop console statements
    drop_console: true
    },
    }
    })] : []
    }

    原文:How you can improve your workflow using the JavaScript console
                </div>
  • 相关阅读:
    java实现第五届蓝桥杯出栈次序
    java实现第五届蓝桥杯年龄巧合
    java实现第五届蓝桥杯年龄巧合
    java实现第五届蓝桥杯年龄巧合
    java实现第五届蓝桥杯年龄巧合
    java实现第五届蓝桥杯年龄巧合
    Java使用RandomAccessFile读写文件
    Java 实现文件随机读写-RandomAccessFile
    NIO 中文乱码自我解决的简单DEMO
    NIO 中文乱码问题的解决代码实现
  • 原文地址:https://www.cnblogs.com/jpush88/p/9257068.html
Copyright © 2020-2023  润新知