寫這個文章，是因為在今天早上，有兩個兄弟找我要原始碼。有圖有真相。
我震驚於都 9102年了，身為了一個正（xie）經（xin）前端er，還不會看控制檯？
chrome 開發者工具之 Sources
開啟我們的 Sources 選項看，我們可以看到如下結構。分為三塊功能，左（目錄）中（資源展示）右（斷點除錯）。
Sources 工具（左邊區域）
我們選中 page ，在這個裡面我們可以看到我們所有的資源以樹狀展示。
我們在對應的域名下 www.lilnong.top 下，找到 https://www.lilnong.top/static/html/svg-data-background-img-download.html這個路徑，點選就可以看到對應的資源
Sources 工具（中間區域）
這裡就可以看到對應資源詳情了，我們都看到原始碼了，直接複製豈不美滋滋。
當然這裡還有其他用途，比如說除錯程式碼。
作為一個正（wai）氣（men）凜（xie）然（dao）的前端er，我們就不發揮一下自己的腦回路？
-
不知道大家有沒有遇到除錯線上 Vue 檔案的時候遇到 new 出來的物件沒繫結到全域性拿不到？
- 方案一 找個方法打個斷點，觸發一下，然後
this繫結到window。這邊我們就可以隨心所欲。 - 方案二 找到
el繫結的DOM物件去拿__vue__
- 方案一 找個方法打個斷點，觸發一下，然後
- 大家有玩過網頁遊戲嗎？ Console 寫個程式碼？或者說偷偷看一下過關條件？
- 這裡也和遊戲有關，有一兄弟，愛摸魚。之前的幾款遊戲，比較簡單，他自己就破解了。遊戲一上外掛，就索然無味。
這天，一個angular寫的遊戲，他束手無策，玩了幾天，身體日漸消瘦。我決定拯救他一下。
通過我上面寫的本領，成功打斷點，找到初始化的時候，增加了外接修改器。解救兄弟與水火之間
Sources 工具（右邊區域）
這裡是除錯工具，下面我們介紹一下每個按鈕的功能
- 當有斷點的時候是個，三角，意思是放過這個斷點。
當無斷點的時候會在下次呼叫的時候停住。 - 下一行，如果是方法不會跳進去
- 步入，如果是方法，可以跳進去
- 步出，跳出當前方法
- 下一步（我沒用過）
- 當前狀態是捕獲除錯。藍色的時候是不捕獲除錯，會跳過 debugger。
方便你打了斷點，然後又想測試效果 - 這個是捕獲錯誤。當前是不捕獲。
chrome 開發者工具之 Network
如果說，上一個 Sources工具 基本都是和程式碼相關的。這個就比較常用了。
- 看介面的返回值
- 看介面的請求頭，響應頭
- 檢視資源的載入速度
- 檢視資源的大小，快取情況，響應情況（cdn、waiting 等時間）
Network 之 preserve log
該功能為長日誌功能，正常來說看到的都是當前頁面的。
如果跳轉頁面或者說重新整理之後就沒了。通過開啟 preserve log，我們可以長久的保留內容。
那它有什麼作用呢？
- 我們可以看到一些中間頁的跳轉，省去了抓包的麻煩。
- 可以和上個頁面的資料比對。
Network 之 disable cache
前端快取也是比較麻煩的一個事情。經常需要強刷，清快取一頓的操作。
當我們開啟 disable cache 之後，我們就不需要關了，每次都是無快取的載入
Network 之 offline
比如說在測試 PWA。或者說弱網的情況下的一種快速配置。
Network 之 過濾行
請求比較多的頁面，我們有可能需要過濾。
工具欄提供了，路徑過濾（支援正則），型別過濾（All,XHR,js），
Network 拿響應的原始碼
其實很簡單啊，找到頁面的請求，然後看 response 裡面不就是我們的原始碼了嗎？
總結
後面的先不寫了，和當前文章標題也沒關係，先留下坑位。
檢視網頁原始碼的方式總結
- 右鍵 > 檢視網頁原始碼（ctrl+u）
- 控制檯 > Sources > 找到對應路徑，檢視原始碼
- 控制檯 > Network > 找到對應請求路徑，檢視
response - 其實不通過瀏覽器看，比如說直接下載那個
html，就可以了。 -
curl 'url地址'命令的方式。 然後輸出到 txt