JavaScript 30 Day -- 08 Console 调试技巧指南

实现效果：

Console 面板里的调试技巧

关键点：

.log 的更多用法这个是最常用的，但它还有一些更多功能：比如参数支持类似 C 语言的字符串替换模式。   %s 字符串%d 整数%f 浮点值%o Object%c 设定输出的样式，在之后的文字将按照第二个参数里的值进行显示console.log("输出一个字符串 %s ", "log");console.log("输出一个整数是 %d ", 1.23); //1console.log("输出一个小数是 %f ", 1.23); //1.23console.log("%c不同样式的输出效果", "color: #00fdff; font-size: 2em;");不同样式的输出除了常规的 log 之外，还有一些其他已设定好的样式，区别在于图标或者颜色不一样：// warning!console.warn("三角感叹号图标，淡黄色背景")// Error :|console.error("红叉图标，红字红色背景");// Infoconsole.info("蓝色圆形感叹号图标");打印输出 DOM 元素获取 DOM 元素之后，也可以打印输出。const p = document.querySelector('p');console.log(p);console.dir(p);不同的地方在于，log 输出这个 DOM 的 HTML 标签，而 dir 则会输出这个 DOM 元素的属性列表。清空 console 面板输出内容要清空已经打印输出的内容，有两种方式，一种是 JavaScript 语句： console.clear()。另一个是快捷键 Ctrl ＋ L。asset 方法进行测试接受一个表达式作为参数，如果参数返回值是 false，则会输出第二个参数中的内容。console.assert(1 ===1, "（这句发布时删除）");console.assert(1 ===0, "看看看，失策了吧");console.assert(p.innerHTML.match("她"), "我这儿才没有她这个人");以更清晰的形式输出数据此前的文章中已经提到了 console.table() 方法，可以将数组、对象以表格的形式打印输出，如果只输出其中的某一列，可以加上第二个参数，示例如下。console.table(dogs);console.table(dogs, ["age"]);除了按表格，还可以将数据分组展示，直接看例子：const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];dogs.forEach(dog => {    console.group();        //  console.groupCollapsed();  // 收起列表    console.log(`${dog.name}`);    console.log(`${dog.age}`);    console.log(`${dog.name} 有 ${dog.age} 岁了`);    console.groupEnd();});这个例子中，group()/groupCollapsed() 与 groupEnd() 之间的内容会自动分组，区别在于是否自动展开。效果类似于 Excel 中的分类汇总的简易版。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 中的名称如果和上面不一样，得到的数据是系统当前时间换算后的毫秒值。

javascript

    const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];    function makeGreen() {      const p = document.querySelector('p');      p.style.color = '#BADA55';      p.style.fontSize = '50px';    }    // Regular 正常输出    console.log("QC");    console.log("QC","CQ");    console.log("QC",'CQ','QQ');    // Interpolated 字符替换    console.log("love %s",'gg');    console.log('love %d', 8023.8023);    console.log('love %f', 8023.8023);    console.log('love %o',[{name:'gg','action':8023}]);    console.log('%clove','color: #00fdff; font-size: 2em;');        // Styled设定输出的样式    console.log('%clove','color: #00fdff; font-size: 2em;',"GG%d",8023);    // warning!    console.warn("这是一个警告！");    // Error :|    console.error("这是一个错误");    // Info    console.info('我都不知道我是谁');    // Testing    console.assert(1 ===1,'(这句发布时删除)');    console.assert(1 ===0,'(这句发布时删除,删除失败了)');    console.assert(0 ===0,'(这句发布时删除)');    console.assert(0 ===1,'(这句发布时删除,删除失败了)');    // clearing 清除    console.clear();    // Viewing DOM Elements 打印输出 DOM 元素    var p = document.querySelector('p');    console.log(p);    console.dir(p); //DOM的属性列表    // Grouping together    console.table(dogs);    console.table(dogs,['age']);    dogs.forEach(function(dog){      console.group(); //展开列表 --起点      // console.groupCollapsed(); //收起列表      console.log(`${dog.name}`);      console.log(`${dog.age}`);      console.log(`${dog.name} 有 ${dog.age} 岁了`);      console.groupEnd(); //展开列表 --终点    })    // counting 计数    console.count();    console.count("（读来过反）羊只");    console.count("（读来过反）羊只");    console.count("（读来过反）鱼条");    console.count("（读来过反）羊只");    console.count("（读来过反）羊只");    console.count("（读来过反）鱼条");    console.count("（读来过反）鱼条");    console.count("（读来过反）羊只");    // timing  计时    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);    });    console.timeEnd("fetch my data");