最近在修改 RFQ 重構系統的首頁時，遇到一個讓我卡了好一陣子的問題：右上角使用者資訊的頭像按鈕，在部分頁面完全失效。點擊後不會跳出使用者資訊彈窗，整個看起來就像壞掉了一樣。
這次排錯的過程剛好涵蓋了前端工程常見的兩大地雷：
- JavaScript 事件衝突
- CSS 樣式覆蓋
因此特別記錄下來，未來遇到類似狀況也能快速判斷與修復。
第一個明顯的問題是：點擊右上角頭像完全沒有動作。照理說應該要展開使用者資訊視窗，但畫面毫無反應。於是我打開了 F12（開發者工具）開始觀察事件是否有報錯。
結果在 Console 並沒有看到明顯的錯誤，但點擊事件確實沒有被觸發，這代表：👉 JS 事件可能被其他 script 接管、覆蓋、或中斷了。最後我找到罪魁禍首：某段引用的 JavaScript 會干擾Bootstrap 彈出視窗的處理。只要把那段有衝突的 JS 註解掉，功能立刻恢復正常。這也提醒我：
元件失效時，先檢查它依賴哪些 JS。如果其中一支 Script 版本不同、重複載入、或功能相互覆蓋，就有可能導致事件沒反應。
解決方法就是註解掉會影響的js，把底下黃色這段註解掉就恢復正常了。以後遇到類似問題可能會先去看這個元件的刑為，是參考哪一個js，如果失效可能是因為js互相衝突。
問題二：視窗跑版？檢查 CSS 是否被覆蓋
解決完點擊事件後，彈窗是出現了，但又跑出了第二個問題：👉 視窗樣式變形，寬度完全不對。推測應該是 CSS 被其他樣式蓋掉。果然在 Elements → Styles 面板一看，某些全域 CSS 把我原本設計好的寬度覆蓋掉了。
這是前端開發很常見的一件事：
- CSS 越後面載入 → 優先度越高
- 全域 CSS → 通常優先度更高
- 當頁面切換、載入不同模組 → 其他頁面的 CSS 可能意外蓋掉你的樣式
要避免這種情況，有兩種解法：
- 調整 CSS 載入順序
- 讓 CSS 僅作用在需要的範圍
最後我選擇了第二種：
把 userinfo.css 從全域的 App.razor 裡移除，改成只放在 NavTopMenu.razor.cs 裡。
這樣做的好處是很明確的：
✔ 不會再被其他頁面的 CSS 汙染
✔ 樣式只作用在元件內
✔ 避免日後新增頁面造成連動破壞
可以說是更乾淨、也更安全的做法。
這次修正學到的事
這次的排錯讓我重新體會到：
- 排查 JS 問題時要檢查事件是否被攔截或覆蓋
- 排查 CSS 問題時要從優先度、作用範圍、來源順序入手
- 開發者工具（F12）真的是排錯的第一好朋友
每次處理這類問題，雖然有點花時間，但能讓自己越來越熟悉系統，也越來越有能力快速定位問題。
我期許自己在處理事情的流程、分析問題的速度，以及解決問題的準確度上，都能持續提升，成為一位能真正「帶來解決方案」的工程師。
最後的小分享
最近也在思考：「為什麼有些人可以拿到很高的報酬？」答案不外乎是：