如何使用JavaScript控制台改进工作流程
作为Web开发人员,很有必要了解如何调试代码。后台开发我们经常使用外部库来记录日志,并在某些情况下格式化显示日志,前端我们会使用断点和控制台,但是我们浏览器的控制台比我们想象的要强大得多。
当我们考虑控制台时,首先想到的是console.log,对吧?但是它比我们想像中使用的方法多得多。现在我们来看一下如何充分利用控制台,我将为您提供一些技巧,使这些方法更具可读性
什么是控制台?
JavaScript控制台是现代浏览器中的内置功能,它在类似shell的界面中带有开箱即用的开发工具。它允许开发人员:
- 查看网页上发生的错误和警告的日志。
- 使用JavaScript命令与网页交互。
- 调试应用程序并直接在浏览器中遍历DOM。
- 检查和分析网络活动 基本上,它使您能够在浏览器中编写,管理和监控JavaScript。
Console.log,Console.error,Console.warn和Console.info 这些可能是最常用的方法。您可以将多个参数传递给这些方法。每个参数都在由空格分隔的字符串中进行计算和连接,但是对于对象或数组,您可以在它们的属性之间导航。
Console.group
在检查代码逻辑和流程时我们可能会使用很多的console.log()来检测,但是你会发现控制台打印出来的非常多。此方法允许您在可折叠的组下对一系列console.log(以及错误信息等)进行分组。语法非常简单:只需console.log在之前输入我们想要分组的所有内容console.group()(或者console.groupCollapsed()如果我们希望它默认关闭)。然后console.groupEnd()在末尾添加一个关闭组。
Console.table
自从我发现console.table我的生活都发生了改变。在一个内部显示JSON或非常大的JSON数组console.log是一种不好的体验。这console.table允许我们在一个漂亮的表中可视化这些结构,我们可以在其中命名列并将它们作为参数传递。
非常好,在调试中非常有用:
Console.count,Console.time和Console.timeEnd 对于需要调试的每个开发人员来说,这三种方法都是瑞士军刀。该console.count计数和输出是的次数count()已被调用在同一行,并用相同的标签。该console.time开始用指定为输入参数的名称定时器,可以运行多达10,000个特定网页上同时定时器。启动后,我们使用调用来console.timeEnd停止计时器并将经过的时间打印到控制台。
输出将如下所示:
Console.trace和Console.assert
这些方法只是从调用它的代码位置,打印堆栈跟踪。想象一下,您正在创建一个JS库,并希望通知用户生成错误的位置。在这种情况下,这些方法非常有用。该console.assert是喜欢console.trace,但是只打印条件不符合的。
正如我们所看到的,输出正是React(或任何其他库)在生成异常时向我们展示的内容。
删除所有控制台?
使用控制台通常会迫使我们消除它们。或者有时候我们会忘记生产构建(并且只会在几天和几天之后错误地注意它们)。当然,我不建议任何人滥用不需要它们的控制台(更改输入句柄中的控制台可以在看到它工作后删除)。您应该在开发模式下保留错误日志或跟踪日志以帮助您进行调试。我在工作和我自己的项目中都经常使用Webpack。此工具允许您使用uglifyjs-webpack-plugin从生产版本中删除您不想保留的所有控制台(按类型)?
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
var debug = process.env.NODE_ENV !== "production";.....
optimization: {minimizer: !debug ? [new UglifyJsPlugin({// Compression specific optionsuglifyOptions: {// Eliminate commentscomments: false,compress: {// remove warningswarnings: false,// Drop console statementsdrop_console: true},}})] : []
}
配置非常简单,它简化了工作流程,所以控制台还是很好玩的(但不要滥用它!)
更多专业前端知识,请上 【猿2048】www.mk2048.com
如何使用JavaScript控制台改进工作流程相关推荐
- javascript控制台_如何使用JavaScript控制台改善工作流程
javascript控制台 by Riccardo Canella 里卡多·卡内拉(Riccardo Canella) 如何使用JavaScript控制台改善工作流程 (How you can imp ...
- 【以太坊】javascript控制台完整交易流程
一.前言 在前面几章,我们简单的在本地搭建了以太坊的测试网络.需要的小伙伴们可以看一下之前的那篇:搭建测试网络之ubuntu系统安装geth客户端以及同步区块数据,现在的问题是搭建完之后,该如何进行操 ...
- 北京国税:用虚拟化改进工作流程
尽管起初只是抱着试试看的态度在硬件部署时采用了VMware的服务器虚拟化软件,但北京国税从此与虚拟化结下了不解之缘.采用虚拟化技术以后,北京国税的IT人员再也不用总往机房跑了,也不用为每个新的应用部署 ...
- Tracup丨先进的工作流程管理如何为你节省巨额花销?
目录 1.简化流程 2. 获得预先批准 3.计划工作,工作计划 4. 有一个中心地址来存储所有信息 5. 避免遗漏 改进工作流程管理有什么好处? 你组织工作和管理项目的方式是最佳的吗? 或者说,你每年 ...
- DocuWare 文件管理与工作流程自动化案例研究——DocuWare 工作流程功能使在家工作的员工能够保持沟通和高效工作,支持混合环境
公司名称:Lohmiller & Company /Carrier West 所在地: 美国 行业: 服务提供商 部署方式: 混合 部门: 应付账款,信贷部,人力资源部,收发部,保修科,商业销 ...
- 从0开始学管理系列(五) —— 工作流程标准化
文章目录 一 什么是管理?我们为什么要管理? 二 我们如何去管理?我们管理会碰到哪些问题?如何解决? 三 如何打造一个高效的项目团队? 四 管理中提高效率的工具有哪些 五 工作流程标准化 前言 上篇 ...
- LWN: 改进Linux kernel的工作流程!
Next steps for kernel workflow improvement By Jonathan CorbetNovember 1, 2019 OSS EU 原文来自:https://lw ...
- [JavaScript][AJAX] 前后端交互流程,ajax工作流程
目录 前后端交互流程 1.了解服务器 : 提供服务器的机器(计算机) 2.前端 访问服务器的几种方式 3.ajax技术 : 页面不跳转的情况下,向服务器请求数据 4.前后端交互三个流程 ajax工作流 ...
- 小程序工程化实践(上篇)-- 手把手教你撸一个小程序 webpack 插件,一个例子带你熟悉 webpack 工作流程...
本文基于 webpack 4 和 babel 7,Mac OS,VS Code 小程序开发现状: 小程序开发者工具不好用,官方对 npm 的支持有限,缺少对 webpack, babel 等前端常用工 ...
最新文章
- mysql中行转列,MySQL 中行转列的方法
- Chrome 提标 您的浏览器限制了第三方Cookie...解决方法
- html 判断boolean,js关于if()else{}中的判定条件的认识,各种数据类型转换为Boolean类型的转换规则...
- 20141016--for 菱形
- 全民app使用率排行榜统计全了,微信再次位居榜首!
- 架构必备「RESTful API」设计技巧经验总结
- 万字长文梳理:从0开始,步入Service Mesh微服务架构的世界
- Swift中文教程(三) 字符串和字符
- 收藏 | 使用合成数据集做目标检测
- 使用EntityFramework Core和Enums作为字符串的ASP.NET Core Razor页面——第一部分
- 【LOJ】#2187. 「SHOI2014」三叉神经树
- Android 防止button多次点击总结
- 万能码:新发展新纪元(安全扫码专业委员会)
- 什么是社会融资规模,M0、M1、M2?
- 计算机锁屏图片怎么设置方法,怎么设置电脑锁屏图片 电脑锁屏图片设置步骤...
- git is outside repository
- 数据库维护任务-邮件通知:未配置全局配置文件。请在 @profile_name 参数中指定配置文件名。
- Oracle 数据库的PLSQL块,游标、函数,存储过程与触发器的使用方法与案例
- Lisa随手记 1.7 帮助
- 四阶魔方玩法总结V1.0