前言工欲善其事，必先利其器。 在前端工作中，我們常常使用到Chrome開發(fā)者工具去做各種各樣的事情。 但是您真的了解這些開發(fā)者工具嗎？ 官方文檔還是挺詳細(xì)的：chrome-devtools文檔。 但是文檔中仍然會(huì)有一些功能沒有描述到或者被一筆帶過(guò)。 而我的這篇指南，會(huì)略過(guò)那些一目了然的功能以及一些容易替代的方案，寫一寫那些您可能不太了解的功能和文檔描述不清的功能。 閱讀本篇文章需要有一定的前端基礎(chǔ)。 媒體查詢功能Chrome開發(fā)者工具不僅可以調(diào)試web應(yīng)用，還可以模擬各種終端設(shè)備。 通過(guò)激活下圖中紅框部位開啟設(shè)備工具欄。
工具欄可以切換模擬各種型號(hào)的設(shè)備，也可以通過(guò)自適應(yīng)模式（Responsive）來(lái)調(diào)整視口。 這里通過(guò)更多工具中的Show media queries查看媒體查詢：
圖中藍(lán)色區(qū)塊為最大寬度斷點(diǎn)，黃色區(qū)塊為最小寬度斷點(diǎn)。 右鍵相應(yīng)區(qū)塊還可以跳轉(zhuǎn)到具體的css文件中的媒體查詢代碼。 模擬傳感器（地理位置，手機(jī)朝向）點(diǎn)擊更多工具中的Sensors（傳感器）
在這里可以模擬地理位置，手機(jī)朝向
生成頁(yè)面全尺寸快照?qǐng)D片通過(guò)下圖操作，可以生成一張頁(yè)面全尺寸的快照。
而它上面那個(gè)選項(xiàng)是生成當(dāng)前視口大小的圖片。 控制臺(tái)快速獲取元素面板的元素在元素面板上選中一個(gè)元素后： 細(xì)心的朋友會(huì)發(fā)現(xiàn)后面總是會(huì)出現(xiàn)一個(gè)== $0的提示。
此時(shí)在控制臺(tái)輸入$0,實(shí)際上就可以獲取到該元素。 通過(guò)這種方式，即使對(duì)于那些沒有class和id的元素，我們也可以在控制臺(tái)快速獲取并使用。 您可能會(huì)問(wèn)：那我要是想在控制臺(tái)調(diào)用多個(gè)這樣的元素呢？ 選中元素，右鍵，選擇選項(xiàng)：Store as global variable。 此時(shí)會(huì)將選中的元素存儲(chǔ)在一個(gè)臨時(shí)變量中，并自動(dòng)在控制臺(tái)輸出這個(gè)變量的名字。 頁(yè)面跳轉(zhuǎn)到元素面板指定的元素某些時(shí)候頁(yè)面元素出現(xiàn)BUG，不知道跑到哪去了，我們需要頁(yè)面跳轉(zhuǎn)到這個(gè)元素所在的位置。 如果我們知道它的id或者class，我們可以通過(guò)在控制臺(tái)輸入js命令去跳轉(zhuǎn)： 當(dāng)然也可以通過(guò)我們上面說(shuō)到的$0做到： 但是有個(gè)更簡(jiǎn)單的辦法，那就是右鍵元素面板上的指定元素，然后點(diǎn)擊Scroll into view的選項(xiàng)。 DOM斷點(diǎn)同樣右鍵元素面板上的元素，發(fā)現(xiàn)有個(gè)Break on的選項(xiàng)，這里可以打DOM斷點(diǎn)。
從上往下依次是子節(jié)點(diǎn)改變時(shí)斷下，元素屬性改變時(shí)斷下，節(jié)點(diǎn)移除時(shí)斷下。 打下斷點(diǎn)后，在左側(cè)會(huì)有斷點(diǎn)標(biāo)識(shí)，右側(cè)的DOM Breakpoints也會(huì)有相應(yīng)的顯示。
點(diǎn)擊DOM Breakpoints的相應(yīng)DOM斷點(diǎn)，元素面板也會(huì)定位到相應(yīng)元素。 當(dāng)js去修改指定元素的DOM結(jié)構(gòu)時(shí)，就會(huì)在修改的位置斷下。 這種斷點(diǎn)很方便查找到究竟是哪里對(duì)頁(yè)面元素進(jìn)行了修改。 元素事件偵聽器在元素面板選中元素，右側(cè)的Event Listeners會(huì)顯示該元素上的事件。
如果勾選了Ancestors（祖先），那么會(huì)展示祖先節(jié)點(diǎn)的事件，通常不需要勾選這個(gè)。 點(diǎn)擊事件右側(cè)的鏈接可以跳轉(zhuǎn)到附加事件的代碼。 通常一些js框架或庫(kù)（比如jQeury）會(huì)將原生DOM事件進(jìn)行封裝，而這會(huì)導(dǎo)致我們通過(guò)元素事件偵聽器跳轉(zhuǎn)到的代碼是這些庫(kù)文件的封裝代碼。 不過(guò)如果我們勾選了Framework listeners（框架偵聽器），那么就會(huì)跳轉(zhuǎn)到我們使用庫(kù)文件事件API的地方，而不是庫(kù)文件里。 Framework listeners對(duì)于jQuery這樣對(duì)事件進(jìn)行簡(jiǎn)單封裝的特別好用，但是對(duì)于React這種的話作用有限。 查看當(dāng)前頁(yè)面對(duì)css和js使用覆蓋率通過(guò)以下方式打開Coverage選項(xiàng)卡，這個(gè)可以查看當(dāng)前頁(yè)面對(duì)css和js的使用覆蓋率。
點(diǎn)擊左上角按鈕開始記錄：
如上圖可以單純查看css還是js，或者都查看。 選中單個(gè)文件，還可以查看具體是哪些代碼或者css沒有使用到。 記錄期間，我們做各種操作，都會(huì)影響到這個(gè)使用覆蓋率的變動(dòng)。 對(duì)于現(xiàn)在常用的單頁(yè)面應(yīng)用而言，尤為有效，因?yàn)榍袚Q頁(yè)面實(shí)際并沒有改變html，所以這個(gè)記錄一直有效。 對(duì)于以往采用jQuery的多頁(yè)面應(yīng)用而言，當(dāng)切換了頁(yè)面之后，記錄就重新開始了。 不過(guò)不管是單頁(yè)面還是多頁(yè)面，通過(guò)這種方式都是可以查看相應(yīng)的js和css的使用覆蓋率的，對(duì)于優(yōu)化css和js，刪除無(wú)用的廢代碼，以及代碼文件拆分都很有幫助。 使用本地文件調(diào)試生產(chǎn)環(huán)境網(wǎng)站代碼我們調(diào)試生產(chǎn)環(huán)境的BUG，經(jīng)常需要修改樣式或者js，但是頁(yè)面一刷新這些東西就又還原了。 所以這里有個(gè)神技，可以將生產(chǎn)環(huán)境的引用文件進(jìn)行本地化，然后修改本地化后的文件進(jìn)行調(diào)試。 首先我們需要打開在Source面板下左側(cè)的Overrides選項(xiàng)卡，選擇一個(gè)本地文件夾作為覆蓋文件夾。
這里我選擇了一個(gè)名為test的文件夾。
然后我們切換到Source面板的Page選項(xiàng)卡，選中某個(gè)文件，然后右鍵，選中選項(xiàng)Save for overrides。 此時(shí)切回Overrides選項(xiàng)卡，發(fā)現(xiàn)test文件夾中已存在相關(guān)的js文件。 修改該文件的js內(nèi)容，再保存，即使刷新之后修改后的內(nèi)容依然會(huì)生效，并且頁(yè)面會(huì)加載我們修改之后的js文件。 Animation動(dòng)畫檢查器通過(guò)下圖方式可以打開Animation檢查器：
這個(gè)檢查器自動(dòng)開始監(jiān)聽頁(yè)面上的動(dòng)畫，但是這個(gè)時(shí)候動(dòng)畫已經(jīng)加載完了，監(jiān)聽不到，需要我們重新刷新頁(yè)面才行。 選中其中的一個(gè)動(dòng)畫，會(huì)顯示如下圖的效果：
通過(guò)它我們可以查看和調(diào)整CSS動(dòng)畫和過(guò)渡的各種效果。 Rendering選項(xiàng)卡（高亮重排重繪合成層，fps和gpu占用，滾動(dòng)優(yōu)化，媒體查詢模擬如打印）Rendering選項(xiàng)卡，顧名思義是做一些渲染相關(guān)的事。 通過(guò)下圖方式打開Rendering選項(xiàng)卡：
下面是選項(xiàng)卡的界面：
保留頁(yè)面控制臺(tái)記錄和網(wǎng)絡(luò)請(qǐng)求記錄Chrome的Console面板和Network面板都有Preserve Log這個(gè)選項(xiàng)，當(dāng)勾選了這個(gè)選項(xiàng)后，會(huì)保留當(dāng)前選項(xiàng)卡的控制臺(tái)和請(qǐng)求記錄。 對(duì)于涉及到多個(gè)頁(yè)面間跳轉(zhuǎn)的問(wèn)題，這個(gè)功能很有幫助。 切換控制臺(tái)的執(zhí)行環(huán)境（iframe中運(yùn)行腳本）Console面板上面有個(gè)名為Javascript contexts的選擇器，一般值默認(rèn)為top。 top表示當(dāng)前執(zhí)行環(huán)境為當(dāng)前頁(yè)面，而如果想切換到當(dāng)前頁(yè)面各個(gè)iframe，就需要進(jìn)行相應(yīng)切換。 比如，在博客園首頁(yè)，我們可以切換到各個(gè)廣告iframe的運(yùn)行環(huán)境。
與此相關(guān)的一個(gè)功能是，只輸出所選運(yùn)行環(huán)境的打印日志：
點(diǎn)擊右上角齒輪打開控制臺(tái)設(shè)置，勾選Selected context only即可。 控制臺(tái)的實(shí)時(shí)表達(dá)式在控制臺(tái)面板有個(gè)眼睛一樣的圖標(biāo)，名為：Create live express（創(chuàng)建實(shí)時(shí)表達(dá)式）。 點(diǎn)擊它創(chuàng)建一個(gè)入上圖紅框所示的小面板。
輸入表達(dá)式可以自動(dòng)監(jiān)控這個(gè)表達(dá)式。 比如如果實(shí)時(shí)表達(dá)式為a，如果a的值變動(dòng)了，那么這個(gè)實(shí)時(shí)表達(dá)式的值也會(huì)變動(dòng)。 控制臺(tái)的API我這里直接給開發(fā)者文檔的地址了，畢竟有點(diǎn)多，建議了解一下，知道有哪些功能即可。 比如monitor（監(jiān)聽函數(shù)執(zhí)行）和monitorEvent（監(jiān)聽事件）還是有些用處的。 可重復(fù)執(zhí)行的控制臺(tái)腳本片段如果您在調(diào)試BUG時(shí)總是在控制臺(tái)多次重復(fù)執(zhí)行大段的相同的JS代碼。 那么您可以考慮用Snippet（片段）。 這個(gè)東西雖然作用于控制臺(tái)，但是卻不是在Console面板，而是在Source面板。
如圖所示，我們通過(guò)點(diǎn)擊New snippet新建了一個(gè)叫TestSnippet的代碼片段。 然后我們可以點(diǎn)擊右下角的運(yùn)行或者用Ctrl+Enter在控制臺(tái)運(yùn)行這段代碼片段。 XHR/Fetch 斷點(diǎn)在Sources面板，右側(cè)會(huì)顯示XHR/fetch Breakpoints。
點(diǎn)擊加號(hào)，可以輸入字符，如果輸入mynameis，那么就會(huì)在ajax請(qǐng)求或者fetch請(qǐng)求的URI包含mynameis時(shí)斷下。 如果不填，那么也會(huì)新增一行，表示斷下所有的ajax請(qǐng)求和fetch請(qǐng)求。 事件偵聽器斷點(diǎn)在Sources面板，右側(cè)會(huì)顯示Event Listener Breakpoints。 顧名思義，用來(lái)給相應(yīng)事件打斷點(diǎn)的。 這里基本上收錄了所有的事件，連WebAudio，Worker，Timer的都有。 異常斷點(diǎn)同樣在Sources面板右側(cè)會(huì)顯示異常斷點(diǎn)的圖標(biāo)： 激活后可以在各個(gè)未捕獲的異常處斷下，激活后還可以通過(guò)進(jìn)一步勾選 Pause on caught exceptions在已捕獲的異常處也斷下。
腳本黑盒化（Blackbox script）在Source面板，選中某js腳本文件后右鍵，或者在調(diào)試的堆棧中右鍵，都會(huì)出現(xiàn)一個(gè)Blackbox script選項(xiàng)。 點(diǎn)擊這個(gè)選項(xiàng)，可以讓我們?cè)谡{(diào)試時(shí)認(rèn)為此腳本總是對(duì)的，忽略此腳本，不論是調(diào)試過(guò)程或者堆棧都不會(huì)進(jìn)入這個(gè)腳本。 一般用來(lái)黑盒化一些js庫(kù)，比如jQuery或者lodash之類的。 網(wǎng)絡(luò)面板的截圖功能Network面板中有個(gè)截屏功能，開啟之后再重新加載頁(yè)面，就會(huì)如下圖顯示各個(gè)時(shí)間段下的截圖。
雙擊這些縮略圖，可以放大查看當(dāng)時(shí)頁(yè)面的具體樣子。 單擊縮略圖，可以顯示當(dāng)前縮略圖時(shí)間點(diǎn)前發(fā)送的所有請(qǐng)求。 網(wǎng)絡(luò)面板關(guān)于網(wǎng)絡(luò)請(qǐng)求的一些優(yōu)化同域名請(qǐng)求數(shù)量限制（HTTP/1.0或HTTP/1.1） 如果網(wǎng)絡(luò)請(qǐng)求出現(xiàn)排隊(duì)的情況，那么說(shuō)明是在單個(gè)域上提出了太多請(qǐng)求。 在HTTP/1.0或HTTP/1.1連接上，Chrome每個(gè)主機(jī)最多允許六個(gè)同步TCP連接。 想要優(yōu)化這一點(diǎn)，可以將關(guān)鍵請(qǐng)求提前，不關(guān)鍵請(qǐng)求延后。 如果都是關(guān)鍵請(qǐng)求，那么可以嘗試使用HTTP 2。（在Network面板可以展示Protocol顯示） 如果條件有限，可以將這些請(qǐng)求放在不同的域名上，然后用nginx指向同一個(gè)源頭，這樣同樣可以解決這個(gè)問(wèn)題 請(qǐng)求第一個(gè)字節(jié)的時(shí)間過(guò)長(zhǎng) Time To First Byte (TTFB) 我們查看一下博客園首頁(yè)的請(qǐng)求。
可以看見每個(gè)請(qǐng)求后面都有一個(gè)綠色的區(qū)域，這個(gè)綠色區(qū)域表示每個(gè)請(qǐng)求的Time To First Byte (TTFB)，即請(qǐng)求第一個(gè)字節(jié)的時(shí)間。 點(diǎn)開一個(gè)具體的請(qǐng)求，看一下：
通常原因是瀏覽器與服務(wù)端的請(qǐng)求連接速度很慢，或者服務(wù)端的請(qǐng)求響應(yīng)過(guò)慢。 簡(jiǎn)單來(lái)說(shuō)，就是網(wǎng)絡(luò)連接慢，或者是服務(wù)端代碼寫得太辣雞。 如果是網(wǎng)絡(luò)連接慢，可以用CDN，或者換個(gè)近一些的服務(wù)器。 如果是服務(wù)端響應(yīng)慢，那么可以考慮緩存，或者優(yōu)化接口，那就是服務(wù)端的事情了。 內(nèi)容下載慢 這里直接用Chrome官網(wǎng)的圖片吧：
一般表現(xiàn)于請(qǐng)求的下載時(shí)間過(guò)長(zhǎng)，也就是請(qǐng)求后面跟著的藍(lán)條。 原因基本上就是js或者其它的一些資源文件太大了，導(dǎo)致下載過(guò)慢。 因?yàn)橛玫氖?00M的網(wǎng)，所以我比較難找這樣的例子，不過(guò)用瀏覽器的模擬3G網(wǎng)的話，其實(shí)博客園很多那種二次元風(fēng)格，自帶一張二次元大背景的博客都會(huì)出現(xiàn)這種現(xiàn)象。 這種建議將圖片尺寸壓縮一下。 網(wǎng)絡(luò)面板時(shí)間分解階段說(shuō)明這里列出Timing選項(xiàng)卡可以看到的各個(gè)時(shí)間階段：
查看請(qǐng)求的依賴關(guān)系各個(gè)請(qǐng)求都有著它們各自的依賴關(guān)系，最常見的是圖片、js和css依賴html請(qǐng)求。 只有在html請(qǐng)求完畢才會(huì)在上面慢慢加載這些資源文件。 同樣以博客園為例：
我們按住Shift，鼠標(biāo)浮動(dòng)到analytics.js這個(gè)請(qǐng)求上，可以看到www.cnblogs.com那個(gè)請(qǐng)求變綠了，collect那個(gè)請(qǐng)求變紅了。 這個(gè)表示analytics.js這個(gè)請(qǐng)求，依賴于www.cnblogs.com，而collect這個(gè)請(qǐng)求依賴于analytics.js。 WebSocket消息的監(jiān)控如下圖：
我們通過(guò)Network面板上的類型篩選到WebSocket請(qǐng)求，點(diǎn)開這個(gè)請(qǐng)求，我們可以看到相應(yīng)的消息。 Audit面板關(guān)于Audit面板這里不講使用方法，主要是太多了。 但是這個(gè)東西確實(shí)很方便，這里是：參考文檔。 這里要說(shuō)的是這個(gè)東西需要FQ，如果翻不了，可以裝個(gè)LightHouse的擴(kuò)展插件，如果下不了或者不想更新麻煩，有個(gè)更好的辦法。 使用微軟的Edge，基于Chromium的那個(gè)，然后在它的商店裝個(gè)SiteTool的擴(kuò)展插件即可。 Performance面板性能分析Performance面板主要是用來(lái)分析運(yùn)行時(shí)的性能。加載的用Audit即可。 關(guān)于怎么使用這里就太多了，咱們先挑最簡(jiǎn)單的一個(gè)流程來(lái)講。 我們首先看一下一個(gè)性能良好的結(jié)果圖：
然后我們?cè)賹PU變慢6倍，再看一下性能不好的結(jié)果圖：
FPS概覽 對(duì)比第一張圖，我們發(fā)現(xiàn)第二張圖關(guān)于FPS那一行出現(xiàn)了很多紅色，并且綠色的高度明顯降低。 這表示它的FPS值很低，一般給用戶的感受就是很卡。出現(xiàn)了紅色表示會(huì)影響到用戶體驗(yàn)。 CPU概覽 同時(shí)我們?cè)賹?duì)比上面兩張圖，發(fā)現(xiàn)第一張圖的CPU那行顏色區(qū)域都很低，而第二張圖CPU那塊都占滿了，這表示CPU占用率高。 FPS詳情 我們之前只是對(duì)哪個(gè)時(shí)間段的FPS低有了一個(gè)大致的了解，如果我們想要了解具體的情況，我們可以將鼠標(biāo)浮動(dòng)到Frames那一行，這樣可以了解到具體的幀的FPS。 同樣點(diǎn)擊選中那一幀，還可以在下方的摘要（Summary）中查看具體的情況。
CPU工作詳情 選中Main那一行，下方的摘要就會(huì)顯示主線程CPU各個(gè)活動(dòng)的耗時(shí)。
但是即使如此，可能您也只能知道大致是哪個(gè)階段出了問(wèn)題，比如渲染還是腳本執(zhí)行時(shí)間過(guò)長(zhǎng)。 如果想要快速定位，您可以展開Main查看具體的工作詳情。
在Main那一行的展開詳情中，可能會(huì)出現(xiàn)一些紅色的三角符號(hào)或者紅色區(qū)塊，點(diǎn)擊選中之后會(huì)有相應(yīng)的優(yōu)化提示，下方摘要也會(huì)展示出來(lái)。 比如上圖中就是因?yàn)閺?qiáng)制回流導(dǎo)致的性能瓶頸。 可以看一下摘要中紅框中的鏈接，很方便地告訴了我們到底是哪段代碼出了問(wèn)題，點(diǎn)擊進(jìn)去：
我們可以發(fā)現(xiàn)是調(diào)用了offsetTop導(dǎo)致的回流，然后優(yōu)化這部分代碼即可。 至于具體的優(yōu)化我們這里就不講了，關(guān)于性能優(yōu)化可以參考一下:Web Fundamentals的Performance。 關(guān)于更多性能面板的介紹可以看下：如何使用Timeline 和 Timeline事件參考。 這里說(shuō)個(gè)小技巧，在Timeline上可以按Ctrl+F，然后搜索事件，這樣可以在大量的事件中快速定位想找的事件。 JavaScript分析器還是More tools中打開JavaScript Profiler面板，怎么打開這里不講了，操作好多遍了。 然后記錄下頁(yè)面一段時(shí)間的js執(zhí)行情況。
我們看到的上圖就是記錄結(jié)果，默認(rèn)是分析模式是Heavy (Bottom Up)。 這個(gè)模式下可以看到哪些函數(shù)對(duì)性能影響最大并能夠檢查這些函數(shù)的調(diào)用路徑。 分析模式有下面三種：
Heavy (Bottom Up)和Tree (Top Down)比較簡(jiǎn)單，這里直接略過(guò)。 Chart的火焰圖如下：
火焰圖越高的部分表示函數(shù)調(diào)用的堆棧越高，但是高度并不代表什么。 這樣看圖肯定是看不出來(lái)什么，所以我們需要選中一塊區(qū)域放大，如下圖：
色塊越寬表示該函數(shù)的執(zhí)行時(shí)間越長(zhǎng)，而這個(gè)才表示該函數(shù)可能需要優(yōu)化。 鼠標(biāo)浮動(dòng)到色塊上可以看到函數(shù)執(zhí)行的具體信息，這里只說(shuō)幾個(gè)重要的點(diǎn)：
點(diǎn)擊相應(yīng)色塊可以進(jìn)到具體的函數(shù)中查看。 Memory面板Memory面板主要用來(lái)監(jiān)控頁(yè)面的內(nèi)存使用情況，并解決一些內(nèi)存泄漏或者頻繁的垃圾回收等問(wèn)題。 Heap snapshot（堆快照） 使用堆快照一般用來(lái)解決內(nèi)存泄漏的問(wèn)題。 我們?cè)趦?nèi)存面板Take snapshot之后，可以看到這樣一個(gè)畫面：
然后我們?cè)谏戏捷斎?strong>Detached，會(huì)篩選出下面的結(jié)果：
這里可以看看到底是哪些DOM節(jié)點(diǎn)沒有釋放。 官網(wǎng)文檔上顯示如果DOM節(jié)點(diǎn)沒有被引用，那么應(yīng)該是紅色的，但是實(shí)際上不是如此。 不過(guò)這個(gè)功能還是有些用處的，選中相應(yīng)的節(jié)點(diǎn)可以看看到底是哪些變量引用了，然后看是否能消除這些變量。 這里得注意圖中的Shallow Size表示對(duì)象自身占用內(nèi)存的大小，Retained Size表示通過(guò)保持對(duì)其他對(duì)象的引用隱式占用的總內(nèi)存大小，而Distance是對(duì)象到GC roots（如window或者DOM樹）的距離。 Allocation instrumentation on timeline（時(shí)間線上的內(nèi)存分配工具） 翻譯起來(lái)有點(diǎn)繞口，實(shí)際上就是一個(gè)用來(lái)按時(shí)間查看內(nèi)存分配情況的工具。 我們直接看一下檢測(cè)結(jié)果：
我們可以看到時(shí)間軸上有不少柱子，這些柱子高度會(huì)變，表示所在的那個(gè)點(diǎn)分配的對(duì)象大小。 我們可以看到圖中我們選中的那個(gè)時(shí)間點(diǎn)分配的內(nèi)存大概為384byte，旁邊那個(gè)100B是一個(gè)參照線。 柱子的顏色代表這些對(duì)象是否被回收了，藍(lán)色代表還存在，灰色代表被回收了。 Application面板這個(gè)面板內(nèi)容多，但是簡(jiǎn)單易懂，本來(lái)想著寫點(diǎn)的，太簡(jiǎn)單就算了。 主要就是關(guān)于存儲(chǔ)和緩存的。 除此之外，就是有個(gè)關(guān)于PWA的調(diào)試，這里可以參考：調(diào)試 Progressive Web App。 我對(duì)這個(gè)涉獵較少，就不班門弄斧了。 Security面板這個(gè)面板主要是看是否https的，有用的時(shí)候是有用，沒用的時(shí)候是真沒用。 總結(jié)學(xué)習(xí)Chrome開發(fā)者工具不僅能提高我們工具的使用效率，這其中涉及到的很多前端知識(shí)點(diǎn)也能令人眼界大開。 在閱讀Chrome的開發(fā)者工具文檔時(shí)有很多缺失和不同步，這是因?yàn)樗诓粩嗟匮葸M(jìn)，包括我現(xiàn)在提到的一些功能也許在將來(lái)有一天就消失或者增強(qiáng)了。 所以我覺得對(duì)于這份指南您可以當(dāng)做一份索引，有所了解，但不必記住，只要在遇到問(wèn)題的時(shí)候能記起來(lái)我可以用什么工具來(lái)處理就夠了。 希望這篇博客能幫助到您,也希望您能對(duì)疏漏之處指正一二。 |
|
|
