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

linong發表於2019-06-07

寫這個文章,是因為在今天早上,有兩個兄弟找我要原始碼。有圖有真相。
我震驚於都 9102年了,身為了一個正(xie)經(xin)前端er,還不會看控制檯?

clipboard.pngclipboard.png

chrome 開發者工具之 Sources

開啟我們的 Sources 選項看,我們可以看到如下結構。分為三塊功能,左(目錄)中(資源展示)右(斷點除錯)。
clipboard.png

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__
      clipboard.png
  2. 大家有玩過網頁遊戲嗎? Console 寫個程式碼?或者說偷偷看一下過關條件?
  3. 這裡也和遊戲有關,有一兄弟,愛摸魚。之前的幾款遊戲,比較簡單,他自己就破解了。遊戲一上外掛,就索然無味。
    這天,一個 angular 寫的遊戲,他束手無策,玩了幾天,身體日漸消瘦。我決定拯救他一下。
    通過我上面寫的本領,成功打斷點,找到初始化的時候,增加了外接修改器。解救兄弟與水火之間

Sources 工具(右邊區域)

這裡是除錯工具,下面我們介紹一下每個按鈕的功能
clipboard.png

  1. 當有斷點的時候是個,三角,意思是放過這個斷點。
    當無斷點的時候會在下次呼叫的時候停住。
    clipboard.png
  2. 下一行,如果是方法不會跳進去
  3. 步入,如果是方法,可以跳進去
  4. 步出,跳出當前方法
  5. 下一步(我沒用過)
  6. 當前狀態是捕獲除錯。藍色的時候是不捕獲除錯,會跳過 debugger。
    方便你打了斷點,然後又想測試效果
  7. 這個是捕獲錯誤。當前是不捕獲。

chrome 開發者工具之 Network

如果說,上一個 Sources工具 基本都是和程式碼相關的。這個就比較常用了。

  1. 看介面的返回值
  2. 看介面的請求頭,響應頭
  3. 檢視資源的載入速度
  4. 檢視資源的大小,快取情況,響應情況(cdn、waiting 等時間)

clipboard.png

Network 之 preserve log

該功能為長日誌功能,正常來說看到的都是當前頁面的。
如果跳轉頁面或者說重新整理之後就沒了。通過開啟 preserve log,我們可以長久的保留內容。
那它有什麼作用呢?

  1. 我們可以看到一些中間頁的跳轉,省去了抓包的麻煩。
  2. 可以和上個頁面的資料比對。

Network 之 disable cache

前端快取也是比較麻煩的一個事情。經常需要強刷,清快取一頓的操作。
當我們開啟 disable cache 之後,我們就不需要關了,每次都是無快取的載入

Network 之 offline

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

Network 之 過濾行

請求比較多的頁面,我們有可能需要過濾。
工具欄提供了,路徑過濾(支援正則),型別過濾(All,XHR,js),

Network 拿響應的原始碼

其實很簡單啊,找到頁面的請求,然後看 response 裡面不就是我們的原始碼了嗎?
clipboard.png

總結

後面的先不寫了,和當前文章標題也沒關係,先留下坑位。

檢視網頁原始碼的方式總結

  1. 右鍵 > 檢視網頁原始碼(ctrl+u)
  2. 控制檯 > Sources > 找到對應路徑,檢視原始碼
  3. 控制檯 > Network > 找到對應請求路徑,檢視 response
  4. 其實不通過瀏覽器看,比如說直接下載那個 html,就可以了。
  5. curl 'url地址' 命令的方式。 然後輸出到 txt

chrome 開發者工具之 Elements (最近忙沒寫,之後看心情)

chrome 開發者工具之 Console (最近忙沒寫,之後看心情)

chrome 開發者工具之 Application (最近忙沒寫,之後看心情)

chrome 開發者工具之 Performance (最近忙沒寫,之後看心情)

chrome 開發者工具之 Memory (最近忙沒寫,之後看心情)

chrome 開發者工具之 Audits (最近忙沒寫,之後看心情)

chrome 開發者工具之 Security (最近忙沒寫,之後看心情)

相關文章