首页 > 其他分享 >Day09 - Console 调试各种姿势指南

Day09 - Console 调试各种姿势指南

时间:2023-04-08 17:03:33浏览次数:48  
标签:输出 Day09 console log dog rgba Console 调试 name


Day09 - Console 调试各种姿势指南

作者:©liyuechun

项目效果


各种调试正确姿势

.log 的更多用法

这个是最常用的,但它还有一些更多功能:比如参数支持类似 C 语言的字符串替换模式。

  • %s 字符串
  • %d 整数
  • %f 浮点值
  • %o Object
  • %c 设定输出的样式,在之后的文字将按照第二个参数里的值进行显示
console.log("I am a String: %s ", "log"); //log
console.log("I am a int number: %d ", 1); //1
console.log("I am a float number: %d ", 1.23); //1.23
let dog = {name: "Lucky",age: "5"};
console.log("%o",dog);
console.log("%c3D Text"," text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em");

清空 console 面板输出内容

要清空已经打印输出的内容,有两种方式,一种是 JavaScript 语句: console.clear()。另一个是快捷键 Ctrl + L

不同样式的输出

除了常规的 log 之外,还有一些其他已设定好的样式,区别在于图标或者颜色不一样:

// warning!
console.warn("用于输出警示信息");
// Error :|
console.error("用于输出错误信息");
// Info
console.info("用于输出提示性信息");
//debug
console.debug("用于输出调试信息");

打印DOM节点

获取 DOM 元素之后,可以直接打印输出。

const p = document.querySelector('p');
console.log(p);
console.dir(p);
  • .log 输出这个 DOM 的 HTML 标签。
  • .dir 则会输出这个 DOM 元素的属性列表。

断点调试

console.asset(arg1,arg2)方法接受一个表达式作为参数,如果参数返回值是false,则会输出第二个参数中的内容。

const p = document.querySelector('p');
console.assert(p.classList.contains('ouch'), 'That is wrong!');

打印表格

console.table()方法,可以将数组、对象以表格的形式打印输出,如果只输出其中的某一列,可以加上第二个参数,如下所示:

console.table(dogs);
console.table(dogs, ["age"]);

分组打印

const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];
dogs.forEach(dog => {
    console.group(`${dog.name}`);        
//  console.groupCollapsed(`${dog.name}`);  // 列表默认叠起状态
    console.log(`${dog.name}`);
    console.log(`${dog.age}`);
    console.log(`${dog.name} 有 ${dog.age} 岁了`);
    console.groupEnd();
});

group()方法中可以传入这个分组的名称。group()/groupCollapsed()groupEnd() 之间的内容会自动分组,区别在于是否能自动折叠。


console.count() 计数

通过console.count()可以对输出的对象进行计数。但需要注意的是这里的计数对象仅限于由 count() 输出的内容,并非所有 console 中的输出。

time 计时

time("name")timeEnd("name") 分别控制开始点和结束点,它们两的参数表示当前计时的名称,可以自定义但需要保持相同。所以如果想看异步获取数据花了多场时间,可以这样写:

js
console.time('fetch my data');
fetch("https://api.github.com/users/soyaine")
.then(data => data.json())
.then(data => {
console.timeEnd('fetch my data');
console.log(data);
});

如果 timeEnd 中的名称如果和上面不一样,得到的数据是系统当前时间换算后的毫秒值。

源码下载

Github Source Code

标签:输出,Day09,console,log,dog,rgba,Console,调试,name
From: https://blog.51cto.com/u_10981011/6177804

相关文章

  • Linux内核Oops调试方法总结
    前言:内核开发比用户空间开发更难的一个因素就是内核调试艰难。内核错误往往会导致系统宕机,很难保留出错时的现场。调试内核的关键在于你的对内核的深刻理解。1、调试前的准备在调试一个bug之前,我们所要做的准备工作有:有一个被确认的bug。包含这个bug的内核版本号,需要分析出这......
  • vs调试“字符串中字符无效”处理办法
    在使用VS2019调试代码时,查看变量值时,utf8格式字符串不能正常显示,需要在变量名后手动添加",s8",就能正常查看字符啦。总结如下:,s8:将字符串转成unicode展示,数字将变量拆分为数组显示,数字是要显示多少位,此法对constchar*这类原始字符串非常有用,x16进制查看,hr查看Win......
  • js反调试
    varstartTime=newDate();debugger;varendTime=newDate();varisDev=endTime-startTime>100;varstack=[];if(isDev){while(true){stack.push(this);console.log(stack.length,this)}}内存耗尽的方法更多参考https://baijiahao.baidu.com/s?id=17538......
  • 5.调试客户端和服务端
    笔记软件在2023/4/614:01:13推送该笔记调试客户端和服务端调试客户端代码就像调试普通插件一样简单。在代码中打上断点,然后按F5启动插件调试。​​‍......
  • 【调试】kprobes(二)使用方法
    前言上一节介绍了kprobe的基本概念,下面我们将使用几个具体的例子,看下kprobe在实际使用中有那些应用场景。kprobe内核的samples/kprobe目录下有kprobe相关的例子,我们以这些例子为基础,简单修改下。查看函数的入参我们所有的例子都是探测do_sys_open()或者_do_fork(),以下是内核......
  • 【调试】kprobes(一)基本概念
    简介开发人员在内核或者模块的调试过程中,往往会需要要知道其中的一些函数有无被调用、何时被调用、执行是否正确以及函数的入参和返回值是什么等等。比较简单的做法是在内核代码对应的函数中添加日志打印信息,但这种方式往往需要重新编译内核或模块,重新启动设备之类的,操作较为复......
  • MindSpore开发静态图调试记录
    主要参考资料:静态图语法支持-MindSporemasterdocumentation定位错误:报错会生成rank_0/om/analyze_fail.dat文件,按instruction定位即可#1.ThisfileshowstheparsedIRinfowhengraphevaluatingfailedtohelpfindtheproblem.#2.Youcansearchthelast`----......
  • K8S 1.24.1 helm 部署 kafka 和 kafka-console-ui
    背景IP角色中间件172.16.16.108k8s-master-1kafka,zookeeper172.16.16.109k8s-node-1kafka,zookeeper172.16.16.110k8s-node-2kafka,zookeeper部署kafkamkdir-p/data/yaml/klvchen/kafka&&cd/data/yaml/klvchen/kafka#添加bitnamichar......
  • WinDbg调试Dump转储文件及程序崩溃时自动创建转储文件的方式
    通过WinDbg分析转储文件在调试过程中回遇到一些很奇怪的问题,编译器调试无法正常定位问题,所以需要WinDbg,这篇博客是对照多篇文档的简易的入门整理一、必备知识1.1、下载WinDbg微软文档下载Windows调试工具-WinDbg-Windowsdrivers|MicrosoftLearnWinDbgPreview是......
  • 力士乐驱动调试软件13v16版本,中文版本的
    力士乐驱动调试软件13v16版本,中文版本的,用这个调试过项目,配套还有好多手册YID:5189656708457614......