摘要：開發(fā)者工具是日常工作使用的三大調(diào)試器之一。當(dāng)然我可以在開發(fā)者工具的標(biāo)簽頁手動選中響應(yīng)內(nèi)容，然后，再到本地新建一個文件，。注開發(fā)者工具顏色的修改希望這篇文章能讓您對開發(fā)者工具有一些更深入的了解，感謝閱讀。

Chrome開發(fā)者工具是Jerry日常工作使用的三大調(diào)試器之一。雖然工具名稱前面帶了個"開發(fā)者", 但是它對非開發(fā)人員仍然有用。不信？

用Chrome打開我們常用的網(wǎng)站，按F12，在Console標(biāo)簽頁里看到這些信息，這些都是很老的梗了。

在網(wǎng)易云音樂上聽歌，如果想保存到本地，不需要安裝客戶端，直接在Chrome開發(fā)者工具里找到mp3的真實鏈接即可保存。

對于在線視頻也能用同樣的方式找到真實地址然后保存到本地。

前段時間我看到一則新聞，題目是"騙子騙術(shù)再高，遇到程序員也折腰"，介紹了一位程序員收到詐騙短信后，不僅識破了詐騙犯的套路，全程機智應(yīng)答，設(shè)陷下套，一步步將對方引入自己的節(jié)奏，最后直接控制了詐騙犯的電腦和攝像頭。

我的這位同行用到的一個方法就是：在上圖Chrome開發(fā)者工具的Console面板里敲入指令document.body.contentEditable="true", 這樣使得整個網(wǎng)頁處于可編輯狀態(tài)。然后就可以隨心所欲地修改網(wǎng)頁上的內(nèi)容，比如可以像下圖這樣做做白日夢：

使用Chrome的記住密碼功能，時間長了都忘記密碼是什么了。雖然這些密碼在Chrome設(shè)置里也能找到，但更快捷的方式還是直接在Chrome開發(fā)者工具里打印出來。

在Chrome開發(fā)者工具里點擊Elements標(biāo)簽，然后點擊網(wǎng)頁上的密碼元素，該元素的實現(xiàn)的html代碼就顯示在標(biāo)簽頁里了。這里我們能看出該元素的id為password。

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

以前網(wǎng)上有個著名的段子。一位程序猿打開珍愛網(wǎng)想找個對象。瀏覽了幾分鐘網(wǎng)頁，他習(xí)慣性地按了F12打開Chrome開發(fā)者工具，發(fā)現(xiàn)Console標(biāo)簽打印了幾條錯誤信息，然后就習(xí)慣性地開始了調(diào)試。

然后，就沒有然后了。。。

下面是一些我日常工作中使用Chrome開發(fā)者工具的心得和小技巧，希望對您提高開發(fā)和調(diào)試的效率能有所幫助。

在Element標(biāo)簽頁選中某個html標(biāo)簽，在右鍵菜單里設(shè)置Attributes modifications斷點。下圖意思是一旦title標(biāo)簽的屬性發(fā)生變化，斷點自動觸發(fā)。

我曾經(jīng)處理過一個incident，用戶抱怨在Fiori應(yīng)用里做了一些操作之后，頁面的title被修改成一個錯誤的值。借助這個屬性斷點功能，我很快找到了title被修改的那行代碼。這個incident的更多細節(jié)請參考我的博客：
A quick way to find which code has changed the UI5 application page title by debugging

這種說法其實并不準(zhǔn)確，因為我們沒辦法在Chrome里查看瀏覽器原生方法的實現(xiàn)代碼，更別提設(shè)置斷點了。

其實我的需求是，希望調(diào)試的時候，在這些瀏覽器原生方法以某些特殊輸入?yún)?shù)被調(diào)用時能停下來。

舉個例子，在我研究Angular框架時，用ng-repeat畫了一個列表，如下圖所示。我發(fā)現(xiàn)對于每條列表記錄，最終生成的原生html代碼都有一個注釋元素，如下圖紅色高亮區(qū)域顯示。

