第九天挑战(调试技巧)

地址：javascript30.com/

所有内容均上传至gitee，答案不唯一，仅代表本人思路

中文详解：github.com/soyaine/Jav…

该详解是Soyaine及其团队整理编撰的，是对源代码的详解，强烈推荐大家观看学习!!!!!!!

本人gitee：gitee.com/thats-all-r…

本期内容均为控制台调试技巧，无效果演示

官方代码

官方代码仅代表该案例原作者思路，不唯一

逻辑

<p onClick="makeGreen()">×BREAK×DOWN×</p>

<script>
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('hello');

// Interpolated
console.log('Hello I am a %s string!', '💩');

// Styled
// console.log('%c I am some great text', 'font-size:50px; background:red; text-shadow: 10px 10px 0 blue')

// warning!
console.warn('OH NOOO');

// Error :|
console.error('Shit!');

// Info
console.info('Crocodiles eat 3-4 people per year');

// Testing
const p = document.querySelector('p');

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

// clearing
console.clear();

// Viewing DOM Elements
console.log(p);
console.dir(p);

console.clear();

// Grouping together
dogs.forEach(dog => {
  console.groupCollapsed(`${dog.name}`);
  console.log(`This is ${dog.name}`);
  console.log(`${dog.name} is ${dog.age} years old`);
  console.log(`${dog.name} is ${dog.age * 7} dog years old`);
  console.groupEnd(`${dog.name}`);
});

// counting

console.count('Wes');
console.count('Wes');
console.count('Steve');
console.count('Steve');
console.count('Wes');
console.count('Steve');
console.count('Wes');
console.count('Steve');
console.count('Steve');
console.count('Steve');
console.count('Steve');
console.count('Steve');

// timing
console.time('fetching data');
fetch('https://api.github.com/users/wesbos')
.then(data => data.json())
.then(data => {
  console.timeEnd('fetching data');
  console.log(data);
});

console.table(dogs);

分析

转载于Soyanie

给页面标签添加断点

在按 F12 出现的 Chrome 开发工具中，在 Elements 选项卡之中，选择页面的某个标签（以 <p>为例），右键 → Break on → Attributes modifications。即可为该元素添加断点，当它的属性发生改变时，会自动定位到页面代码中的对应行。

你如此设置之后，点击页面中的文字试一试效果。

`.log` 的更多用法

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

%s 字符串
%d 整数
%f 浮点值
%o Object
%c 设定输出的样式，在之后的文字将按照第二个参数里的值进行显示

console.log("输出一个字符串 %s ", "log");
console.log("输出一个整数是 %d ", 1.23); //1
console.log("输出一个小数是 %f ", 1.23); //1.23
console.log("%c不同样式的输出效果", "color: #00fdff; font-size: 2em;");

不同样式的输出

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

// warning!
console.warn("三角感叹号图标，淡黄色背景")
// Error :|
console.error("红叉图标，红字红色背景");
// Info
console.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 中的名称如果和上面不一样，得到的数据是系统当前时间换算后的毫秒值。

30天JS挑战(第九天)