国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

KnewOne / 1288人閱讀

摘要：寫這個文章，是因為在今天早上，有兩個兄弟找我要源碼。我震驚于都年了，身為了一個正經前端，還不會看控制臺開發者工具之打開我們的選項看，我們可以看到如下結構。開發者工具之如果說，上一個工具基本都是和代碼相關的。或者說弱網的情況下的一種快速配置。

寫這個文章，是因為在今天早上，有兩個兄弟找我要源碼。有圖有真相。
我震驚于都 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

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 （最近忙沒寫，之后看心情）

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53988.html

相關文章

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

    摘要：寫這個文章，是因為在今天早上，有兩個兄弟找我要源碼。我震驚于都年了，身為了一個正經前端，還不會看控制臺開發者工具之打開我們的選項看，我們可以看到如下結構。開發者工具之如果說，上一個工具基本都是和代碼相關的。或者說弱網的情況下的一種快速配置。 寫這個文章，是因為在今天早上，有兩個兄弟找我要源碼。有圖有真相。我震驚于都 9102年了，身為了一個正（xie）經（xin）前端er，還不會看控制...

    ernest.wang 評論0 收藏0

  • 前端答疑-chrome開發者工具正確食用-調試代碼

    摘要：之前寫過前端答疑開發者工具正確食用看網頁源碼，其中涉及到了和兩個標簽。工具欄提供了，路徑過濾支持正則，類型過濾，拿響應其實很簡單啊，找到頁面的請求，然后看里面不就是嗎看這個其實也是昨天碰到的，有個朋友說他下載文件失敗。 之前寫過前端答疑-chrome開發者工具正確食用-看網頁源碼，其中涉及到了 Sources 和 Network 兩個標簽。 不曾想現在的世界越來越看不懂了昨天吧，一個...

    zhangxiangliang 評論0 收藏0

  • 前端培訓-初級階段-場景實戰（2019-06-13）-Nginx代理正確食用方式

    摘要：前端最基礎的就是。我這邊預期準備進入中級階段，中間還是會穿插一些實戰。語法精確匹配，匹配成功，則停止搜索正則不能有嵌套的。指令會根據在配置文件中出現的順序依次執行，可以使用來終止接下來的處理。如果以或者或者，則停止處理，立刻重定向。 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTM...

    Harpsichord1207 評論0 收藏0

  • 前端培訓-初級階段-場景實戰（2019-06-13）-Nginx代理正確食用方式

    摘要：前端最基礎的就是。我這邊預期準備進入中級階段，中間還是會穿插一些實戰。語法精確匹配，匹配成功，則停止搜索正則不能有嵌套的。指令會根據在配置文件中出現的順序依次執行，可以使用來終止接下來的處理。如果以或者或者，則停止處理，立刻重定向。 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTM...

    seanHai 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<