Chrome 開發者工具使用技巧

最近我花了較多的時間使用 Chrome 的開發者工具。我發現了不少以前沒用過的好功能 (或還不是特別須要用到的功能，例如 blackboxing 和 asynchronous stacktraces) 。所以我想對我很是喜歡的幾個功能作個總結。

小小的放大鏡圖標告訴你有哪些 CSS 類／選擇器 位於哪一個 CSS 文件，決定了某個特殊元素的樣式和 CSS 的屬性。例如，在任意 DOM 元素上右擊選擇 「審查元素」，切換到 「Computed」 子菜單，能夠查找你感興趣的 CSS 屬性而且點擊放大鏡能夠直接定位到的 CSS 類／選擇器在 .css 文件中的位置。 (當你開發新的大型 web app 項目的時候很是有用):

想看看當前的 web app 發送了什麼 XHRs 請求，選中位於 「Settings」 下的 「Log XMLHttpRequests」 複選框 而後看看再看看控制檯的選項卡。在我知道這個功能以前，我一般將瀏覽器設置爲經過一個 HTTP 攔截代理 ，例如 Burp suite ，可是若是你僅僅須要快速回顧一下，那麼這個功能仍是很方便的。固然，經過攔截器代理你也能夠有機會在到達服務器以前修改 XHRs，這對安全測試很是有幫助。 一個輕量的替代方法是使用 「Sources :: XHR Breakpoints」 並激活 「Any XHR」 斷點。

如今，假定你的 web app 正週期性得發出一些 XHR 請求(例如保持當前頁面始終是最新)而且你須要知道定時器是在哪裏設置的(例如在哪裏調用了 setTimeout() 或使用了 setInterval() )。要解決這個問題，切換到 「Sources」 選項卡，選中「Async」 複選框。 這樣可讓棧追蹤繼續執行，越過 setTimeout() 和 friends, 甚至多個級別的嵌套。它對 requestAnimationFrame() 和 addEventListener() 等也有效。這個複選框在這裏：

要快速找到當你點擊一個按鈕或一個連接被點擊時候執行的代碼，啓動 「Event listener breakpoint」 的 Mouse :: Click (開發現有大型 web app 的又一個殺手鐗):

當你使用 「Event listener breakpoint :: Mouse :: Click」 ，可能在一些第三方的庫裏（例如jquery）就先結束了， 你須要在 debugger 裏走幾回才能到達「真正的」 event handler。「blackbox」 第三方腳本是避免這個問題一個很棒的方法。在 blackboxed 腳本中 debugger 不會中斷, 他會繼續執行直到遇到一行不在blackboxed 文件中的代碼。 在 callstack 你能夠選擇第三方的庫右擊選擇 「Blackbox Script」 將其放入 blackbox。

經過文件名稱跳轉到某個特殊文件，可使用 ctrl-p :

經過名稱轉到某個方法（僅限當前打開的文件）使用 ctrl-shift-p：

全局文件查找 ctrl-shift-f

選擇某個單詞而後按 ctrl-d 幾回，來選中更多相關的變量。對重命名變量來講很是方便：

對於本地開發的網站，能夠用開發工具來編輯文件和保存修改到磁盤。切換到 Sources 選項卡，右擊 Sources 子選項卡而後選擇 「Add Folder to Workspace」 而後選擇本地項目目錄。而後右擊本地文件選擇 「Map to Network Resource…」，而後選擇對應的 「network」 文件便可。

其它好用的技巧

• $0 控制檯上會顯示你在 elemet 選項卡上選中的元素

• 測試 Xpath 表達式 使用 $x("//p")

推薦安裝的兩個chrome 擴展

• JSONView

• JS Error Notifier (non-「spyware」 version)

外文來源：http://mo.github.io/2015/10/19/chrome-devtools.html