一些加速我除蟲的 Devtool 小技巧

5 min readApr 17, 2022

前陣子一直斷斷續續地讀，直到最近終於把你所不知道的必學前端Debug技巧給讀完了。作為前端，我原本是一個不怎麼會有效率地使用 Devtool 的人，這本書讓我對它有了更進一步的了解，也將許多書中提及的技巧運用在了工作上，而它們也確實大幅提升了我除蟲及開發的效率，透過這篇文和大家分享一些非常簡單易用的小技巧。

$0

我們在畫面上抓取元素時，通常會使用 Elements 的 Inspect 功能：

如果需要切換到 Console 透過 JS 對元素進行操作時，以往我可能會下 querySelector 去取得：

document.querySelector('.col:first-child .card')

然而，其實在 Inspect 到元素時，就能在 Console 直接透過 $0 取得該元素：

Force state

在開發時，我們可能會透過虛擬類別（pseudo class）讓元素在特殊狀態下呈現不同的樣式。例如：

<style>
  .my-button {
    background-color: blue;
    color: #fff;
  }
  .my-button:hover {
    background-color: navy;
  }
</style><button class="my-button">Hover Me!</button>

以往我會直接到 CSS 裡改，並確認是否調整為預期的樣式（你沒看錯，以往我是這樣做的…），而在 Elements 中其實可以對元素進行 Force state，例如：

選擇 Force state > :hover 後，就能看到元素 hover 後的樣式：

便可直接在 devtool 對其進行調整及測試。

console.table

以往需要在 console 輸出 array of objects 的資料時，我可能會使用 console.log：

console.log(myArray);

這樣在 console 上跑出的會是一個需要我們手動去展開的資料：

一個個去展開他們自然沒什麼問題。但如果使用 console.table：

就會發現它很貼心地都幫我們把資料整理好了！

Breakpoint

以往針對 JS 除蟲時，我最常使用的是「將疑似有問題的資料一一 log 出來」，這會導致除蟲時的效率低落。在 Source 面板中，有一個非常好用的功能：斷點。

白話地講，當我們對特定一行程式碼下斷點後，瀏覽器在執行到該行時會直接暫停，讓我們能快速還原事發現場。下面是一段有問題的程式碼：

let filteredData = [];
fetch("https://jsonplaceholder.typicode.com/posts")
 .then((res) => {
  return res.json();
    })
  .then((data) => {
    filteredData = data.filter((item) => item.user.id === 1);
  });