如何最大化利用好Google Chrome的開發者工具？

01-28

個人覺得最大化應用就是從開發到調試都在 Chrome 上完成，雖然沒什麼必要。

調試：

Elements，Sources，Resources，Console 就不說了。

Network:：分析網路請求，進行網路優化。

Timeline：記錄頁面表現，分析網頁性能，寫單頁應用的時候用的多一些。

Profile：還是寫單頁應用的時候用的多一些，主要被我拿來來分析一些內存泄漏……好吧我已經墮落成一個關心內存狀況的前端開發者了，sigh。

Audits：分析頁面表現，Chrome 會給出一些優化建議。

想用更多功能，就打開「chrome://flags「把「啟用開發者工具實驗」啟用，然後在設置頁面的 Experiments 里挑自己喜歡的功能打上勾。

開發：

想要用 Chrome 做開發，請先把開發者工具設為新窗口而不是 dock。

然後進入設置頁面的 Workspace （如果沒有 Workspace 就去 Experiments 打開），添加本地目錄，（記得在那個目錄下建一個名為「.allow-devtools-edit」的空文件）然後就可以開發了。（Workspace 允許你把調試時改的代碼保存到本地，單單作為調試工具也是極好的）

再然後你就可以去 Sources 里打代碼了，有代碼高亮和自動補全，其他功能就得安插件了。

/******************** 程序員看不見 ********************

我會說 Console 平常最大的用處是……計算器嗎。（上網的時候按下 F12 直接算，很方便有沒有）除此之外像百度和知乎等某些互聯網企業喜歡把招聘信息放在 console 里。

Network 感覺用的最多的場景是在調用後端的 API 的時候，指著這個給後端看，「你看不是前端寫的有 bug，是你後端輸出的數據不對」。

Resources 最大的用處是拿來定向清除訪問痕迹。

******************** 程序員看不見 ********************/

自認為沒有最大化利用，但是好像也沒必要非要最大化利用之。

我用的功能：

查看dom結構，並且實時編輯預覽
查看css樣式，並且實時編輯預覽
查看console控制台，查看js錯誤，js斷點調試（不常用）
查看network，分析請求的req和res的內容，查看資源大小，分析載入性能。
查看cookie，localStorage

手機碼字不方便

跟著瀏覽器裝進來不用再安裝插件

查看dom方便對於一些點擊彈廣告的網頁直接刪除節點對於不能複製的內容直接拷貝

查看source代碼搜索自動調整代碼格式

debug調試下斷點查看數值

console修改數值各種操作查看log

netrequest 查看所有網路下載數據網路請求格式

就是chrome瀏覽器不支持跨域比較麻煩

但是android上面的chrome沒有跨域

我建議看看官方的指南: https://developers.google.com/web/tools/chrome-devtools/

如果說是一些小技巧，可以關注: Developer Tips by Umar Hansa

轉自Google+

知乎居然不支持gif，好吧

在Elements的Find裡面，可以按照層級關係查找元素，如div#question-mili-list