我很好奇Angular框架是在哪行代碼生成的這三個注釋元素。按照推理，這些注釋肯定是通過原生方法createComment創(chuàng)建的，然而我無法在這個方法里面設(shè)置斷點。如果直接在Angular框架里根據(jù)源代碼createComment搜索，然后在所有的搜索結(jié)果處設(shè)置斷點——這種方法理論上可行，然而效率太低，因為搜索結(jié)果有將近100處調(diào)用了createComment。

怎么辦？

(1) 在angular.js文件最開始的地方設(shè)置斷點, 打開應(yīng)用，斷點觸發(fā):

(2) 將瀏覽器原生的方法實現(xiàn)保存在變量oldFn里，然后重寫createComment。在重寫的版本里，加上我自己的判斷邏輯：我期望只有當(dāng)創(chuàng)建的comment文本包含ngRepeat時，斷點才觸發(fā)。實現(xiàn)如下圖所示。在console里執(zhí)行下圖代碼，完成對createComment原始實現(xiàn)的覆蓋。

然后在調(diào)試器里繼續(xù)執(zhí)行，最終斷點在我想要找的位置觸發(fā)：

這就是我要尋找的Angular框架創(chuàng)建包含ngRepeat注釋的代碼位置:

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

在SAP成都Revenue Cloud開發(fā)團隊Wang Cong的幫助下，我使用這個功能解開了困擾過我一段時間的關(guān)于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機制的細節(jié)介紹

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

我在SAP處理Fiori應(yīng)用的incident時經(jīng)常需要這個功能：比如調(diào)試Fiori應(yīng)用的前后臺交互，我想把后臺返回的JSON響應(yīng)另存成一個本地文件。當(dāng)然我可以在Chrome開發(fā)者工具的network標(biāo)簽頁手動選中響應(yīng)內(nèi)容，然后Ctrl C，再到本地新建一個文件，Ctrl V。我嫌這個步驟麻煩，在這篇博客上找到了另一種快捷的做法。

直接在console里執(zhí)行這段代碼：

這段代碼會給console對象注入一個新方法save, 接下來就能使用console.save(, )將任意變量保存成本地文件，非常方便。

這種類型的分析通過Profiles這個標(biāo)簽頁完成。詳細說明參考我的博客：
An example of using Chrome Development Tool to analyze JavaScript garbage collector

想知道這種toString方法具體是怎么實現(xiàn)的么？

您得在Chrome開發(fā)者工具里打開選項Show native functions in JS profile，然后查看我的博客：

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

當(dāng)我處理一些非常棘手的復(fù)雜問題時，經(jīng)常使用到這個彩色打印的技巧。

我曾經(jīng)處理過一個incident，UI上顯示的列表一次從后臺讀取20條記錄，其中有一條記錄的guid和其實際內(nèi)容不匹配。我需要找到究竟是20條記錄里的哪一條記錄有錯。如果用調(diào)試的方式，我設(shè)置斷點的函數(shù)在循環(huán)里被調(diào)用，斷點會不斷被觸發(fā)。我覺得很不耐煩，就采用了console.log的方式，打印每條記錄的guid和詳細內(nèi)容。當(dāng)我觀察這些打印輸出時，發(fā)現(xiàn)它們被淹沒在了UI5框架大量的log里。因為我查看自己打印的log的同時，也需要結(jié)合UI5打印的log作為上下文來分析，因此我不能在Console標(biāo)簽頁里使用過濾的功能來使得只有我自己打印的log被顯示出來。

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

采用下列自定義函數(shù)myLog輸出的日志，在console里顯示的效果如下：

可以顯示得再花哨一點：

比如我想快速知道當(dāng)前UI一共有多少個button元素，并查看某些元素的詳情。采用類jQuery選擇器的語法$("button")即返回所有button元素。

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

Chrome Development Tool tips used in my daily work

注：Chrome開發(fā)者工具顏色的修改：

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