JavaScript Debug 之 Console

RaoMeng 发布于2019-08-22 18:27 / 1968人阅读

摘要：是现代浏览器的一种内置功能，它允许开发者查看网页上的错误和警告日志。使用命令与网页进行交互。调试应用程序并直接在浏览器中遍历。检查和分析网络活动。结果输出如下生产环境中删除所有我们往往在开发环境才需要使用，并希望在生产环境去除这部分内容。

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

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

查看网页上的错误和警告日志。

使用 JavaScript 命令与网页进行交互。

调试应用程序并直接在浏览器中遍历 DOM。

检查和分析网络活动。

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

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

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

Console.group

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

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

输出如下：

Console.table

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

输出结果：

Console.count, Console.time 和 Console.timeEnd

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

输出如下：

Console.trace 和 Console.assert

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

结果输出如下：

生产环境中删除所有 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

云服务器 GPU云服务器 console console.log console.log() 阿里云console

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95884.html

JavaScript函数式编程，真香之组合(一)

摘要：组合的概念是非常直观的，并不是函数式编程独有的，在我们生活中或者前端开发中处处可见。其实我们函数式编程里面的组合也是类似，函数组合就是一种将已被分解的简单任务组织成复杂的整体过程。在函数式编程的世界中，有这样一种很流行的编程风格。 JavaScript函数式编程，真香之认识函数式编程(一) 该系列文章不是针对前端新手，需要有一定的编程经验，而且了解 JavaScript 里面作用域，闭...

mengbo 2019-08-23 15:22 评论0 收藏0
Emscripten教程之如何调试代码（六）

摘要：值启用了更详细的堆栈保护检查，它以牺牲一些性能的代价提供更精确的。这种可以由任何类型的编码错误引起，但表现为函数指针错误，因为在运行时的预期表中无法找到函数。翻译：云荒杯倾本文是Emscripten-WebAssembly专栏系列文章之一，更多文章请查看专栏。也可以去作者的博客阅读文章。欢迎加入Wasm和emscripten技术交流群，群聊号码：939206522。调试Emscri...

cod7ce 2019-08-22 11:12 评论0 收藏0
Source Map入门教程

摘要：多个文件合并，减少请求数。生成的多了，表示文件的位置。转换前的所有变量名和属性名。自从年双十一正式上线，累计处理了亿错误事件，得到了金山软件等众多知名用户的认可。部署前端之前，开发者通常会对代码进行打包压缩，这样可以减少代码大小，从而有效提高访问速度。然而，压缩代码的报错信息是很难Debug的，因为它的行号和列号已经失真。这时就需要Source Map来还原真实的出错位置了。 sho...

archieyang 2019-08-21 11:38 评论0 收藏0
前端干货之JS最佳实践

摘要：避免与进行比较避免推荐与进行比较的代码，可以用以下技术进行替换如果值是一个应用类型，使用操作符，检查其构造函数如果值是基本类型，使用检查其类型如果是希望对象包含某个特定的方法名，则只用操作符确保指定名字的方法存在于对象上。持续更新地址 https://wdd.js.org/js-best-pr... 1. 风格一千个读者有一千个哈姆雷特，每个人都有自己的code style。...

Aceyclee 2019-08-21 14:34 评论0 收藏0