前端答疑-chrome開發(fā)者工具正確食用-看網(wǎng)頁源碼

ernest.wang 發(fā)布于2019-08-23 17:59 / 1596人閱讀

摘要：寫這個(gè)文章，是因?yàn)樵诮裉煸缟希袃蓚€(gè)兄弟找我要源碼。我震驚于都年了，身為了一個(gè)正經(jīng)前端，還不會(huì)看控制臺(tái)開發(fā)者工具之打開我們的選項(xiàng)看，我們可以看到如下結(jié)構(gòu)。開發(fā)者工具之如果說，上一個(gè)工具基本都是和代碼相關(guān)的。或者說弱網(wǎng)的情況下的一種快速配置。

寫這個(gè)文章，是因?yàn)樵诮裉煸缟希袃蓚€(gè)兄弟找我要源碼。有圖有真相。
我震驚于都 9102年了，身為了一個(gè)正（xie）經(jīng)（xin）前端er，還不會(huì)看控制臺(tái)？

chrome 開發(fā)者工具之 Sources

打開我們的 Sources 選項(xiàng)看，我們可以看到如下結(jié)構(gòu)。分為三塊功能，左（目錄）中（資源展示）右（斷點(diǎn)調(diào)試）。

Sources 工具（左邊區(qū)域）

我們選中 page ，在這個(gè)里面我們可以看到我們所有的資源以樹狀展示。
我們?cè)趯?duì)應(yīng)的域名下 www.lilnong.top 下，找到 https://www.lilnong.top/static/html/svg-data-background-img-download.html這個(gè)路徑，點(diǎn)擊就可以看到對(duì)應(yīng)的資源

Sources 工具（中間區(qū)域）

這里就可以看到對(duì)應(yīng)資源詳情了，我們都看到源碼了，直接復(fù)制豈不美滋滋。
當(dāng)然這里還有其他用途，比如說調(diào)試代碼。
作為一個(gè)正（wai）氣（men）凜（xie）然（dao）的前端er，我們就不發(fā)揮一下自己的腦回路？

不知道大家有沒有遇到調(diào)試線上 Vue 文件的時(shí)候遇到 new 出來的對(duì)象沒綁定到全局拿不到？

方案一找個(gè)方法打個(gè)斷點(diǎn)，觸發(fā)一下，然后 this 綁定到 window 。這邊我們就可以隨心所欲。

方案二找到 el 綁定的 DOM 對(duì)象去拿 __vue__

大家有玩過網(wǎng)頁游戲嗎？ Console 寫個(gè)代碼？或者說偷偷看一下過關(guān)條件？

這里也和游戲有關(guān)，有一兄弟，愛摸魚。之前的幾款游戲，比較簡(jiǎn)單，他自己就破解了。游戲一上外掛，就索然無味。
這天，一個(gè) angular 寫的游戲，他束手無策，玩了幾天，身體日漸消瘦。我決定拯救他一下。
通過我上面寫的本領(lǐng)，成功打斷點(diǎn)，找到初始化的時(shí)候，增加了外置修改器。解救兄弟與水火之間

Sources 工具（右邊區(qū)域）

這里是調(diào)試工具，下面我們介紹一下每個(gè)按鈕的功能

當(dāng)有斷點(diǎn)的時(shí)候是個(gè)，三角，意思是放過這個(gè)斷點(diǎn)。
當(dāng)無斷點(diǎn)的時(shí)候會(huì)在下次調(diào)用的時(shí)候停住。

下一行，如果是方法不會(huì)跳進(jìn)去

步入，如果是方法，可以跳進(jìn)去

步出，跳出當(dāng)前方法

下一步（我沒用過）

當(dāng)前狀態(tài)是捕獲調(diào)試。藍(lán)色的時(shí)候是不捕獲調(diào)試，會(huì)跳過 debugger。
方便你打了斷點(diǎn)，然后又想測(cè)試效果

這個(gè)是捕獲錯(cuò)誤。當(dāng)前是不捕獲。

chrome 開發(fā)者工具之 Network

如果說，上一個(gè) Sources工具基本都是和代碼相關(guān)的。這個(gè)就比較常用了。

看接口的返回值

看接口的請(qǐng)求頭，響應(yīng)頭

查看資源的加載速度

查看資源的大小，緩存情況，響應(yīng)情況（cdn、waiting 等時(shí)間）

Network 之 preserve log

該功能為長日志功能，正常來說看到的都是當(dāng)前頁面的。
如果跳轉(zhuǎn)頁面或者說刷新之后就沒了。通過打開 preserve log，我們可以長久的保留內(nèi)容。
那它有什么作用呢？

我們可以看到一些中間頁的跳轉(zhuǎn)，省去了抓包的麻煩。

可以和上個(gè)頁面的數(shù)據(jù)比對(duì)。

Network 之 disable cache

前端緩存也是比較麻煩的一個(gè)事情。經(jīng)常需要強(qiáng)刷，清緩存一頓的操作。
當(dāng)我們打開 disable cache 之后，我們就不需要關(guān)了，每次都是無緩存的加載

Network 之 offline

比如說在測(cè)試 PWA。或者說弱網(wǎng)的情況下的一種快速配置。

Network 之過濾行

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

Network 拿響應(yīng)的源碼

其實(shí)很簡(jiǎn)單啊，找到頁面的請(qǐng)求，然后看 response 里面不就是我們的源碼了嗎？

總結(jié)

后面的先不寫了，和當(dāng)前文章標(biāo)題也沒關(guān)系，先留下坑位。

查看網(wǎng)頁源碼的方式總結(jié)

右鍵 > 查看網(wǎng)頁源代碼（ctrl+u）

控制臺(tái) > Sources > 找到對(duì)應(yīng)路徑，查看源碼

控制臺(tái) > Network > 找到對(duì)應(yīng)請(qǐng)求路徑，查看 response

其實(shí)不通過瀏覽器看，比如說直接下載那個(gè) html，就可以了。

curl "url地址" 命令的方式。然后輸出到 txt

chrome 開發(fā)者工具之 Elements

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

chrome 開發(fā)者工具之 Console

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

chrome 開發(fā)者工具之 Application

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

chrome 開發(fā)者工具之 Performance （最近忙沒寫，之后看心情） chrome 開發(fā)者工具之 Memory （最近忙沒寫，之后看心情） chrome 開發(fā)者工具之 Audits （最近忙沒寫，之后看心情） chrome 開發(fā)者工具之 Security （最近忙沒寫，之后看心情）