作者:eyk0256912 | 来源:互联网 | 2023-06-10 13:17
Day09–Console调试种种姿态指南作者:©liyuechun简介:JavaScript30是WesBos推出的一个30天应战。项目免费供应了30个视频教程、30个应战的肇端
Day09 – Console 调试种种姿态指南
作者:©liyuechun
简介:Javascript30 是 Wes Bos 推出的一个 30 天应战。项目免费供应了 30 个视频教程、30 个应战的肇端文档和 30 个应战解决方案源代码。目标是协助人们用纯 Javascript 来写东西,不借助框架和库,也不运用编译器和援用。如今你看到的是这系列指南的第 9 篇。完全中文版指南及视频教程在 从零到壹全栈部落。
项目结果
种种调试准确姿态
.log
的更多用法
这个是最经常使用的,但它另有一些更多功用:比方参数支撑相似 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 ##,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")
离别掌握开始点和完毕点,它们两的参数示意当前计时的称号,能够自定义但须要坚持雷同。所以假如想看异步猎取数据花了多场时候,能够如许写:
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
社群品牌:从零到壹全栈部落
定位:寻觅共好,配合进修,延续输出全栈手艺社群
业界声誉:IT界的逻辑思维
文明:输出是最好的进修体式格局
官方民众号:全栈部落
社群发起人:春哥(从零到壹创始人,交换微信:liyc1215)
手艺交换社区:全栈部落BBS
全栈部落完全系列教程:全栈部落完全电子书进修笔记
关注全栈部落官方民众号,每晚十点吸收系列原创手艺推送 |
---|
|