事實上先去讀懂錯誤訊息表達的意思，並思考自己寫的邏輯發生甚麼事情，最後才是搭配 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 上。
偵測事件狀態樣式
- hover 滑過去
- active 點住不放
- focus 表單文字欄位
- visited 造訪這個連結，造訪過後的樣式
調整 CSS3 transition 速率
transition 不寫，效果會是瞬間的
輕鬆瀏覽 CSS3 Animation 效果
- keyframe 直接調整
- 切換視窗 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
參考資料：
- chrome 官方文件
- 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 追蹤函數程式
- watch 可以偵測每個變數的狀態
- call stack 查詢 function 所在的位置：可以檢視函數設計的任務流
最底層是從哪邊開始、用了哪些 method，用這樣的方式進行除錯
(底下有 prettier)
AJAX / XHR 斷點偵測
今天如果希望取得 xhr 相關資料可以下一些斷點，可以怎麼做 ?
- url 有 kcg => 他幫我下中斷點
- 如果想知道他回傳回來，可以在 onload 下中斷點。因為觸發 onload 代表資料回傳，所以再看到 xhr 就可以看到他帶資料回來了
可以加入關鍵字或按 enter 他會當作空白也就是 any xhr
想看其他人使用那些 ajax、api 也可以用 xhr 斷點去查詢他戳的 api。
資料來源：Chrome 網頁除錯功能大解密
https://developers.google.com/web/updates/2016/12/devtools-javascript-cpu-profile-migration
