Udemy課程：[Chrome 網頁除錯功能大解密](https://www.udemy.com/course/chrome-devtools/learn/lecture/5401526#overview)
# Chrome 網頁除錯功能大解密
###### tags: `Udemy` `六角`
2021.07.04（Sun.）～07.0（.）
****
## <font color="#d45b53">第 1 節： Chrome 除錯環境介紹</font>
### ● 簡單開啟chrome dev tool網頁除錯工具
提供3種方法：
1. 按`F12`
2. Chrome右上角`自訂及管理Google Chrome` ->`更多工具` -> `開發者工具`

3. 在網頁上按下滑鼠右鍵 -> 檢查

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

1. CSS的所在路徑，也就是CSS被放在哪裡
2. `twhk_deskto,,,.0.30.css:1`最後方的css:1表示這串css在此css檔中的第一行

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

1. 點擊後：
dock side：可調整除錯工具的位置

### ● 檢視響應式網頁除錯心法

1. 點擊後，可以調整視窗大小，模擬不同裝置上網頁的樣子

### ● 如何下載網頁資訊
* 取得網頁上的圖片：
在圖片上點擊右鍵，可以選擇「另存圖片」或者「複製圖片網址」
****
## <font color="#d45b53">第 2 節： HTML、CSS 除錯教學</font>
### ● 如何搜尋想要 debug 的 HTML、CSS 位置
1. HTML部分：利用搜尋熱鍵「`ctrl`+`F`」
2. CSS部分：利用上方的「`filter`」搜尋欄位中搜尋

3. computed：可以看說現在設置的CSS樣式，目前是套用到哪個值

### ● 偵測事件狀態樣式
1. 點擊`:hov`

2. 可勾選想偵測的事件

### ● 利用Chrome dev tool 去調整 CSS3 transition 速率
> 示範：[codepen](https://codepen.io/liao/full/PzZdob/)
1. 點擊那個很像Tangent的符號

2. 跑出曲線後可以調整自己想要的速率

### ● 輕鬆瀏覽 CSS3 Animation 效果
> 示範：[codepen](https://codepen.io/liao/full/ZOQMEj)

1. 點擊後：選擇`show console drawer`

2. 點選`Animation`
3. 若找不到`Animation`，可以點擊尋找

4. 點擊這個進度條（若沒看到進度條可重整頁面）
5. 可選擇速度為100%（正常）、25%或10%

****

## <font color="#d45b53">第 3 節： JavaScript 與效能調校</font>
### ● 從 network 了解網頁資訊
1. 先點選`network`，如果沒跑出任何內容，按重整即可

2. `11requests`代表我進入google這個頁面需要下載11個檔案，可能就有png.檔案、css檔案或者JavaScript檔案

3. `15.2kb transferred`表示這些檔案共下載15.2kb的量，通常網頁超過3、4mb就有點太誇張了，所以有時候想說為甚麼網頁載入要那麼久？就可以來這裡看看是不是檔案太大了，然後看看到底是甚麼佔用最多量，需要我們去調整、壓縮

4. 檔案太多了，所以可以從這裡篩選檔案，點選任一個後，再去看右下角的requests數量，就可以知道這類型的檔案佔了多少

5. 那這裡以JS為主，如果想知道哪個檔案佔太大影響到網頁載入速率，就看`size`，按一下的話就會做排序

6. 如果想用不同頻寬去瀏覽，點選這個下拉式選單，然後去看說不同頻寬去載入畫面需要多久的時間

### ● 利用 Console 執行與維護 JavaScript
1. console的位置

2. 可以直接在console寫JavaScript

3. 可以在console中計時程式跑了多久，這裡有個範例：（這個範例在console會顯示`time: 3005.04ms`。那為甚麼不是3秒整，是因為第一段`console.log('time')`以及跳到下一行等等小動作也是需要時間的）

console.log('time')
setTimeout(function(){
    console.timeEnd('time')
},3000)
//指過了3秒‵，才印出console.timeEnd('time')這段

### ● 如何線上除錯 JavaScript (Event篇)
1. 先點擊任一行HTML
2. 左方按下`Event Linteners`
3. 也可以從`sources`的右半部進行測試，並且在左邊的`watch`可以打上你想監聽的變數

### ● 如何線上除錯 JavaScript (斷點篇)
1. 我們可能會想看一下某一行時的變數是多少，這時候第一步驟：先點`sources`，第二步驟：再點一下旁邊的數字，最後第三步驟：看右半部的`Breakpoints`

2. 設了斷點，他程式會停止在斷點處不會執行，所以如果想執行下一步的話，按下這個撥放鍵，就會執行斷點處的程式

3. 這個按鍵是比較仔細的，他會進入某條程式的內容（可能是進入某個function或迴圈）。例如進入一個迴圈（如下），他會從`i++`跑，再按一次就會跑`i<5`，再按一次就跑`var i=1`

for (var i=1; i<5; i++){
    console.log(i);
}

### ● 使用 Timeline、Profile 了解網頁效能
> 示範：[codepen](https://codepen.io/liao/full/vKkgKB)
> 官方文件：[網站](https://developers.google.com/web/updates/2016/12/devtools-javascript-cpu-profile-migration)
1. 如果想要看我們的網頁效能，可以點進`Performance`

2. 接著按下左上角的`Record`

3. 按下後會跑出以下的畫面，也就開始計時、計算了

4. 這時我們就可以開始執行網頁上的畫面，直到執行完我們想測試的內容後，就可以按下`stop`

5. 按下`stop`之後，便會跑出以下畫面，也就是關於剛剛對網頁執行的動作

6. 解釋以下3名詞：
* FPS = n ：表示「1秒n張圖片」，通常維持在50~60，是最好的
* CPU ： 表示這個動作消耗了多少CPU的量
* NET ：

7. 在底下的`frame`放大縮小找一下，可以找到我們對網頁的動作所產生的事件。點擊橘色長條狀，在底下可以預覽他的細節

8. 再來是`main`，他在`frame`的上一個，點擊後底部會出現一個圓圈以及一些數值

9. 把底部放大來看看
* Scripting ： 看JS所執行的時間花了多少
* Rendering ： 代表接受到JS的訊息了，告知說現在要執行一個動畫效果，對樣式做一些計算，或者重新排版等等所花費的時間
* （Painting）：重新繪製的時間
* idle：處理空閒的時間，完全沒有做任何事情

10. 點擊`Bottom-Up`，可以看到有那些東西在影響CPU

****

## <font color="#d45b53">第 4 節： 實用插件與資源補充</font>
### ● 常用插件
> 上網搜尋：[chrome store](https://chrome.google.com/webstore/category/extensions)

1. [Dimensions](https://chrome.google.com/webstore/detail/dimensions/baocaagndhipibgklemoalmkljaimfdj?hl=zh-TW)
可以用來測量網頁上元素與元素之間的距離

2. [Pesticide for Chrome](https://chrome.google.com/webstore/detail/pesticide-for-chrome-with/neonnmencpneifkhlmhmfhfiklgjmloi?hl=zh-TW)
可以把所有網頁內容變成區塊元素跟行內元素

3. [Wappalyzer](https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg?hl=zh-TW)（好用）
可以用他來幫我們看看這個網頁用了哪些前端技術，或者是後端技術

* 要使用擴充功能的話，點擊右上角的拼圖即可看到有增加的擴充功能，點擊後即可使用

### ● Chrome Devtools 教學資源補充
> 官方文件：https://developer.chrome.com/docs/devtools/
> 中文文件：https://leeon.gitbooks.io/devtools/content/

****

## <font color="#d45b53">第 5 節： JavaScript 進階除錯篇</font>
### ● 事件監聽 ( EventListener ) 偵測
1. 兩個方法：
* `Elements` -> `Event Listener `：可以看該物件有綁定了哪些「事件」
* `Sources` -> 右半部：可以看到一些「變數」的狀態

### ● DOM Breakpoints 偵測 DOM 結構狀態
首先點擊要觀察的HTML，按下右鍵，點`Break on`：
1. 子元素有編輯的時候點擊1`subtree modifications`
2. 屬性有變更的時候點擊2`attribute modification`
3. 本身被移除的時候點擊3`node removal`

### ● 從 Call Stack 追蹤函數程式
1. Call Stack位於`Sources`底下的右半部，它可以幫你查詢function所在的位置，也會依照順序排列function，就能很清楚的看出整個程式設計的任務流。

2. 如果太亂，可以點及下圖按鍵，可以幫助我們對程式碼格式化

### ● AJAX XHR 斷點偵測
1. 如果今天網頁有寫到ajax的效果的話，可以透過`XHR Breakpoints`來偵測
2. 可按下`+`，搜尋關鍵字，也可以輸入空白，這樣一來，任何XHR事件都會被偵測