事實上先去讀懂錯誤訊息表達的意思，並思考自己寫的邏輯發生甚麼事情，最後才是搭配 console 在驗證你的猜測， console 來 console 去的先後順序沒有那麼前面。而且其實一堆 console 超沒效率 (嘆氣)，尤其當你要等 loading 接近 10 秒，只有超級無奈能形容。

自己覺得很挫折，不過挫折的其實還不只這一項。好好地面對自己的問題，然後冷靜找原因，解決他。重點是怎麼在這麼爛當中，尋求進步，變得不那麼爛。

對於自己還是超容易緊張，越緊張就越容易犯錯等等的狀況，還是需要好好的改進。首先，不那麼緊張的第一步，就是知道碰到這樣的狀況我可以怎麼做 ? 在寫 code 之前還有很多工作是可以先做確定的。

Chrome 除錯環境介紹

教你如何選取元素，並觀察 HTML、CSS 當前狀態

右鍵 => 檢查 => 看元素 html, css (可以試著 copy 他的樣式)

這邊是指在 css 檔案的第幾行位置

調整除錯介面以符合螢幕解析度

rwd 時，會將開發人員工具放在右邊的位置。

這個功能還滿常用的。最初知道有他的存在，會覺得不用特別的調整螢幕配置的比例，也沒有多在意他到底存在於那裡。後來發現，大錯特錯。螢幕分享的過程，切來切去會造成彼此眼睛的疲勞。

配置好你的網頁、呈現錯誤訊息的開發工具，是很重要的。

檢視響應式網頁除錯心法

點選打開 rwd 模式，再點就回到網頁模式。

教你如何下載網頁資訊

檢視他的網址 + 下載圖片，有哪些做法

如何搜尋想要 debug 的 HTML、CSS 位置

(1) 右鍵，檢查
(2) 點 html 介面 => 搜尋熱鍵：mac 是 cmd + f ；windows 是 ctrl + f。不單純只有搜尋字串，可以找到它裡面更多的東西。
(3) 找比較聚焦的 css => 用 style filter 找尋我想要找的 css 設定
(4) 被劃線的 css 表示被覆蓋掉了，因為他的權重比較低。所以我可以知道他 margin 的值吃到的是哪個 css 檔案的第幾行。

computed 計算樣式，可以知道盒模型的狀態。可以利用 style 與 computed 的 class 標籤去知道他最終指定的樣式是那些內容。這樣就可以避免網頁內容越多，要去修改裡面對應的設定。

使用 chrome dev tools 撰寫前端程式碼

滑鼠按住不放，可以將對應的 html 拖曳到正確的位置去。先在 vsCode 寫基本樣式，在 chrome 微調，確認效果沒有問題，在貼到 vsCode 上。

偵測事件狀態樣式

1. hover 滑過去
2. active 點住不放
3. focus 表單文字欄位
4. visited 造訪這個連結，造訪過後的樣式

調整 CSS3 transition 速率

transition 不寫，效果會是瞬間的

輕鬆瀏覽 CSS3 Animation 效果

1. keyframe 直接調整
2. 切換視窗 show console => animation => 透過拖曳，慢動作瀏覽呈現的效果。或按上方 10% 調整速度。透過慢動作重播、定格，去查詢這些效果是否為我要的動畫效果。

JavaScript 與效能調校

從 network 了解網頁資訊

network => crtl + r 重新整理

總個下載幾個檔案，他載入時間、dom loaded 的時間。網站大小超過 3 - 4 M，就太大了，看是那個太耗能去做壓縮。

可以篩選我要的類型，然後按欄位做排序

可以透過這樣的操作，知道要對哪個類型的檔案去做瘦身。

利用 Console 執行與維護 JavaScript

• console (主控台)，紅字可以檢視第幾行出錯
• 可以直接在上面寫 js，確認效果沒問題再貼到 vsCode
• console.table(陣列)

• console.time() 紀錄時間。複雜 js 到底跑了多久。
• conosle.timeEnd()

載入 setTimeout 也需要一點點時間，所以不是只有三秒

如何線上除錯 JavaScript (Event篇)

方法一、點選 html 然後找 eventListener 檢查他綁了那些事件

方法二、source 區塊裡面的 event Listener break point
甚麼事件發生時，我下個中斷點。舉例，有些時候在點擊，想監聽一些變數。

如何線上除錯 JavaScript (斷點篇)

想在特定行數追蹤目前變數的狀態

