資訊專欄INFORMATION COLUMN
摘要：寫這個文章，是因為在今天早上，有兩個兄弟找我要源碼。我震驚于都年了，身為了一個正經前端，還不會看控制臺開發者工具之打開我們的選項看，我們可以看到如下結構。開發者工具之如果說，上一個工具基本都是和代碼相關的。或者說弱網的情況下的一種快速配置。
寫這個文章，是因為在今天早上，有兩個兄弟找我要源碼。有圖有真相。
我震驚于都 9102年了，身為了一個正（xie）經（xin）前端er，還不會看控制臺？
打開我們的 Sources 選項看，我們可以看到如下結構。分為三塊功能，左（目錄）中（資源展示）右（斷點調試）。
我們選中 page ，在這個里面我們可以看到我們所有的資源以樹狀展示。
我們在對應的域名下 www.lilnong.top 下，找到 https://www.lilnong.top/static/html/svg-data-background-img-download.html這個路徑，點擊就可以看到對應的資源
這里就可以看到對應資源詳情了，我們都看到源碼了，直接復制豈不美滋滋。
當然這里還有其他用途，比如說調試代碼。
作為一個正（wai）氣（men）凜（xie）然（dao）的前端er，我們就不發揮一下自己的腦回路？
不知道大家有沒有遇到調試線上 Vue 文件的時候遇到 new 出來的對象沒綁定到全局拿不到？
方案一 找個方法打個斷點，觸發一下，然后 this 綁定到 window 。這邊我們就可以隨心所欲。
方案二 找到 el 綁定的 DOM 對象去拿 __vue__
大家有玩過網頁游戲嗎？ Console 寫個代碼？或者說偷偷看一下過關條件？
這里也和游戲有關，有一兄弟，愛摸魚。之前的幾款游戲，比較簡單，他自己就破解了。游戲一上外掛，就索然無味。
這天，一個 angular 寫的游戲，他束手無策，玩了幾天，身體日漸消瘦。我決定拯救他一下。
通過我上面寫的本領，成功打斷點，找到初始化的時候，增加了外置修改器。解救兄弟與水火之間
這里是調試工具，下面我們介紹一下每個按鈕的功能
當有斷點的時候是個，三角，意思是放過這個斷點。
當無斷點的時候會在下次調用的時候停住。
下一行，如果是方法不會跳進去
步入，如果是方法，可以跳進去
步出，跳出當前方法
下一步（我沒用過）
當前狀態是捕獲調試。藍色的時候是不捕獲調試，會跳過 debugger。
方便你打了斷點，然后又想測試效果
這個是捕獲錯誤。當前是不捕獲。
chrome 開發者工具之 Network如果說，上一個 Sources工具 基本都是和代碼相關的。這個就比較常用了。
看接口的返回值
看接口的請求頭，響應頭
查看資源的加載速度
查看資源的大小，緩存情況，響應情況（cdn、waiting 等時間）
Network 之 preserve log該功能為長日志功能，正常來說看到的都是當前頁面的。
如果跳轉頁面或者說刷新之后就沒了。通過打開 preserve log，我們可以長久的保留內容。
那它有什么作用呢？
我們可以看到一些中間頁的跳轉，省去了抓包的麻煩。
可以和上個頁面的數據比對。
Network 之 disable cache前端緩存也是比較麻煩的一個事情。經常需要強刷，清緩存一頓的操作。
當我們打開 disable cache 之后，我們就不需要關了，每次都是無緩存的加載
比如說在測試 PWA。或者說弱網的情況下的一種快速配置。
Network 之 過濾行請求比較多的頁面，我們有可能需要過濾。
工具欄提供了，路徑過濾（支持正則），類型過濾（All,XHR,js），
其實很簡單啊，找到頁面的請求，然后看 response 里面不就是我們的源碼了嗎？
后面的先不寫了，和當前文章標題也沒關系，先留下坑位。
查看網頁源碼的方式總結右鍵 > 查看網頁源代碼（ctrl+u）
控制臺 > Sources > 找到對應路徑，查看源碼
控制臺 > Network > 找到對應請求路徑，查看 response
其實不通過瀏覽器看，比如說直接下載那個 html，就可以了。
curl "url地址" 命令的方式。 然后輸出到 txt
chrome 開發者工具之 Elementshttps://segmentfault.com/a/11...
chrome 開發者工具之 Consolehttps://segmentfault.com/a/11...
chrome 開發者工具之 Applicationhttps://segmentfault.com/a/11...
chrome 開發者工具之 Performance （最近忙沒寫，之后看心情） chrome 開發者工具之 Memory （最近忙沒寫，之后看心情） chrome 開發者工具之 Audits （最近忙沒寫，之后看心情） chrome 開發者工具之 Security （最近忙沒寫，之后看心情）文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104465.html
摘要：寫這個文章，是因為在今天早上，有兩個兄弟找我要源碼。我震驚于都年了，身為了一個正經前端，還不會看控制臺開發者工具之打開我們的選項看，我們可以看到如下結構。開發者工具之如果說，上一個工具基本都是和代碼相關的。或者說弱網的情況下的一種快速配置。 寫這個文章，是因為在今天早上，有兩個兄弟找我要源碼。有圖有真相。我震驚于都 9102年了，身為了一個正（xie）經（xin）前端er，還不會看控制...
摘要：之前寫過前端答疑開發者工具正確食用看網頁源碼，其中涉及到了和兩個標簽。工具欄提供了，路徑過濾支持正則，類型過濾，拿響應其實很簡單啊，找到頁面的請求，然后看里面不就是嗎看這個其實也是昨天碰到的，有個朋友說他下載文件失敗。 之前寫過前端答疑-chrome開發者工具正確食用-看網頁源碼，其中涉及到了 Sources 和 Network 兩個標簽。 不曾想現在的世界越來越看不懂了昨天吧，一個...
摘要：前端最基礎的就是。我這邊預期準備進入中級階段，中間還是會穿插一些實戰。語法精確匹配，匹配成功，則停止搜索正則不能有嵌套的。指令會根據在配置文件中出現的順序依次執行，可以使用來終止接下來的處理。如果以或者或者，則停止處理，立刻重定向。 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTM...
摘要：前端最基礎的就是。我這邊預期準備進入中級階段，中間還是會穿插一些實戰。語法精確匹配，匹配成功，則停止搜索正則不能有嵌套的。指令會根據在配置文件中出現的順序依次執行，可以使用來終止接下來的處理。如果以或者或者，則停止處理，立刻重定向。 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTM...
閱讀 284·2024-11-07 18:25
閱讀 130366·2024-02-01 10:43
閱讀 868·2024-01-31 14:58
閱讀 828·2024-01-31 14:54
閱讀 82766·2024-01-29 17:11
閱讀 3048·2024-01-25 14:55
閱讀 1985·2023-06-02 13:36
閱讀 3033·2023-05-23 10:26
