c++ console 取实时输入_灵活使用 console 让 js 调试更简单

译者:前端小智
原文: https://medium.com/@mattburgess/beyond-console-log-2400fdf4a9d8https://medium.freecodecamp.org/10-tips-to-maximize-your-javascript-debugging-experience-b69a75859329

Web开发最常用的高度就是 console.log ,虽然 console.log 占有一席之地,但很多人并没有意识到 console 本身除了基本 log 方法之外还有很多其他方法。 适当使用这些方法可以使调试更容易,更快速,更直观。

想优质文章请猛戳GitHub博客,一年百来篇优质文章等着你!

console.log()

console.log 中有很多人们意想不到的功能。虽然大多数人使用 console.log(object) 来查看对象,但是你也可以使用 console.log(object, otherObject, string),它会把它们都整齐地记录下来,偶尔也会很方便。

不仅如此,还有另一种格式化的: console.log(msg, values),这很像 C 或 PHP 中的sprintf

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

会像你预期的那样输出:

> I like Skittles but I do not like pus.

常见的占位符 %o (这是字母o,不是0),它接受对象,%s 接受字符串,%d 表示小数或整数。

4be656d662b64cc03f1e17583537debe.png

另一个有趣的是 %c,这可能与你所想不太相同,它实际上是CSS值的占位符。使用%c占位符时,对应的后面的参数必须是CSS语句,用来对输出内容进行CSS渲染。常见的输出方式有两种:文字样式、图片输出

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

a2edc5f7230a1b08a422262c3d86747b.png

它并不优雅,也不是特别有用。当然,这并不是一个真正的按钮。

e33413bad8e586e7db836dc9c18a065d.png

它有用吗? 恩恩恩。

console.dir()

在大多数情况下,console.dir() 的函数非常类似于 log(),尽管它看起来略有不同。

cd43a09e44b30adad64943c7c8d6a810.png

下拉小箭头将显示与上面相同的对象详细信息,这也可以从console.log 版本中看到。当你查看元素的结构时候,你会发现它们之间的差异更大,也更有趣。

let element = document.getElementById('2x-container');

使用 console.log 查看:

8b3c845bf072d9465c993f95da222327.png

打开了一些元素,这清楚地显示了 DOM,我们可以在其中导航。但是console.dir(element)给出了更加方便查看 DOM 结构的输出:

这是一种更客观地看待元素的方式。有时候,这可能是您真正想要的,更像是检查元素。

5cf7dd69f7fd0e443a3418a884bbc500.png

console.warn()

可能是最明显的直接替换 log(),你可以以完全相同的方式使用 console.warn()。 唯一真正的区别是输出字的颜色是黄色的。 具体来说,输出处于警告级别而不是信息级别,因此浏览器将稍微区别对待它。 这具有使其在杂乱输出中更明显的效果。

c395d4469ba0d0f6f65300c158d5c5bf.png

不过,还有一个更大的优势,因为输出是警告而不是信息,所以你可以过滤掉所有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(data) 的输出要有用得多。

f464314be21bd6e5fcda87979a05c5a6.png

第二个可选参数是所需列的列表。显然,所有列都是默认值,但我们也可以这样做:

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

4e265fb6ec279a886244f7b2c3dd6262.png

这里要注意的是这是乱序的 - 最右边的列标题上的箭头显示了原因。 我点击该列进行排序。 找到列的最大或最小,或者只是对数据进行不同的查看非常方便。 顺便说一句,该功能与仅显示一些列无关,它总是可用的。

console.table() 只能处理最多1000行,因此它可能不适合所有数据集。

console.assert()

assert()log() 是相同的函数,assert()是对输入的表达式进行断言,只有表达式为false时,才输出相应的信息到控制台,示例如下:

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

9aceb806370f413d8387390532b09e8d.png

有时我们需要更复杂的条件句。例如,我们已经看到了用户 WAL0412 的数据问题,并希望仅显示来自这些数据的事务,这是直观的解决方案。

console.assert(tx.buyer === 'WAL0412', tx);

