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
轉載自：Chrome 開發者工具使用技巧