Day 23 - 开发人员工具的日常

前言

今天再来聊聊另一个重要的工具，是很多人刚开始学 Javascript 就一路接触到现在，如果没有这个工具，大家的工时可能至少要拉长一个小时(?)

我们来聊聊很熟却不是那麽熟的 - 开发人员工具！

网页开发人员工具

我想。。。这个主题大家都熟到不能再熟了，所以我直接挑几个自己常用的工具，跟大家分享：

页签 Elements

把 style 改到对再贴回编辑器

可以直接操作 DOM 元素的 style，而且立马看到操作後的结果，确定正确之後再把修改贴回编辑器，对於需要调整版面、美观、对齐等，都是大幅提升效率的做法：

页签 Console

小心印出物件的陷阱

好啦 console.log 大家都比邻居还熟了，是个充满安心感的语法，只要它登场，问题通常很快可以解决，然後我们要记得砍了它XD

这边只是强调一个不太直觉的小重点，往往会让新手感到困惑，下面这段范例：

const person = {
    name: 'Joey',
    salary: 30000
};
console.log(person);
person.salary += 1000;
console.log(person);

看起来满正常的，当它印出来的时候：

但是当你想要展开这个物件，看更详细的时候：

老师！我抓到浏览器的 bug 了！我是不是可以去 Google 工作了！？

先不要急~~着投履历~~，虽然第一个 console 感觉应该要显示 30000，但让我们先来看看它後面那个蓝色的 i 提示，把滑鼠移上去会显示：

This value was evaluated upon first expanding. It may have changed since then.

简单来说，它会在你第一次将这个物件展开的那一刻，才去取得这个物件目前的值。

而这一点是针对那些 non-primitive 的物件们，所以 Array、Object、Date 之类的物件都会有类似的状况；反之，string、number、boolean 就不会，毕竟也没有地方让你展开就是了。

知道这点後就能了解，是因为程序已经执行完(salary 变成 31000)，我们才用滑鼠展开物件，因此在点击下去的那一刻，物件已经是更新後的状态了！

解决方案

要嘛，你很确定这个物件从 console.log 的那一行，到程序结束，到被你的滑鼠点开，这段过程都没有修改过物件，那就可以用。
要嘛，只取你真正想看的 property 来印，比如这样：

const person = {
    name: 'Joey',
    salary: 30000
};
console.log(person.salary);
person.salary += 1000;
console.log(person.salary);

执行结果

30000
31000

最终大绝，既然是因为我之後的修改造成的，那有没有方法可以让物件永远停留在 console.log 的那一刻：

const person = {
    name: 'Joey',
    salary: 30000
};
console.log(JSON.parse(JSON.stringify(person)));
person.salary += 1000;
console.log(JSON.parse(JSON.stringify(person)));

执行结果

这个方法是从 MDN 来的，显然，这个方法几乎 100% 可以达成目的，但不仅不好阅读，记得我们在 Day 4 讨论过的，背後付出的效能也相当庞大，所以尽量用上面两种方法吧！

印出显眼的 log

这点就见仁见智，通常我要印多个 log，尤其还加上回圈的时候，偶尔会忘记到底哪个是哪个，比如我想要计算商品打折後的价钱，并且跟原价放在一起对比：

const arr = [
    { name: 'laptop', price: 30000, discount: 0.7 },
    { name: 'TV', price: 12000, discount: 0.8 },
    { name: 'washing machine', price: 8000, discount: 0.85 },
];

arr.forEach(item => {
    console.log(item.price);
    console.log(item.price * item.discount);
});

执行结果

痾。。。所以 9600 到底是谁的价钱？是打折後的吗？

另外还有在後端环境(比如 Node js) 要 log，往往会有很多其他的 log (比如 api call log) 混杂其中，这时候要找你的刚写的 log 也是一大挑战。

这边比较难 demo 出那种感觉，但我相信，如果你有在 log 视窗滚动滑鼠超过 3 秒，还是找不到自己的 log，那应该就知道我在说什麽！

Log 毕竟是给自己看的，所以不要客气，详细一点、租暴显眼一点：

const arr = [
    { name: 'laptop', price: 30000, discount: 0.7 },
    { name: 'TV', price: 12000, discount: 0.8 },
    { name: 'washing machine', price: 8000, discount: 0.85 },
];

arr.forEach((item, index) => {
    console.log(`====== ${index} ======`);
    console.log('name', item.name);
    console.log('price', item.price);
    console.log('discountedPrice', item.price * item.discount);
});

执行结果

====== 0 ======
name laptop
price 30000
discountedPrice 21000
====== 1 ======
name TV
price 12000
discountedPrice 9600
====== 2 ======
name washing machine
price 8000
discountedPrice 6800

啊我把 log 打那麽详细的时间，直接拿来找 log 还比较快！

当然啦，对於很简单的 bug 的确不用这麽费力，但是当程序反覆修改都找不到 bug 时，一段美丽的 console.log 才能够让你保持不至於崩坏的心情((逃

测试语法

这个大部分人都了解的，可以直接把上面任何一段 code 复制贴到 console 里面执行，它内部就有个 Javascript 引擎可以执行。

我经常在忘记 substr 与 substring 的差别，或者 regex 跑出来到底是不是我要的，这时候就可以写个很简单的测试程序上去，立马得到结果：

console.log('apple'.substr(1, 3));
console.log('apple'.substring(1, 3));

执行结果

ppl
pp

页签 Sources

中断点(Break Point)

相较於 console.log 把过程中的变数印出来，使用中断点则更厉害了，可以做到把网页画面一格一格呈现的效果！

比如一个会印出平方表到画面上的程序：

let html = "";
for (let i = 1; i <= 5; i++) {
    html += "<span>" + i + "的平方是" + (i * i) + "</span>";
    document.querySelector("#center").innerHTML = html;
}

每次重新整理都是唰一声就五笔都跑出来，如果想要看「分解动作」，可以在回圈结束的时候，放上一个 debugger：

let html = "";
for (let i = 1; i <= 5; i++) {
    html += `<span>${i}的平方是${(i * i)}</span>`;
    document.querySelector("#center").innerHTML = html;
    debugger;
}

然後在打开开发人员工具的情况下，重新整理：