Chrome開發者工具是Jerry日常工作使用的三大偵錯程式之一。雖然工具名稱前面帶了個"開發者", 但是它對非開發人員仍然有用。不信？

用Chrome開啟我們常用的網站，按F12，在Console標籤頁裡看到這些資訊，這些都是很老的梗了。

在網易雲音樂上聽歌，如果想儲存到本地，不需要安裝客戶端，直接在Chrome開發者工具裡找到mp3的真實連結即可儲存。

對於線上視訊也能用同樣的方式找到真實地址然後儲存到本地。

前段時間我看到一則新聞，題目是"騙子騙術再高，遇到程式設計師也折腰"，介紹了一位程式設計師收到詐騙簡訊後，不僅識破了詐騙犯的套路，全程機智應答，設陷下套，一步步將對方引入自己的節奏，最後直接控制了詐騙犯的電腦和攝像頭。

我的這位同行用到的一個方法就是：在上圖Chrome開發者工具的Console皮膚裡敲入指令document.body.contentEditable='true', 這樣使得整個網頁處於可編輯狀態。然後就可以隨心所欲地修改網頁上的內容，比如可以像下圖這樣做做白日夢：

使用Chrome的記住密碼功能，時間長了都忘記密碼是什麼了。雖然這些密碼在Chrome設定裡也能找到，但更快捷的方式還是直接在Chrome開發者工具裡列印出來。

在Chrome開發者工具裡點選Elements標籤，然後點選網頁上的密碼元素，該元素的實現的html程式碼就顯示在標籤頁裡了。這裡我們能看出該元素的id為password。

再回到Console標籤，輸入$("#password").value, 即可顯示出密碼。

以前網上有個著名的段子。一位程式猿開啟珍愛網想找個物件。瀏覽了幾分鐘網頁，他習慣性地按了F12開啟Chrome開發者工具，發現Console標籤列印了幾條錯誤資訊，然後就習慣性地開始了除錯。

然後，就沒有然後了。。。

下面是一些我日常工作中使用Chrome開發者工具的心得和小技巧，希望對您提高開發和除錯的效率能有所幫助。

1. Element屬性斷點

在Element標籤頁選中某個html標籤，在右鍵選單裡設定Attributes modifications斷點。下圖意思是一旦title標籤的屬性發生變化，斷點自動觸發。

我曾經處理過一個incident，使用者抱怨在Fiori應用裡做了一些操作之後，頁面的title被修改成一個錯誤的值。藉助這個屬性斷點功能，我很快找到了title被修改的那行程式碼。這個incident的更多細節請參考我的部落格：
A quick way to find which code has changed the UI5 application page title by debugging

2. 在瀏覽器的原生方法裡設定斷點

這種說法其實並不準確，因為我們沒辦法在Chrome裡檢視瀏覽器原生方法的實現程式碼，更別提設定斷點了。

其實我的需求是，希望除錯的時候，在這些瀏覽器原生方法以某些特殊輸入引數被呼叫時能停下來。

舉個例子，在我研究Angular框架時，用ng-repeat畫了一個列表，如下圖所示。我發現對於每條列表記錄，最終生成的原生html程式碼都有一個註釋元素，如下圖紅色高亮區域顯示。

我很好奇Angular框架是在哪行程式碼生成的這三個註釋元素。按照推理，這些註釋肯定是通過原生方法createComment建立的，然而我無法在這個方法裡面設定斷點。如果直接在Angular框架里根據原始碼createComment搜尋，然後在所有的搜尋結果處設定斷點——這種方法理論上可行，然而效率太低，因為搜尋結果有將近100處呼叫了createComment。

怎麼辦？

(1) 在angular.js檔案最開始的地方設定斷點, 開啟應用，斷點觸發:

(2) 將瀏覽器原生的方法實現儲存在變數oldFn裡，然後重寫createComment。在重寫的版本里，加上我自己的判斷邏輯：我期望只有當建立的comment文字包含ngRepeat時，斷點才觸發。實現如下圖所示。在console裡執行下圖程式碼，完成對createComment原始實現的覆蓋。

