Day 9 - 14 Must Know Dev Tools Tricks

前言

JS 30 是由加拿大的全端工程师 Wes Bos 免费提供的 JavaScript 简单应用课程，课程主打 No Frameworks、No Compilers、No Libraries、No Boilerplate 在30天的30部教学影片里，建立30个JavaScript的有趣小东西。

另外，Wes Bos 也很无私地在 Github 上公开了所有 JS 30 课程的程序码，有兴趣的话可以去 fork 或下载。

本日目标

学会使用一些操作 console 的 JS 方法。

在网页元素上设置断点

在下面的例子中，只要我们点击文字，文字就会变大并且颜色变为绿色。

现在假设我们知道这个效果是经由 JS 之手做出来，但不知道实际上是 JS 的哪一部分发挥功能。这个时候，我们可以利用网页的检查功能来设定 JS 执行时的 break point，让它在触发效果的那一行 JS 程序码停下来。

首先打开网页的检查功能，将要查看变化的元素标签选起来并按右键选择 break on -> attribute modification。

接着点击文字，会发现文字的颜色改变，但文字大小却没有改变。

这是因为我们在这个元素标签上设定了一个只要属性值改变就触发的断点，所以执行到 JS 的 p.style.color = '#BADA55'; 修改到标签属性就停止继续往下执行下一行 JS。

如果想要继续执行下一行 JS，只要按图片中的蓝色播放钮，它就会跳到下一行继续执行，同时也可以发现文字变大。

总而言之，在元素标签上设定断点是 debug 的一个好方法，我们可以逐步观察程序码的执行过程并快速找出问题点。

一些有关 console 的 JS 方法

1. console.log()

Regular: 直接输出字串到 console 上。

Interpolated: 格式化输出字串到 console 上，类似 Java 的 printf 方法。

Styled: 在输出字串到 console 的同时，用指定的 CSS 修饰字串。

// Regular
console.log('Hello World')

// Interpolated
console.log('I am very interested in %s animation.','Japanese');

// Styled
console.log('%c I am very interested in Japanese animation.','font-weight: bold;background: skyblue;color:white;font-size:20px;');

2. console.warn()

呼叫console.warn()在 console 输出警告讯息。

// warning!
console.warn('Something is wrong!');

3. console.error()

呼叫console.error()在 console 输出错误讯息。

// Error
console.error('There is a fatal error!');

4. console.info()

呼叫console.info()在 console 输出提示讯息。

// Info
console.info('info message');

5. console.assert()

呼叫console.assert()时，若前方的判断结果回传 false 则印出後方字串到 console 上。

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

6. console.clear()

呼叫console.clear()清空 console 的内容。

// clearing
console.clear();

7. console.dir()

呼叫console.log(DOM Element)输出该元素标签到 console 上。

呼叫console.dir(DOM Element)以 JSON 格式将该元素的 property 全部输出到 console 上。

不过我在 console 看到的结果是相同的。

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

8. console.group()/groupEnd()

呼叫console.group(label);进行分组、console.groupEnd(label);结束分组。

label: 组别名称

如果初始呼叫的是console.groupCollapsed(label)，则会预设以摺叠方式呈现。

// Grouping together
dogs.forEach(dog => {
    //console.groupCollapsed(`${dog.name}`);
    console.group(`${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} years old.`);
    console.groupEnd(`${dog.name}`);
})

• 呼叫console.group(label)

• 呼叫console.groupCollapsed(label)

9. console.count()

呼叫console.count(label);可以得到 label 出现过的次数。

// counting
console.count('Saber');
console.count('Saber');
console.count('Saber');
console.count('Miku');
console.count('Saber');
console.count('Miku');

10. console.time()/timeEnd()

呼叫console.time()/timeEnd()可以取得执行到某一行 JS 经过的时间。

// 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 API reference