斷點會斷在標記的那行，可以看到前面的狀態長甚麼樣子。斷點的那行不會執行，他只會讓你去檢視前面的 code 有無問題。

下面黃色按鈕表示他會去執行下一個執行斷點的地方，如果之後都沒斷點他就會跑完全部。

• 可以在 watch 寫變數去監測
• step over function call: 進入下一個 function 你執行的內容。如果想看每個 function 更詳細的步驟，可以用這個
• step in/ out function
• 關閉所有斷點
• 如果有奇怪情況，可以自行設定斷點內容
• ASYNC 非同步的時候啟用
  
  ## 使用 Timeline、Profile 了解網頁效能
  

fps 數值是 60 表示，1 秒跑 60 張圖片。所以如果 fps 是 50 ~ 60，代表網頁效能是比較好的，他渲染上是比較順的。

可以用滑鼠滾輪拖曳，或是拉動。看他的時間。

處理 js 事件、渲染、重新繪製、其他、閒置空白的時間。

可以用 timeline 瀏覽他所佔的效能損失。

也可以透過 profile 去看他的報表資訊顯示的內容

透過這些功能去檢測，哪個 js 裡面花的功能比較久。可以透過這樣去知道可以從哪邊著手，提升網頁的效能。

實用插件與資源補充

• webserver for chrome

參考資料：

1. chrome 官方文件
2. code school => discover dev-tool

JavaScript 進階除錯篇

下斷點 ( Breakpoint ) 進行 JS 除錯

每次都下 console log 去印，非常不效率，就算是用陣列儲存我要印的東西，還是不太好。

在 source 可以看中間程式碼之前的變數，他繼承了哪些東西。

事件監聽 ( EventListener ) 偵測

到底綁定那些事件進行除錯。

element 除了 css 樣式，還有事件監聽，去查詢這個東西有沒有綁定一些 js 效果。

做 event 事件，可以在 source 下中斷點。點擊，就會觸發 function 裡面的內容。

如果想看變數他不論何時何地的狀態，可以在右邊按 watch，他會幫你檢視變數、函式、監聽的狀態，透過 watch 可以看到當下的狀態。

斷點放在這邊表示還沒執行這行，可以看到前面執行的結果。

DOM Breakpoints 偵測 DOM 結構狀態

偵測東西是 html 標籤上狀態的變更時，該怎麼做 ?

html 右鍵，會發現可以下斷點的方式

屬性編輯

可以透過這個 btn 看到目前這個 btn 的狀態

子元素編輯 substree modifications

先確定有沒有綁定監聽事件成功。

裡面的子元素有做新增、編輯、刪除，都會觸發

裡面內容變更，要去調查是哪個事件、function 處理的。

node remove 節點本身被刪除掉了

當 html 標籤用 js 撰寫動畫效果時，可以用 break on 的方式做各種查詢。

JS 任務流進階控制事項 (上)

按這個就會到下個斷點去，針對下的斷點做移動

f10：step over next function call => 會在斷點停下，如果想看斷點之後的行數，可以使用這個熱鍵進行瀏覽。

行內斷點，可以幫助看出 function 執行前後的效果

除錯：pause on exceptions，幫你做暫停的動作。有各種 js 錯誤可以幫你做 debug

JS 任務流進階控制事項 (下)

希望可以來到 function 裡面，看完裡面狀態再進入到下一行。追蹤這個 function 到底跑去哪裡。

不想在 function 內跑，想跳到外面。跳出來，跳到下個斷點去。

把所有斷點都先隱藏起來，等到真的要除錯再依照下的斷點除錯。目的是開發上的除錯切換。

從 Call Stack 追蹤函數程式

1. watch 可以偵測每個變數的狀態
2. call stack 查詢 function 所在的位置：可以檢視函數設計的任務流

最底層是從哪邊開始、用了哪些 method，用這樣的方式進行除錯
(底下有 prettier)

AJAX / XHR 斷點偵測

今天如果希望取得 xhr 相關資料可以下一些斷點，可以怎麼做 ?

1. url 有 kcg => 他幫我下中斷點
2. 如果想知道他回傳回來，可以在 onload 下中斷點。因為觸發 onload 代表資料回傳，所以再看到 xhr 就可以看到他帶資料回來了

可以加入關鍵字或按 enter 他會當作空白也就是 any xhr

想看其他人使用那些 ajax、api 也可以用 xhr 斷點去查詢他戳的 api。

資料來源：Chrome 網頁除錯功能大解密
https://developers.google.com/web/updates/2016/12/devtools-javascript-cpu-profile-migration