这看起来不错,但行不通。记住,条件必须为false,断言才会执行,更改如下:

console.assert(tx.buyer !== 'WAL0412', tx);

与其中一些类似,console.assert() 并不总是特别有用。但在特定的情况下,它可能是一个优雅的解决方案。

console.count()

另一个具有特殊用途的计数器,count只是作为一个计数器,或者作为一个命名计数器,可以统计代码被执行的次数。

for(let i = 0; i < 10000; i++) {if(i % 2) {console.count('odds');}if(!(i % 5)) {console.count('multiplesOfFive');}if(isPrime(i)) {console.count('prime');}
}

这不是有用的代码,而且有点抽象。这边也不打算演示 isPrime 函数,假设它是成立的。

执行后我们会得到一个列表:

odds: 1
odds: 2
prime: 1
odds: 3
multiplesOfFive: 1
prime: 2
odds: 4
prime: 3
odds: 5
multiplesOfFive: 2
...

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

console.trace()

trace() 在简单的数据中很难演示。当您试图在类或库中找出是哪个实际调用者导致了这个问题时,它的优势就显现出来了。

例如,可能有 12 个不同的组件调用一个服务,但是其中一个组件没有正确地设置依赖项。

export default class CupcakeService {constructor(dataLib) {this.dataLib = dataLib;if(typeof dataLib !== 'object') {console.log(dataLib);console.trace();}}...
}

这里使用 console.log() 仅告诉我们传递数据dataLib是什么 ,而没有具体的传递的路径。不过,console.trace() 会非常清楚地告诉我们问题出在 Dashboard.js,我们可以看到是 new CupcakeService(false) 导致错误。

console.time()

console.time() 是一个用于跟踪操作时间的专用函数,它是跟踪 JavaScript执行时间的好方法。

function slowFunction(number) {var functionTimerStart = new Date().getTime();// something slow or complex with the numbers. // Factorials, or whatever.var functionTime = new Date().getTime() - functionTimerStart;console.log(`Function time: ${ functionTime }`);
}
var start = new Date().getTime();for (i = 0; i < 100000; ++i) {slowFunction(i);
}var time = new Date().getTime() - start;
console.log(`Execution time: ${ time }`);

这是一种老派的做法,我们使用 console.time() 来简化以上代码。

const slowFunction = number =>  {console.time('slowFunction');// something slow or complex with the numbers. // Factorials, or whatever.console.timeEnd('slowFunction');
}
console.time();for (i = 0; i < 100000; ++i) {slowFunction(i);
}
console.timeEnd();

我们现在不再需要做任何计算或设置临时变量。

console.group()

// this is the global scope
let number = 1;
console.group('OutsideLoop');
console.log(number);
console.group('Loop');
for (let i = 0; i < 5; i++) {number = i + number;console.log(number);
}
console.groupEnd();
console.log(number);
console.groupEnd();
console.log('All done now');

输出如下:

c6c5d576322060623d9eb7d213ad69ba.png

并不是很有用,但是您可以看到其中一些是如何组合的。

class MyClass {constructor(dataAccess) {console.group('Constructor');console.log('Constructor executed');console.assert(typeof dataAccess === 'object', 'Potentially incorrect dataAccess object');this.initializeEvents();console.groupEnd();}initializeEvents() {console.group('events');console.log('Initialising events');console.groupEnd();}
}
let myClass = new MyClass(false);

0c71f8675f2251240e79c820e271e0e0.png

多调试信息的代码,可能不是那么有用。 但它仍然是一个有趣的想法,这样写使你的日志记录更加清晰。

选择DOM元素

如果熟悉jQuery,就会知道 $('.class') 和 $('#id')选择器有多么重要。它们根据与之关联的类或 ID 选择 DOM 元素。

但是当你没有引用 jQuery时,你仍然可以在谷歌开发控制台中进行同样的操作。

$('tagName') $('.class') $('#id') and $('.class #id') 等效于document.querySelector(''),这将返回 DOM 中与选择器匹配的第一个元素。