然後在偵錯程式裡繼續執行，最終斷點在我想要找的位置觸發：

這就是我要尋找的Angular框架建立包含ngRepeat註釋的程式碼位置:

3. Chrome開發者工具裡的一些隱藏命令

在Chrome位址列裡輸入chrome://開頭的一系列命令可以實現各種各樣的功能。不過我日常工作用得最多的是chrome://net-internals。

在SAP成都Revenue Cloud開發團隊Wang Cong的幫助下，我使用這個功能解開了困擾過我一段時間的關於JavaScript source code map的謎團。

我把如何通過chrome://net-internals研究JavaScript source code map的過程寫在了這三篇部落格裡:

(1) A debugging issue caused by source code mapping

(2) UI5 Source code map機制的細節介紹

(3) Useful Chrome Tool chrome://net-internals to monitor http request detail

4. 將JavaScript變數的內容儲存成本地檔案

我在SAP處理Fiori應用的incident時經常需要這個功能：比如除錯Fiori應用的前後臺互動，我想把後臺返回的JSON響應另存成一個本地檔案。當然我可以在Chrome開發者工具的network標籤頁手動選中響應內容，然後Ctrl C，再到本地新建一個檔案，Ctrl V。我嫌這個步驟麻煩，在這篇部落格上找到了另一種快捷的做法。

直接在console裡執行這段程式碼：

這段程式碼會給console物件注入一個新方法save, 接下來就能使用console.save(<variable name>, <local file name>)將任意變數儲存成本地檔案，非常方便。

5. 分析JavaScript的垃圾回收機制

這種型別的分析通過Profiles這個標籤頁完成。詳細說明參考我的部落格：
An example of using Chrome Development Tool to analyze JavaScript garbage collector

6. 自學一些瀏覽器原生方法的實現

想知道這種toString方法具體是怎麼實現的麼？

您得在Chrome開發者工具裡開啟選項Show native functions in JS profile，然後檢視我的部落格：

Use Chrome development tool to do self-study on some JavaScript function native implementation

7. console.log的彩色列印

當我處理一些非常棘手的複雜問題時，經常使用到這個彩色列印的技巧。

我曾經處理過一個incident，UI上顯示的列表一次從後臺讀取20條記錄，其中有一條記錄的guid和其實際內容不匹配。我需要找到究竟是20條記錄裡的哪一條記錄有錯。如果用除錯的方式，我設定斷點的函式在迴圈裡被呼叫，斷點會不斷被觸發。我覺得很不耐煩，就採用了console.log的方式，列印每條記錄的guid和詳細內容。當我觀察這些列印輸出時，發現它們被淹沒在了UI5框架大量的log裡。因為我檢視自己列印的log的同時，也需要結合UI5列印的log作為上下文來分析，因此我不能在Console標籤頁裡使用過濾的功能來使得只有我自己列印的log被顯示出來。

有什麼辦法能讓我自己列印的log不會淹沒在UI5框架海量的log裡呢？辦法就是使其成為“萬花叢中一點綠"。

採用下列自定義函式myLog輸出的日誌，在console裡顯示的效果如下：

可以顯示得再花哨一點：

8. 使用正規表示式過濾網路請求

9. jQuery選擇器風格的Console命令

比如我想快速知道當前UI一共有多少個button元素，並檢視某些元素的詳情。採用類jQuery選擇器的語法$('button')即返回所有button元素。

還有其他很多小技巧，以及我最常用的快捷鍵組合，因為篇幅限制不再贅述，您可以在我的這篇部落格裡找到我使用Chrome開發者工具的全部技巧。

Chrome Development Tool tips used in my daily work

希望這篇文章能讓您對Chrome開發者工具有一些更深入的瞭解，感謝閱讀。

要獲取更多Jerry的原創技術文章，請關注公眾號"汪子熙"或者掃描下面二維碼:

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/24475491/viewspace-2152989/，如需轉載，請註明出處，否則將追究法律責任。