瀏覽器開發者工具----F12 功能介紹

筆者技巧：

看了些其它回答，有些是用來扒圖片的，有些是寫爬蟲的（這個不要看Elements，因為瀏覽器會對一些不符合規范的標簽做補全或者其它處理，最好是Ctrl+U）。

圖片的話就不要看Network了，一個頁面圖片太多了，我們可以點擊網頁上的圖片然后右鍵-》審查元素，然后Elements會定位到一個<img />標簽，那個src屬性就是你要的圖片地址了，有的網頁會把右鍵禁掉了，下面有介紹打開Chrome DevTools的方法，用“放大鏡”定位圖片元素。

 

正文：

• Elements 查看當前文檔的DOM信息
• Console 查看調試用的，也可以直接寫JS代碼
• Source 查看當前資源文件的（CSS,JS,IMAGE）
• Network 查看網絡請求的
• Resources 查看本地資源信息的（cookie,local storage,session storage等）

 

Elements：網頁右鍵檢查，可以定位點到的元素

 

Network：

 這個主要是用來查看當前的網頁的一些網絡請求（CSS,JS,image，ajax，Document等），
這里有基本的請求信息：
URL，請求方法，響應狀態碼，響應數據類型，響應數據大小，響應時間和每個階段所花費的時間。

 用的比較多的估計就是XHR了，點擊具體的請求，可以看到當前請求的信息和服務器響應的信息，這個很好用

 

 

Source：js調試

點左下角那對大括號（{ }），格式化一下這個JS文件，可讀性會好點。

 Resource：
resource主要是用來查看當前網頁可以訪問到的一些本地信息，比如：Cookie，LocalStorage，SessionStorage，DB等

 

Console
最后Console，這個主要是顯示JS文件里面打印的日志信息(console對象)。你也可以直接在里面寫JS，查看或修改當前作用域的變量信息，配合Source的調試用，非常爽。
如果是當前作用域內的對象（包含全局對象）的話，console還會自動幫你補全，有的時候我會忘記某個對象有什么方法，經常會用這個來看，或者console.dir(對象)看。

日志的等級： debug，info，warn，error。
打印變量信息什么的，一般用 log方法，相對於 alert，這方法真是好。
alert會讓瀏覽器掛起，如果 alert的多了，還要一個個確定，最痛苦的時候，如果是一個對象，直接用 alert打印的時候，直接是個object，要看具體某個屬性的值還要寫個循環，調試結束還特么要一個個刪除， 調試到哭的有沒有。

console.log，不會掛起瀏覽器，在后台默默打印，對象會顯示對象的具體信息，如果刪除的話，點擊log信息的右下角，直接定位到文件。

console.table打印數組對象（數組每一項是對象）信息非常好

console.time(tag)和console.timeEnd(tag)可以用來計start和end間花費的時間
console.dir(object) 打印對象的原型信息，很好用有沒有。

 

 

 

 參考文檔：https://www.zhihu.com/question/27414902