這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)Chrome開(kāi)發(fā)者工具如何理解，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
成都創(chuàng)新互聯(lián)公司自2013年起，先為桓仁等服務(wù)建站，桓仁等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為桓仁企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。
Chrome開(kāi)發(fā)者工具是Jerry日常工作使用的三大調(diào)試器之一。雖然工具名稱前面帶了個(gè)"開(kāi)發(fā)者", 但是它對(duì)非開(kāi)發(fā)人員仍然有用。不信？
用Chrome打開(kāi)我們常用的網(wǎng)站，按F12，在Console標(biāo)簽頁(yè)里看到這些信息，這些都是很老的梗了。
在網(wǎng)易云音樂(lè)上聽(tīng)歌，如果想保存到本地，不需要安裝客戶端，直接在Chrome開(kāi)發(fā)者工具里找到mp3的真實(shí)鏈接即可保存。
對(duì)于在線視頻也能用同樣的方式找到真實(shí)地址然后保存到本地。
前段時(shí)間我看到一則新聞，題目是"騙子騙術(shù)再高，遇到程序員也折腰"，介紹了一位程序員收到詐騙短信后，不僅識(shí)破了詐騙犯的套路，全程機(jī)智應(yīng)答，設(shè)陷下套，一步步將對(duì)方引入自己的節(jié)奏，最后直接控制了詐騙犯的電腦和攝像頭。
我的這位同行用到的一個(gè)方法就是：在上圖Chrome開(kāi)發(fā)者工具的Console面板里敲入指令document.body.contentEditable='true', 這樣使得整個(gè)網(wǎng)頁(yè)處于可編輯狀態(tài)。然后就可以隨心所欲地修改網(wǎng)頁(yè)上的內(nèi)容，比如可以像下圖這樣做做白日夢(mèng)：
使用Chrome的記住密碼功能，時(shí)間長(zhǎng)了都忘記密碼是什么了。雖然這些密碼在Chrome設(shè)置里也能找到，但更快捷的方式還是直接在Chrome開(kāi)發(fā)者工具里打印出來(lái)。
在Chrome開(kāi)發(fā)者工具里點(diǎn)擊Elements標(biāo)簽，然后點(diǎn)擊網(wǎng)頁(yè)上的密碼元素，該元素的實(shí)現(xiàn)的html代碼就顯示在標(biāo)簽頁(yè)里了。這里我們能看出該元素的id為password。
再回到Console標(biāo)簽，輸入$("#password").value, 即可顯示出密碼。
以前網(wǎng)上有個(gè)著名的段子。一位程序猿打開(kāi)珍愛(ài)網(wǎng)想找個(gè)對(duì)象。瀏覽了幾分鐘網(wǎng)頁(yè)，他習(xí)慣性地按了F12打開(kāi)Chrome開(kāi)發(fā)者工具，發(fā)現(xiàn)Console標(biāo)簽打印了幾條錯(cuò)誤信息，然后就習(xí)慣性地開(kāi)始了調(diào)試。
然后，就沒(méi)有然后了。。。
下面是一些我日常工作中使用Chrome開(kāi)發(fā)者工具的心得和小技巧，希望對(duì)您提高開(kāi)發(fā)和調(diào)試的效率能有所幫助。
在Element標(biāo)簽頁(yè)選中某個(gè)html標(biāo)簽，在右鍵菜單里設(shè)置Attributes modifications斷點(diǎn)。下圖意思是一旦title標(biāo)簽的屬性發(fā)生變化，斷點(diǎn)自動(dòng)觸發(fā)。
我曾經(jīng)處理過(guò)一個(gè)incident，用戶抱怨在Fiori應(yīng)用里做了一些操作之后，頁(yè)面的title被修改成一個(gè)錯(cuò)誤的值。借助這個(gè)屬性斷點(diǎn)功能，我很快找到了title被修改的那行代碼。這個(gè)incident的更多細(xì)節(jié)請(qǐng)參考我的博客：
A quick way to find which code has changed the UI5 application page title by debugging
這種說(shuō)法其實(shí)并不準(zhǔn)確，因?yàn)槲覀儧](méi)辦法在Chrome里查看瀏覽器原生方法的實(shí)現(xiàn)代碼，更別提設(shè)置斷點(diǎn)了。
其實(shí)我的需求是，希望調(diào)試的時(shí)候，在這些瀏覽器原生方法以某些特殊輸入?yún)?shù)被調(diào)用時(shí)能停下來(lái)。
舉個(gè)例子，在我研究Angular框架時(shí)，用ng-repeat畫(huà)了一個(gè)列表，如下圖所示。我發(fā)現(xiàn)對(duì)于每條列表記錄，最終生成的原生html代碼都有一個(gè)注釋元素，如下圖紅色高亮區(qū)域顯示。
我很好奇Angular框架是在哪行代碼生成的這三個(gè)注釋元素。按照推理，這些注釋肯定是通過(guò)原生方法createComment創(chuàng)建的，然而我無(wú)法在這個(gè)方法里面設(shè)置斷點(diǎn)。如果直接在Angular框架里根據(jù)源代碼createComment搜索，然后在所有的搜索結(jié)果處設(shè)置斷點(diǎn)——這種方法理論上可行，然而效率太低，因?yàn)樗阉鹘Y(jié)果有將近100處調(diào)用了createComment。
怎么辦？
(1) 在angular.js文件最開(kāi)始的地方設(shè)置斷點(diǎn), 打開(kāi)應(yīng)用，斷點(diǎn)觸發(fā):
(2) 將瀏覽器原生的方法實(shí)現(xiàn)保存在變量oldFn里，然后重寫(xiě)createComment。在重寫(xiě)的版本里，加上我自己的判斷邏輯：我期望只有當(dāng)創(chuàng)建的comment文本包含ngRepeat時(shí)，斷點(diǎn)才觸發(fā)。實(shí)現(xiàn)如下圖所示。在console里執(zhí)行下圖代碼，完成對(duì)createComment原始實(shí)現(xiàn)的覆蓋。
然后在調(diào)試器里繼續(xù)執(zhí)行，最終斷點(diǎn)在我想要找的位置觸發(fā)：
這就是我要尋找的Angular框架創(chuàng)建包含ngRepeat注釋的代碼位置:
在Chrome地址欄里輸入chrome://開(kāi)頭的一系列命令可以實(shí)現(xiàn)各種各樣的功能。不過(guò)我日常工作用得最多的是chrome://net-internals。
在SAP成都Revenue Cloud開(kāi)發(fā)團(tuán)隊(duì)Wang Cong的幫助下，我使用這個(gè)功能解開(kāi)了困擾過(guò)我一段時(shí)間的關(guān)于JavaScript source code map的謎團(tuán)。
我把如何通過(guò)chrome://net-internals研究JavaScript source code map的過(guò)程寫(xiě)在了這三篇博客里:
(1) A debugging issue caused by source code mapping
(2) UI5 Source code map機(jī)制的細(xì)節(jié)介紹
(3) Useful Chrome Tool chrome://net-internals to monitor http request detail
我在SAP處理Fiori應(yīng)用的incident時(shí)經(jīng)常需要這個(gè)功能：比如調(diào)試Fiori應(yīng)用的前后臺(tái)交互，我想把后臺(tái)返回的JSON響應(yīng)另存成一個(gè)本地文件。當(dāng)然我可以在Chrome開(kāi)發(fā)者工具的network標(biāo)簽頁(yè)手動(dòng)選中響應(yīng)內(nèi)容，然后Ctrl C，再到本地新建一個(gè)文件，Ctrl V。我嫌這個(gè)步驟麻煩，在這篇博客上找到了另一種快捷的做法。
直接在console里執(zhí)行這段代碼：
這段代碼會(huì)給console對(duì)象注入一個(gè)新方法save, 接下來(lái)就能使用console.save(
這種類型的分析通過(guò)Profiles這個(gè)標(biāo)簽頁(yè)完成。詳細(xì)說(shuō)明參考我的博客：
An example of using Chrome Development Tool to analyze JavaScript garbage collector
想知道這種toString方法具體是怎么實(shí)現(xiàn)的么？
您得在Chrome開(kāi)發(fā)者工具里打開(kāi)選項(xiàng)Show native functions in JS profile，然后查看我的博客：
Use Chrome development tool to do self-study on some JavaScript function native implementation
當(dāng)我處理一些非常棘手的復(fù)雜問(wèn)題時(shí)，經(jīng)常使用到這個(gè)彩色打印的技巧。
我曾經(jīng)處理過(guò)一個(gè)incident，UI上顯示的列表一次從后臺(tái)讀取20條記錄，其中有一條記錄的guid和其實(shí)際內(nèi)容不匹配。我需要找到究竟是20條記錄里的哪一條記錄有錯(cuò)。如果用調(diào)試的方式，我設(shè)置斷點(diǎn)的函數(shù)在循環(huán)里被調(diào)用，斷點(diǎn)會(huì)不斷被觸發(fā)。我覺(jué)得很不耐煩，就采用了console.log的方式，打印每條記錄的guid和詳細(xì)內(nèi)容。當(dāng)我觀察這些打印輸出時(shí)，發(fā)現(xiàn)它們被淹沒(méi)在了UI5框架大量的log里。因?yàn)槲也榭醋约捍蛴〉膌og的同時(shí)，也需要結(jié)合UI5打印的log作為上下文來(lái)分析，因此我不能在Console標(biāo)簽頁(yè)里使用過(guò)濾的功能來(lái)使得只有我自己打印的log被顯示出來(lái)。
有什么辦法能讓我自己打印的log不會(huì)淹沒(méi)在UI5框架海量的log里呢？辦法就是使其成為“萬(wàn)花叢中一點(diǎn)綠"。
采用下列自定義函數(shù)myLog輸出的日志，在console里顯示的效果如下：
可以顯示得再花哨一點(diǎn)：
比如我想快速知道當(dāng)前UI一共有多少個(gè)button元素，并查看某些元素的詳情。采用類jQuery選擇器的語(yǔ)法$('button')即返回所有button元素。
還有其他很多小技巧，以及我最常用的快捷鍵組合，因?yàn)槠拗撇辉儋樖?，您可以在我的這篇博客里找到我使用Chrome開(kāi)發(fā)者工具的全部技巧。
上述就是小編為大家分享的Chrome開(kāi)發(fā)者工具如何理解了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
重慶分公司
重慶分公司
