浏览器家园·资讯

展开

Jerry和您聊聊Chrome開發者工具

编辑:浏览器知识

html5 sap chrome fioriChrome開發者工具是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開發者工具有一些更深入的了解,感謝閱讀。

文章TAG:jerry  聊聊  chrome  開發  Jerry和您聊聊Chrome開發者工具  

加载全部内容

相关教程
猜你喜欢
大家都在看