JavaScript Debug 之 Console

2019独角兽企业重金招聘Python工程师标准>>>

简评：只知道 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 commentscomments: false,compress: {// remove warningswarnings: false,// Drop console statementsdrop_console: true},
}
})] : []
}

原文： How you can improve your workflow using the JavaScript console

转载于:https://my.oschina.net/jpushtech/blog/1839155

JavaScript Debug 之 Console相关推荐

javascript中的console.log有什么作用？
javascript中的console.log有什么作用? 主要是方便你调式javascript用的.你可以看到你在页面中输出的内容. 相比alert他的优点是: 他能看到结构话的东西,如果是aler ...
javascript教程：console.log 详解
对应WEB程序员,console.log 可以说是神器,极大地方便了程序开发.程序猿:学习了,用Console写日志比alert方便多了. console.log(object[, object, . ...
解决eclipse Run启动或Debug时Console控制台不自动弹出问题
解决eclipse Run启动或Debug时Console控制台不自动弹出问题参考文章: (1)解决eclipse Run启动或Debug时Console控制台不自动弹出问题 (2)https:// ...
JavaScript输出语句console.log输出换行代码
描述:JavaScript输出语句console.log输出换行代码代码: console.log("a"+ '\n' )
php有哪些debug方式,Console有哪些Debug方法
这次给大家带来Console有哪些Debug方法,使用ConsoleDebug的注意事项有哪些,下面就是实战案例,一起来看一下. 前言在过去的十年中,我最热衷的事情之一就是前端开发(特别是JavaS ...
[乐意黎翻译]JavaScript命令之Console大全
一.显示信息的命令 <script type="text/javascript"> console.log('hello'); console.info('信息'); ...
Javascript高级调试——console.table()
原文:http://www.mariusschulz.com/2013/11/13/advanced-javascript-debugging-with-consoletable 本文只是简单翻译,部 ...
Javascript调试之console对象，它的一些小技巧你都知道吗？
前言写过前端Javascript代码的同学肯定不会对console对象感到陌生,在调试的过程中我们经常会用console对象在控制台输出一些常量或者变量. 但是相信很多人也就只用过console.l ...
JavaScript中使用console调试程序的坑
上DEMO a = {key1: [1, 2], 'key2': {'key4': '11'}, 'key3': [1, 2]} console.info(1,a) a.key2.key4 = '22 ...

JavaScript Debug 之 Console

JavaScript Debug 之 Console相关推荐

最新文章

热门文章