前端答疑-chrome開發者工具正確食用-看網頁源碼

寫這個文章，是由於在今天早上，有兩個兄弟找我要源碼。有圖有真相。
我震驚於都 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，咱們就不發揮一下本身的腦回路？

1. 不知道你們有沒有遇到調試線上 Vue 文件的時候遇到 new 出來的對象沒綁定到全局拿不到？

   1. 方案一 找個方法打個斷點，觸發一下，而後 this 綁定到 window 。這邊咱們就能夠爲所欲爲。
   2. 方案二 找到 el 綁定的 DOM 對象去拿 __vue__
      
2. 你們有玩過網頁遊戲嗎？ Console 寫個代碼？或者說偷偷看一下過關條件？
3. 這裏也和遊戲有關，有一兄弟，愛摸魚。以前的幾款遊戲，比較簡單，他本身就破解了。遊戲一上外掛，就索然無味。
   這天，一個 angular 寫的遊戲，他一籌莫展，玩了幾天，身體日漸消瘦。我決定拯救他一下。
   經過我上面寫的本領，成功打斷點，找到初始化的時候，增長了外置修改器。解救兄弟與水火之間

Sources 工具（右邊區域）

這裏是調試工具，下面咱們介紹一下每一個按鈕的功能

1. 當有斷點的時候是個，三角，意思是放過這個斷點。
   當無斷點的時候會在下次調用的時候停住。
   
2. 下一行，若是是方法不會跳進去
3. 步入，若是是方法，能夠跳進去
4. 步出，跳出當前方法
5. 下一步（我沒用過）
6. 當前狀態是捕獲調試。藍色的時候是不捕獲調試，會跳過 debugger。
   方便你打了斷點，而後又想測試效果
7. 這個是捕獲錯誤。當前是不捕獲。

chrome 開發者工具之 Network

若是說，上一個 Sources工具 基本都是和代碼相關的。這個就比較經常使用了。

1. 看接口的返回值
2. 看接口的請求頭，響應頭
3. 查看資源的加載速度
4. 查看資源的大小，緩存狀況，響應狀況（cdn、waiting 等時間）

Network 之 preserve log

該功能爲長日誌功能，正常來講看到的都是當前頁面的。
若是跳轉頁面或者說刷新以後就沒了。經過打開 preserve log，咱們能夠長久的保留內容。
那它有什麼做用呢？

1. 咱們能夠看到一些中間頁的跳轉，省去了抓包的麻煩。
2. 能夠和上個頁面的數據比對。

Network 之 disable cache

前端緩存也是比較麻煩的一個事情。常常須要強刷，清緩存一頓的操做。
當咱們打開 disable cache 以後，咱們就不須要關了，每次都是無緩存的加載

Network 之 offline

好比說在測試 PWA。或者說弱網的狀況下的一種快速配置。

Network 之 過濾行

請求比較多的頁面，咱們有可能須要過濾。
工具欄提供了，路徑過濾（支持正則），類型過濾（All,XHR,js），

Network 拿響應的源碼

其實很簡單啊，找到頁面的請求，而後看 response 裏面不就是咱們的源碼了嗎？

總結

後面的先不寫了，和當前文章標題也不要緊，先留下坑位。

查看網頁源碼的方式總結

1. 右鍵 > 查看網頁源代碼（ctrl+u）
2. 控制檯 > Sources > 找到對應路徑，查看源碼
3. 控制檯 > Network > 找到對應請求路徑，查看 response
4. 其實不經過瀏覽器看，好比說直接下載那個 html，就能夠了。
5. curl 'url地址' 命令的方式。 而後輸出到 txt

chrome 開發者工具之 Elements

https://segmentfault.com/a/11...

chrome 開發者工具之 Console

https://segmentfault.com/a/11...

chrome 開發者工具之 Application

https://segmentfault.com/a/11...

chrome 開發者工具之 Performance （最近忙沒寫，以後看心情）

chrome 開發者工具之 Memory （最近忙沒寫，以後看心情）

chrome 開發者工具之 Audits （最近忙沒寫，以後看心情）

chrome 開發者工具之 Security （最近忙沒寫，以後看心情）