可以使用 $$(tagName) 或 $$(.class), 注意双元符号,根据特定的选择器选择DOM的所有元素。这也将它们放入数组中,你也可以通过指定数组中该元素的位置来从中选择特定的元素。

例如,$$('.className') 获取具有类 className 的所有元素,而$$(.className')[0]$$('.className')[1]获取到分别是第一个和第二个元素。

e0fec5257a1583229728c259163f94fb.png

将浏览器转换为编辑器

你有多少次想知道你是否可以在浏览器中编辑一些文本? 答案是肯定的,你可以将浏览器转换为文本编辑器。 你可以在 DOM 中的任何位置添加文本和从中删除文本。

你不再需要检查元素并编辑HTML。相反,进入开发人员控制台并输入以下内容:

document.body.contentEditable=true

这将使内容可编辑。现在,你几乎可以编辑DOM中的任何内容。

查找与DOM中的元素关联的事件

调试时,需要查找 DOM 中某个元素的事件侦听器感时,谷歌控制台了 getEventListeners使找到这些事件更加容易且直观。

getEventListeners($(‘selector’)) 返回一个对象数组,其中包含绑定到该元素的所有事件。你可以展开对象来查看事件:

7fd4ee4012cfa78dd1557f0db82f6dfa.png

要找到特定事件的侦听器,可以这样做:

getEventListeners($(‘selector’)).eventName[0].listener

这将显示与特定事件关联的侦听器。这里 eventName[0] 是一个数组,它列出了特定事件的所有事件。例如:

getEventListeners($(‘firstName’)).click[0].listener

将显示与 ID 为 ‘firstName’ 的元素的单击事件关联的侦听器。

监控事件

如果希望在执行绑定到 DOM 中特定元素的事件时监视它们,也可以在控制台中这样做。你可以使用不同的命令来监控其中的一些或所有事件:

如果希望在执行绑定到DOM中特定元素的事件时监视它们,也可以在控制台中这样做。你可以使用不同的命令来监控其中的一些或所有事件:

  • monitorEvents($(‘selector’)) 将监视与选择器的元素关联的所有事件,然后在它们被触发时将它们打印到控制台。例如,monitore($(#firstName)) 将打印 IDfirstName元素的所有事件。
  • monitorEvents($(‘selector’),’eventName’) 将打印与元素绑定的特定事件。 你可以将事件名称作为参数传递给函数。 这将仅记录绑定到特定元素的特定事件。 例如,monitorEvents($(‘#firstName’),’click’) 将打印绑定到ID为'firstName'的元素的所有 click 事件。
  • monitore($(selector),[eventName1, eventName3', .])将根据您自己的需求记录多个事件。与其传递单个事件名作为参数,不如传递包含所有事件的字符串数组。例如monitore($(#firstName),[click, focus])将记录与ID firstName元素绑定的 click事件和focus事件。
  • unmonitorevent ($(selector)):这将停止监视和打印控制台中的事件。

检查 DOM 中的一个元素

你可以直接从控制台检查一个元素:

  • inspect($(‘selector’)) 将检查与选择器匹配的元素,并转到 Chrome Developer Tools中的 Elements 选项卡。 例如, inspect($(‘#firstName’)) 将检查 ID为'firstName' 的元素,spect($(‘a’)[3]) 将检查 DOM 中的第 4 个 a 元素。
  • $0, $1, $2 等可以帮助你获取最近检查过的元素。 例如,$0 表示最后检查的 DOM 元素,而$1 倒数第二个检查的 DOM 元素。

检索最后一个结果的值

你可以将控制台用作计算器。当你这样做的时候,你可能需要用第二个来跟踪一个计算。以下是如何从内存中检索先前计算的结果:

$_

过程如下:

2+3+4
9 //- The Answer of the SUM is 9$_
9 // Gives the last Result$_ * $_
81  // As the last Result was 9Math.sqrt($_)
9 // As the last Result was 81$_
9 // As the Last Result is 9

清除控制台和内存

如果你想清除控制台及其内存,输入如下:

clear()

你的点赞是我持续分享好东西的动力,欢迎点赞!

交流

干货系列文章汇总如下,觉得不错点个Star,欢迎 加群 互相学习。

https://github.com/qq449245884/xiaozhi

我是小智,公众号「大迁世界」作者,对前端技术保持学习爱好者。我会经常分享自己所学所看的干货,在进阶的路上,共勉!

关注公众号,后台回复福利,即可看到福利,你懂的。

3f88490a0956b2af04aeb43a4aa256e9.png

Lints and fixes files

yarn run lint

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/291795.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

windows之DNS7种资源记录和flushdns命令清除DNS缓存以及nslookup解析域名和ipconfig/all命令查看网络配置使用总结

1、DNS7种资源记录 DNS分为正向查找区域和反向查找区域&#xff0c;然后在分为&#xff0c;主要&#xff0c;辅助&#xff0c;存根区域&#xff0c;在这些区域里&#xff0c;又存在着很多的记录&#xff0c;今天&#xff0c;就让我们来看看这些记录&#xff1a;1&#xff0c;A记…

第2章 C语言概述

学习笔记——《C Primer Plus》 第2章 C语言概述2.1 简单的C程序实例2.2 实例解释2.2.1 快速概要1. #include指令和头文件2. main() 函数3. 声明4. 赋值5. printf() 函数5. return 语句2.3 简单程序的结构2.4 多个函数2.1 简单的C程序实例 #include <stdio.h> int main(…

KMP学习

2019独角兽企业重金招聘Python工程师标准>>> 从头到尾彻底理解KMP 字符串匹配的KMP算法 KMP算法的Next数组详解 package leetcode;import java.util.Arrays;public class ImplementStrStr {public int strStr(String haystack, String needle) {if(haystacknull||ne…

MVC应用程序实现文件库(FlexPaper)

很久之前Insus.NET在实现了《FlexPaper实现文档在线浏览》http://www.cnblogs.com/insus/archive/2011/07/21/2112369.html。 当时也只是实现了显示而已&#xff0c;也没有实现在线转换功能。现在&#xff0c;Insus.NET已经从asp.net转向了asp.net MVC应用程序开发了。因此再想…

海量数据处理面试题集锦

十七道海量数据处理面试题与Bit-map具体解释作者&#xff1a;小桥流水&#xff0c;redfox66&#xff0c;July。前言本博客内以前整理过有关海量数据处理的10道面试题&#xff08;十道海量数据处理面试题与十个方法大总结&#xff09;&#xff0c;此次除了反复了之前的10道面试题…

如何避免在迭代集合为 null 时抛出的空引用异常?

咨询区 Polaris878我在遍历集合时&#xff0c;经常会遇到集合为 null 的情况&#xff0c;比如下面这样&#xff1a;int[] returnArray Do.Something(...);拿到数组后&#xff0c;接下来我用下面的方式进行遍历。foreach (int i in returnArray) {// do some more stuff }说实话…

java之解析DNS的SRV记录

1、导入相应的jar包 导入sjava-2.1.6.jar包&#xff0c;今天上传资源有问题&#xff0c;下次传了之后再补充到这里。 2、关键代码 public static List<String> resoveSrv(String query) {// String s "ramuh.example.com"; // the inputted string, I …

c#队列取值_C# 队列

1 Queue23 usingSystem;4 usingSystem.Collections.Generic;5 usingSystem.Linq;6 usingSystem.Text;7 usingSystem.Threading;89 namespaceDataStructure10 {11 /// 12 ///队列接口13 /// 14 interface IQueue15 {16 void EnQueue(T elem); //入队列操作17 T DeQueue(); //出队…

中小企业项目的痛VS感人IT团队

早上&#xff0c;接到客户电话&#xff0c;dynamics CRM不能用了&#xff0c;此客户从开始安装程序开始二次开发期间&#xff0c;因电源问题导致服务器多次意外断电&#xff0c;至今也不加UPS电源。前几次&#xff0c;都不是很严重&#xff0c;服务器没有大量文件损坏&#xff…

java的linux执行的shell

2019独角兽企业重金招聘Python工程师标准>>> #!/bin/sh #该脚本为Linux下启动java程序的通用脚本。即可以作为开机自启动service脚本被调用&#xff0c; #也可以作为启动java程序的独立脚本来使用。 # # #警告!!!&#xff1a;该脚本stop部分使用系统kill命…

统计 Github 2021 贡献过的开源项目

统计一下 2021 贡献过的开源项目Intro新的一年的开始了&#xff0c;有很多总结和回顾还没有做&#xff0c;今天就盘点一下贡献过的开源项目吧~起初想着手动地通过 Github Dashboard 来统计但是感觉有些麻烦&#xff0c;还得一个个地复制标题链接等&#xff0c;好麻烦&#xff0…

linux c之<setjmp.h>使用总结

1、爆代码 #include<setjmp.h> #include<unistd.h> #include<stdio.h> #include<stdlib.h>void f1(int, int, int, int); void f2(void);static jmp_buf jmpbuffer; static int globval; int i = 4; int main(void) {int autoval;register i…

Unit Three-Program test

编程练习——《C Primer Plus》 Unit Three-Program test Program_test_5 /* Program Test :一年大约有 3.15610^7秒。编写一个程序&#xff0c;提示用户输入年龄&#xff0c;然后显示该年龄对应的秒数。 */ #include<stdio.h> int main(void) {int i_age;double d…

IntentService使用

说实话&#xff0c;对于这个类在我实际工作中并没有用到过&#xff0c;通常也只是用了它的父类Service&#xff0c;通过官方文档可以看出类的层次结构: 而在今年的一次面试当中&#xff0c;有个面试官提起了它&#xff0c;所以虽说目前还没有真实在项目中用它&#xff0c;但是有…

如何使用 Barracuda 防火墙设置/保护 Azure 应用程序

&#xfeff;&#xfeff;如果某企业在 Windows Azure 上托管某个应用程序&#xff0c;该应用程序会在某个特定时间暴露到 Internet&#xff0c;以用于商业用途。公共 Internet 带来客户的同时也带来了攻击者。 Tim Omta 发表的新博客文章中介绍了如何使用 PaaS 应用程序之前的…

Git 简单命令行指令

为什么80%的码农都做不了架构师&#xff1f;>>> 这些git命令来自gitlab的简单提示&#xff0c;挺人性化&#xff0c;记录下。 Git 全局设置 git config --global user.name "yourname" git config --global user.email "yournamemail.com" 创…

python创_Python创建Windows 服务

Python 写windows 服务&#xff0c;需要使用 pywin32包。直接上代码&#xff1a;#encodingutf8Created on 2014-7-1author: wangmengnanimport osimport sysimport win32serviceutilimport win32serviceimport win32eventclass PythonService(win32serviceutil.ServiceFramewor…

C# 值类型的局限性

如果程序希望使用一个值类型实例来进行同步&#xff0c;通常都会是错误(bug)。但运行时应该认为这是非法并抛出异常吗?在下面的代码示例中如果两个不同的线程同时调用同一个Counter 实例的Increment 方法&#xff0c;将会发生什么?class Counter{private int _i;public int I…

linux之网络编程ICMP校验算法

1、ICMP校验算法代码 unsigned short cal_chksum(unsigned short *addr,int len) { int nleft len; int sum 0; unsigned short *w addr; unsigned short answer 0; /*把ICMP报头二进制数据以2字节为单位累加起来*/ while(nleft > 1) { sum *w; nle…

第4章 字符串和格式化输入/输出

学习笔记——《C Primer Plus》 第4章 字符串和格式化输入/输出4.1 前导程序4.2 字符串简介4.2.1 char 类型数组和 null 字符4.2.2 使用字符串4.2.3 strlen() 函数4.3 常量和 C 预处理器4.3.1 符号常量1. 使用**符号常量**的好处:2. 创建符号常量4.3.2 const 限定符4.3.3 转换说…