昨天還在處理 API 出錯。

今天本來想繼續寫功能，

結果畫面又沒反應。

第一個念頭：

JavaScript 又壞了是不是？？？

第二個念頭：

重新整理。

第三個念頭：

再重新整理一次。

……

好。

看來 F5 不是萬靈丹 ==

所以今天決定先不要亂猜，

直接把平常很常開、但其實沒有每個功能都認真看過的東西叫出來——

Chrome DevTools！

F12：來，大家把問題攤開來講

Chrome 可以直接按：

F12

或：

Ctrl + Shift + I

打開 DevTools。

裡面分成很多區塊。

今天先挑幾個我比較常用的：

• Elements
• Console
• Network
• Application

不要一次全部研究。

不然本來只是想找 Bug，

最後變成在 DevTools 裡迷路 XD

Console：到底哪裡爆掉了？

這個應該是最熟悉的。

例如 JavaScript 寫錯：

console.log(catName);

但根本沒有宣告 catName。

Console 就會直接出現：

ReferenceError

很好。

至少它有講。

總比畫面完全沒反應，

然後我跟程式碼互瞪十分鐘好 XD

平常自己想確認資料，也很常：

console.log(data);

所以 Console 對我來說大概就是：

JavaScript 告解室。

有什麼問題都先來這裡講。

Elements：你現在到底長怎樣？

如果今天畫面怪怪的，

例如：

我明明有加 class，為什麼樣式沒變？？？

可以到 Elements 看實際 HTML。

例如原本：

<h1 id="title">哈納今天上班！</h1>

JavaScript 執行後：

title.classList.add("active");

就可以直接在 Elements 裡確認：

<h1 id="title" class="active">

如果 class 根本沒出現，

那可能是 JavaScript 沒有成功執行。

如果 class 有出現，但畫面還是不對，

再去看 CSS。

至少不用靠通靈。

Network：API 到底有沒有出去？？？

前幾天一直在寫：

fetch()

這時候 Network 就很好用。

重新整理頁面後，

可以看到送出去的 Request。

例如：

GET /users/1

再點進去，

可以看到：

• Request URL
• Status Code
• Response
• Headers
• 花了多久時間

假設看到：

200

代表請求成功。

如果：

404

那可能是網址或資源不存在。

如果：

500

……

這次可能真的不是我的鍋了 XD

至少看到 Status Code 之後，

比較知道要往哪裡找問題。

Application：昨天的 LocalStorage 躲在這裡！

前幾天才剛把哈納塞進：

localStorage.setItem("catName", "哈納");

那到底存去哪了？

DevTools 裡的：

Application
→ Local Storage

就可以直接看到：

catName    哈納

欸！

哈納真的住在裡面！！！

不是 JavaScript 騙我的 XD

也可以直接確認資料到底有沒有成功存進去。

這比一直：

console.log(localStorage.getItem("catName"));

方便不少。

今天最大的改變：不要先亂改

以前畫面壞掉時很容易開始：

改 CSS
↓
F5
↓
還是不行
↓
改 JavaScript
↓
F5
↓
更壞

最後已經忘記自己一開始到底要修什麼。

現在至少可以先看一下：

Console 有沒有錯？

HTML 有沒有真的改？

API Request 有沒有出去？

LocalStorage 有沒有存到？

先找到問題在哪一區，

再開始改。

不然每次都像：

家裡停電，結果我先跑去修水管。

忙半天完全沒有關係 XD

今天先記這四個

其實 DevTools 還有很多東西。

但今天先不要貪心。

至少下一次畫面沒有反應時，

不要再只會：

F5、F5、F5、F5……

瀏覽器都快被我重新整理到懷疑人生了 ==

先開 DevTools。

抓到兇手再說。

Day 25，完成！