Norman's Note 諾曼筆記

Norman's Note 諾曼筆記

遇到錯誤的策略 Bug Fixing Strategy (debug)

也可能是其他套件的錯誤,例如 storybook

可以 try and error 拆掉試試看

跟按鍵有關的可以試試看 preventDefault 和 propagation 的影響

如果遇到奇怪的事,還有一個測試方法:就是用不同的 browser 看行為是否一樣

可能是自己的錯、語言特性、framework bug,但也有可能是每個 browser 實作不同的行為。例如:在 React 中就遇到,如果用 ref 去控制 focus 會重複觸發 onFocusonBlur 的情況,但在 Firefox 卻不會,只有在 Chrome, Safari 有這個現象。

如果想知道特定 function 哪裡出錯

可以在 code 的前後各 console.log 一次,可能有不預期的結果。如果只印最後,資訊比較少可以判斷。如果有條件 if 的地方,也要懷疑是不是跟自己想的一樣。

console.table

for better overall looking

1. 開 DevTools 觀察錯誤訊息

  • (1) 貼錯誤訊息進 Google 搜尋

  • (2) 如果是套件報錯,也可以搜尋套件的 source code,看什麼情況會跳錯誤

  • How to Use Web Inspector to Debug Mobile Safari (iPhone or iPad)
    https://appletoolbox.com/use-web-inspector-debug-mobile-safari/

  • 這個 reset 的步驟蠻重要的,有時候 develop menu 看不到手機都是在 reset 後看到進清單
    Reset your location and privacy settings on your iPhone, iPad, or iPod touch. Go to Settings > General > Reset > Reset Location & Privacy

2. Try and Error:快速建一個環境,把不相干的程式移除,來單純化、研究特定問題

使用以下網址,你可以快速建 Code Sandbox 環境

3. 用 VSCode 的中斷點功能,一行一行找問題

4. 提問的智慧 - 那些可以問得更好的程式問題

https://medium.com/@hulitw/ask-better-questions-19f01b02f436

那些年犯過的錯誤

  • for 迴圈裡面 return 想要試圖 skip 掉某次的迴圈

相關

JavaScript 錯誤訊息