tools.gif

前言

相信無論是對于身居一線的coder,還是退居多年的老司機managers來說,對于調(diào)試程序是不陌生的,對于web端的開發(fā)者來說呢,我們每天都會與瀏覽器進行打交道,并且在chrome,firefox,IE等主流瀏覽器進行大戰(zhàn),為了保持各個瀏覽器顯示的一致,無論是選擇優(yōu)雅降級還是漸進增強,有時是必須得做兼容性處理的,甚至有的boss是要求開發(fā)者供著其中的三個祖宗(IE6,7,8)不放的,那么調(diào)試程序,查看代碼執(zhí)行狀態(tài)等就很重要了,對于不同種類的程序代碼跑在不同的平臺上,調(diào)試手段方法也各有不一,我們今天呢,只關(guān)注web端,也就是前臺代碼(指的是html,css,js)跑在瀏覽器上,我們是可以在瀏覽器上對能看到的代碼進行調(diào)試的,至于服務器端的代碼就無能為力了,但是我們依然可以通過瀏覽器端反饋,分析結(jié)果,也是可以去后端更改有問題的代碼的,熟練的使用瀏覽器開發(fā)者工具進行調(diào)試代碼毫無凝問是自我進階的必經(jīng)之路,下面就我平時的學習,跟大家分享一下使用心得,一起來領(lǐng)略瀏覽器開發(fā)者工具的這一神兵利器

主流瀏覽器下各快捷鍵的使用

chrome瀏覽下快捷鍵

windows下常用鍵

你可以按F1鍵查看幫助文檔,一樣有mac的快捷鍵,我沒有用過mac的電腦,所以土豪的朋友們可以自行測試，至于firefox與chrome瀏覽器一些快捷鍵常用的都差不多,如果不按上面的F1在幫助文檔里查找或者懶于百度Goolge,也可以直接從開發(fā)者工具中查找:如下步驟操作
按鍵盤上的F12或者ctrl+shift+J鍵-->shortcuts即可查找使用眾多的快截鍵

chrometools.gif

熟練很好的使用瀏覽器的一些快捷鍵并不是為了在別人面前炫技能,其實這也沒有什么,只不過是習慣使用了這些快捷鍵,一定會減少很多的體力勞動,把更多時間和精力放在編碼上,而且使用快捷鍵是明顯效率高很多的,就像使用慣了linux下的命令行操作,就會覺得使用windows是變傻了似的,只是命令行下有些非正常人難以接受而已罷了,加大了我們的記憶負擔,要記一些指令,對于快捷鍵,不用刻意的去記,多用用就熟悉了的,平時使用當中刻意的去練習就好了,鍵盤俠遠比鼠標手快的多,盡量的少用鼠標,多用鍵盤,這也一定程度上是為了增強鼠標的壽命啊,想想你換鍵盤的次數(shù)與換鼠標的次數(shù),中間的對比,就知道了,這里推薦使用機械鍵盤,啪啪啪起來,絕對飛的一樣,而且基本上鍵盤是很難壞的

使用快捷鍵飛一樣的實現(xiàn)切換.gif

javascript控制臺及面板工具

開發(fā)者工具面板

• Element:查找html里面的任意一元素,手動修改任一元素的屬性和樣式且能實時在瀏覽器里面得到反饋,查看盒模型型等,實時的調(diào)試css樣式是非常有用的
• console:記錄開發(fā)者開發(fā)過程中的日志信息，且可以作為與JS進行交互的命令行Shell,一般js代碼報錯都是根據(jù)這里的信息反饋,定位bug原因與所在位置,后面會著重學習
• Sources:斷點調(diào)試JS,這個斷點調(diào)試程序很重要,可以查看程序代碼執(zhí)行的每個過程，查看watch expression(通過表達式查看當前內(nèi)存中的值),call stack(查看調(diào)用棧,開啟async，可以查看異步調(diào)用棧,在調(diào)試ajax的時候用處很大),scope作用域(作用域鏈上的變量,學習作用域鏈查看變量時,分析閉包時,就相當有用了)，事件監(jiān)聽Event listener等很有幫助的,單步調(diào)試,以及查看調(diào)試內(nèi)存當中的對象
• Network:從發(fā)起網(wǎng)頁頁面請求Request后分析HTTP請求后得到的各個請求資源信息（包括狀態(tài)、資源類型、大小、所用時間等）,可以根據(jù)這個進行網(wǎng)絡性能優(yōu)化,并且也是抓包查看每個請求,前后端聯(lián)調(diào)必殺技
• Timeline(performance):記錄并分析在網(wǎng)站的生命周期內(nèi)所發(fā)生的各類事件,分析渲染,js執(zhí)行的每個階段,性能分析的依據(jù)利器
• Profiles:記錄JS CPU執(zhí)行時間細節(jié)、顯示JS對象和相關(guān)的DOM節(jié)點的內(nèi)存消耗,記錄內(nèi)存的分配細節(jié),也是為了分析性能而生的
• Application:記錄網(wǎng)站加載的所有資源信息，包括存儲數(shù)據(jù)（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies,Frames）、緩存數(shù)據(jù)、字體、圖片、腳本、樣式表等,有時候我們扣一個網(wǎng)站的具體圖片,除了通過審查元素鼠標探測方式保存圖片,這種方式也是可以的
• Security:判斷當前網(wǎng)頁是否安全
• Audits:對當前網(wǎng)頁進行網(wǎng)絡利用情況、網(wǎng)頁性能方面的診斷，并給出一些優(yōu)化建議。比如列出所有沒有用到的CSS文件等

Element面板使用:

• 雙擊DOM樹視圖里面的節(jié)點，可以實時編輯標簽屬性，修改的效果會事實的發(fā)生變化,整個前端人都會用的,注意的是有橫向上下的調(diào)試和左右的調(diào)試方式,依據(jù)個人習慣而定,該面板下可以對DOM元素的Style樣式,Event Listener事件監(jiān)聽,DOM Breakpoints斷點,properties屬性(包括標簽屬性,元素,節(jié)點node,Object進行查看)

  
  
  Element元素面板的使用

console面板的使用

• 一點小黑科技,神秘的使出黑色控制面板與別人與眾不同

• F12-->豎著的三個點點-->settings--->preference--->theme--->Dark

  
  
  調(diào)出黑色的控制臺面板
• 代碼格式化,對于一些未裝任何插件格式工具

• 利用控制臺自動的格式化

  
  
  利用控制臺自動的進行格式化
• 安裝jsonView自動格式化代碼(或者你找網(wǎng)上的其他工具也行)
• 應用商店搜索jsonView插件或者百度下載jsonView插件,直接拖入瀏覽器安裝添加為可拓展程序即可,對于有的小伙伴不知道如何快速的到應用商店里面,你可以右鍵鼠標菜單->添加應用快捷方式 或者點擊右上方三個小點---->更多工具--->拓展程序--->更多拓展程序,可以找到應用商店
  當然前提是:能翻得了墻,通過這種方式,任何瀏覽器什么插件都是可以找到的
  
  如何線上查找安裝jsonView插件.gif
  
  如下安裝jsonView插件json格式的代碼直接就格式化了
  
  安裝jsonview后json格式的代碼直接會被格式化.gif
• 格式化css,js代碼,無論你源代碼什么格式?jīng)]弄好,點擊下方的{},都可以一鍵把代碼進行格式化對齊,Firefox開發(fā)者工具中啟用pretty-printing,選擇該工具的Debugger標簽頁,顯示當前網(wǎng)頁頁面加載在內(nèi)存中的各個javascript文件,依然可以選擇那個{}標識可以格式化代碼,IE和Opera瀏覽器開發(fā)者工具中也有此功能,但是json格式我試了一下卻無法格式化,這里的格式化代碼都是便于我們調(diào)試,查看,是更改不了源碼本身的格式問題的,不過一般的IDE工具都會配備代碼格式化的功能
  
  格式化cssJS代碼.gif

查看偽類等元素狀態(tài),如下gif操作所示

查看a偽類等元素的狀態(tài).gif

console控制面板

• console.info():表示該類消息只是一般性的內(nèi)容
• console.debug():表示該消息輔助性的進行錯誤的調(diào)試
• console.warn():表示可能已經(jīng)出現(xiàn)了一個問題,此消息會指出該潛在問題的情況
• console.error():表示已經(jīng)出現(xiàn)了一個錯誤,隨之出現(xiàn)的消息包含該錯誤的具體情況
• console.log():顯示一般的基本日志信息,不僅可以向控制臺中輸出文字還可以輸出文字,樣式,圖片
• console.group():輸出一組信息的開頭
• console.groupEnd():結(jié)束一組輸出信息
• console.table(obj);可傳入json對象,或數(shù)組以表格的形式輸出,相比較傳統(tǒng)的樹形方式輸出,這種輸出方式適合內(nèi)部元素排列整齊的對象或者數(shù)組,否則會出現(xiàn)很多的undeifned
• console.count():當你想統(tǒng)計代碼被執(zhí)行的次數(shù)
• console.dir():直接將該DOM結(jié)點以DOM樹的結(jié)構(gòu)進行輸出，可以詳細查對象的方法等,比for-in方便得多
• console.time("time") 計時開始
• console.timeEnd("time"):計時結(jié)束
• console.profile和console.profileEnd配合一起使用來查看CPU使用相關(guān)信息
• console.trance():用來追蹤函數(shù)的調(diào)用過程,可以將函數(shù)的被調(diào)用過程清楚的輸出到控制臺上,在調(diào)試JavaScript程序時，有時需要打印函數(shù)調(diào)用的棧信息
• console.assert():對輸入的表達式進行斷言，只有表達式為false時，才輸出相應的信息到控制臺
• console.clear()或ctrl+l:清屏操作

• console.dirxml:用來顯示網(wǎng)頁的某個節(jié)點（node）所包含的html/xml代碼

  
  
  console輸出.png
  
  
  console.log.png

console.table().png

consoleCount.png

console.dir與console.time.png

profile.gif

console.trace.png

輸出DOM節(jié)點顯示網(wǎng)頁的某節(jié)點以及清除控制臺.gif

Sources控制面板使用

• Source maps:以層級化的目錄結(jié)構(gòu)視圖顯示所加載的各個文件,這些文件用于渲染標記當前網(wǎng)頁頁面
  啟用步驟:開發(fā)者工具欄-->單擊settings按鈕圖標,勾選preferences中的Enable CSS source maps,不過默認瀏覽器就自動給你勾選上了,這里提出來是有的小伙伴電腦的瀏覽器這里沒有勾選上,需要自己手動的勾選就好了

  
  
  層級化目錄結(jié)構(gòu)視圖顯示出所加載的各個文件.gif

觀察正在運行的js代碼,分析流程,并打斷點分析調(diào)試

斷點工具介紹.png

在未對js代碼進行設置斷點前跑一遍程序,下面是測試的一簡易js代碼

               * 設置斷點調(diào)試,進行變量分析以及查看狀態(tài)
               * 
               * @global:{oBtn=null,name="xiaomei"}
               * @event:click
               * @function fun
               * @localVariable:{name=xiaohuan}
               * 
               */
               var oBtn = null,
                name = "xiaomei"
               window.onload = function(){
                   oBtn = document.getElementById("btn"); // 獲取元素
                   oBtn.onclick = fun;                    // 添加事件
               }
               // 事件函數(shù)
               function fun(){
                    var name = "xiaohuan";
                    oBtn.style.cssText = "background:#DE5044;color:#fff;border-radius:4px;outline:none;padding:8px"
                    for(var i = 0;i<5;i++){
                      (function(i){
                           setTimeout(function(){
                              console.log(i,this,this.name,this==window);
                           },10);
                       })(i);
                    }
              }
    </script>

html內(nèi)容代碼
<input type="button" value="點我觸發(fā)事件" id="btn" name="">
F12(打開控制臺)--->F8(解析器執(zhí)行代碼)-->ctrl+F5(刷新頁面)--->F10(逐步執(zhí)行代碼,每按一次,就往下執(zhí)行一次)

未設置斷點情況跑一遍程序.gif

設置斷點.gif

從上面的代碼先從未斷點調(diào)試代碼執(zhí)行過程到設置斷點調(diào)試一目了然,注意你在實際操作中,要注意看右側(cè)欄CallStack,scope等數(shù)值的變化,其中有兩種插入斷點的方法,就是一旦頁面進行加載或刷新后,執(zhí)行到特定的代碼行時,頁面就會暫停,可以由你來控制該位置javascript代碼的運行情況,在代碼中插入斷點的第一種技術(shù)是添加一行代碼,以此來迫使在代碼文件的該行位置暫停執(zhí)行,要實現(xiàn)這一點,你可以在你想要的執(zhí)行代碼的位置上

添加debugger;語句,在代碼執(zhí)行時,開發(fā)者工具將會在這一位置暫停,使你能控制執(zhí)行的流程,還能在代碼執(zhí)行的某一時刻觀察任一全局或變量的值,注意你在正式發(fā)布上傳代碼前,要去掉這個debugger語句,另外一種設置斷點的方式就是上面的gif圖所示,在代碼區(qū)塊內(nèi),選中代碼行號表示設置斷點,在點一下表示取消斷點,在你所希望暫停的位置上代碼執(zhí)行暫停的位置

直接在代碼的行號上單擊鼠標左鍵即可,它的標記會出現(xiàn)在該代碼行號的旁邊,這表示已經(jīng)設置了一個斷點,執(zhí)行就會暫停,等待你進行下一步操作,斷點設置之后,大多數(shù)瀏覽器開發(fā)者工具都可以讓你右擊該斷點,可以編輯應用至該斷點的條件,可以使你指定觸發(fā)該斷點前,應用程序處于何種確切的狀態(tài), 如果你想要在一段循環(huán)語句中設置斷點,但又只希望當代碼到達該循環(huán)的某一特定的迭代次數(shù)時才讓斷點暫停代碼的執(zhí)行,那么斷點的條件設置就顯得特別有用

在代碼執(zhí)行過程中,當在斷點上暫停時,你可以檢查由該短短包含的代碼內(nèi)的任何變量的值,直接把鼠標懸停在變量名的上方,對于被高亮顯示的變量,會有一個提示框出現(xiàn)

當中顯示著變量的值,而且還讓你拓展對象,來展示當中各項屬性的值,當暫停時,你也是可以在js控制臺,并使用數(shù)據(jù)輸入?yún)^(qū)域,在當前斷點的運行壞境下,執(zhí)行額外的代碼,或查詢特定變量的值,此方法對于強行使函數(shù)返回不同值的情況以及確保特定的條件語句在代碼中運行的流程中被執(zhí)行的情況來說是很有用的

當出現(xiàn)斷點暫停時,在右方的面板中就會顯示出執(zhí)行的watch，call stack,scope等列表菜單,可查看包括當前暫停所進入的調(diào)用函數(shù)的名稱,全局變量和該函數(shù)局部作用域內(nèi)的變量列表,以及這些變量當前值,比如,當在一個函數(shù)內(nèi)暫停時,你可以訪問在該函數(shù)內(nèi)聲明的所有比那輛以及一些特殊的變量,比如一些參數(shù),會顯示出執(zhí)行時所有傳給該函數(shù)的參數(shù),這使得開發(fā)者是非常清楚代碼的執(zhí)行過程的,可以判斷出這些變量是否符合預期,在需要的時候,進行深度的調(diào)試

執(zhí)行一旦暫停,你也會發(fā)現(xiàn)開發(fā)者工具窗口里所顯示的js代碼上方的工具欄中,continute按鈕已經(jīng)處于可訪問狀態(tài)了(類似一個播放的按鈕F8鍵盤可快速調(diào)出執(zhí)行),當點擊該按鈕時,代碼將會恢復執(zhí)行,直到下一個斷點,注意它的右邊還有五個step動作按鈕,在上方的代碼調(diào)試截圖中也有說明,它們能夠使你在不必要設置兩外的斷點的情況下就能逐條語句的繼續(xù)執(zhí)行,進而使你看到在變量上所實施的操作

即使你事先不懂程序的執(zhí)行流程,從代碼的斷點調(diào)試中也能看出js解析器所得出代碼執(zhí)行的整個過程,Parse script execution(F8快捷鍵,解析腳本執(zhí)行),Step Over next function call(F10快捷鍵,下一個函數(shù)調(diào)用),step into next function call(F11快捷鍵),step out of current function(shift+F11),Deactiveable/Activate breakpoints(禁用/激活斷點,Ctrl+F8)

注意遇到函數(shù)的調(diào)用,它不會進入被調(diào)用的函數(shù)體內(nèi),如果你更關(guān)心所調(diào)用的函數(shù)的返回值,而不是該函數(shù)體內(nèi)的代碼,那么這個功能也是很有用的,另一個按鈕在執(zhí)行下一條語句時,如果遇到函數(shù)調(diào)用,它會進入到函數(shù)體內(nèi)

并暫停在該函數(shù)的調(diào)用(使你的代碼流程進入函數(shù)體)的下一條語句上,通過以上五個按鈕的使用,可以跟蹤代碼的執(zhí)行流程,同時觀察局部變量和全局變量中所保存的值的情況,以幫助在當前瀏覽器所運行的網(wǎng)頁頁面的上下文壞境中找出該代碼中所存在的問題,并實現(xiàn)調(diào)試

小結(jié):注意事項

• 打斷點,其實很簡單,最主要的問題是在打斷點的基礎上進行排查出有問題代碼,定位Bug,并修復
• 如上圖所示,是一個點擊按鈕的操作,如果點擊按鈕,頁面沒有反應,一些數(shù)據(jù)或等js效果沒有出來,首先想到的是,獲取元素是否是準確,獲取id,document.getElementById("id名");注意要與jQuery區(qū)別,jQuery中獲取Id名前要加#號,獲取標簽名document.getElementsByTagName("標簽名");若用jQuery中獲取class,有點號與無點號的區(qū)別,點擊事件是否用得正確,原生js中對象.onclick = function(){},若是jQuery,$("對象").click(function(){});想要驗證,那么可以在點擊事件函數(shù)體內(nèi)打斷點,注意不要在添加事件函數(shù)處打斷點,然后在點擊按鈕時結(jié)合console.log(),分析輸出結(jié)果,若依然有問題,那么就要逐一的檢查選擇器,語法是否正確
• 注意在你進行斷點測試完后,一定要把所要測試的代碼塊斷點標記給去掉的,否則你有時困惑怎么剛剛數(shù)據(jù)還加載進來了,進行斷點調(diào)試后,瀏覽器卻什么都沒有,一片空白的,其實是你剛設置的斷點標記沒有取消掉,進入斷點調(diào)試壞境后,是不會從服務器端加載數(shù)據(jù)進來的,這在做Ajax前后端聯(lián)調(diào)的時候是要格外注意的,否則就會被有些孤傲的同事所鄙視的,讓他對你的能力產(chǎn)生懷疑
• 在實際情況開發(fā)下,遇到問題是很正常的,首先自行在腦海中排查問題,找出最有可能出現(xiàn)問題點，如果沒有辦法迅速的排查出問題，那么你可以使用最靠譜的方法，就是“逐行執(zhí)行語句”將整個相關(guān)的js依次去執(zhí)行一遍，在執(zhí)行的過程中,注意看右側(cè)菜單欄或者自己控制臺console.log()進行測值,理清問題,注意代碼中變量的值以及選擇器選中的元素是否正確,基本上問題挨個的排查,bug也就差不多了的,不斷接近真理的,首先,js是否成功的執(zhí)行進來,是加載順序,還是從頁面外鏈引入問題,路徑等問題,另外,js是否存在邏輯問題(大部分都是邏輯問題,這也是一道坎)，變量問題(全局還是局部)，參數(shù)問題(實參數(shù)與形參數(shù)不一致)等等,最后檢查語法問題,中英文符號,結(jié)束符等,如果解決不了,那么就先Google,后一些博客園csdn,IT等社區(qū),最后在百度,在最后,就是請教大神,若公司里有些同事不愿意告訴你,讓你盡折騰的,那么此刻趕緊向萬能的群友,老師或者一些優(yōu)質(zhì)的社區(qū)提問吧,最陌生的永遠是路人,最熱心的永遠是網(wǎng)友,鍵盤俠.

查找內(nèi)存泄露

什么是內(nèi)存泄露

直白解釋:隨著時間的推移,某些不在需要的變量一直長期駐扎在內(nèi)存當中,沒有被釋放,這就意味著,瀏覽器可用剩余的空間會越來越小,直至沒有多余的內(nèi)存剩余,瀏覽器進程被崩潰,頁面響應遲鈍,數(shù)據(jù)延遲顯示加載等諸多問題
造成內(nèi)存泄露的主要三個原因:

1. 使用console對象那個在瀏覽器開發(fā)者工具的javascript控制臺里輸出對象的值,會引發(fā)內(nèi)存泄露,雖然代碼庫的其余內(nèi)容可能已經(jīng)不在需要訪問該對象,但這會使得在內(nèi)存中一直保持對輸出對象的引用,這可能會導致在開發(fā)過程中出現(xiàn)內(nèi)存泄露,若一旦在最后的發(fā)布代碼中將這些消息輸出方法調(diào)用移除,它就不會在出現(xiàn)了(當有的客戶打開網(wǎng)頁很慢,或者卡得不行時,聽得程序員說得最多的一句就是清除緩存(ctrl+shift+delete)在試試的,所謂清除緩存就是把歷史記錄給清空的,給瀏覽器釋放空間,減少它的負擔壓力)
2. 處理DOM事件的時候,某些操作時,引用計數(shù),引用了你代碼中其他位置的某個對象中的屬性,那么,即使在某個時刻后,你的代碼已不在需要或不在使用該對象,實際上該閉包仍存在被執(zhí)行的可能性,因而保持著對該對象的引用,也就是說,只要該事件處理器仍然有效,該對象就會一直保持在內(nèi)存中,因此要確保DOM元素上使用removeEventLister()方法或者將該對象使用完后為null,以保證將不在需要使用的對象引用及時移除并釋放所占用的內(nèi)存
3. 內(nèi)存泄露源于兩個或者多個對象之間所存在的循環(huán)引用,雖然應用程序已經(jīng)不在需要這些對象了,但是這些對象依然保持著所分配的內(nèi)存,通常解決辦法是:減少內(nèi)存泄露發(fā)生機會的最好辦法就是,將來自于其他對象的數(shù)據(jù)引用以獨立的局部變量的形式保存為一份副本

在chrome瀏覽器中進行內(nèi)存分析

shift+Esc(任務管理器)-->鼠標右鍵-->勾選javascript使用的內(nèi)存或者點擊右上角菜單欄三個小點-->更多工具-->任務管理器,如下gif圖所示

chromeTaskManner.gif

在chrome瀏覽器中查看javascript所消耗的內(nèi)存情況,通過工具欄中的Memory-->profiles,可以顯示查看內(nèi)存的使用情況,這樣,就可以看到你的網(wǎng)頁應用程序的javascript部分所使用的內(nèi)存情況的,這樣就可以與其他網(wǎng)頁應用程序進行比較了

如果你需要隨時觀察確切的內(nèi)存使用情況,你可以使用chrome開發(fā)者工具的Profiles標簽頁中的Heap Snapshot,各個獲取對象的內(nèi)存的快照的使用情況快照,選擇Take Heap Snap Snapshot單選按鈕,并單擊Take Snapshot,各個快照結(jié)果將會顯示在左方的面板上

你可以單擊某個快照,以列表的形式顯示出所創(chuàng)建的對象的摘要,列表將按照對象進行實例化時所使用的構(gòu)造函數(shù)或者js的內(nèi)建數(shù)據(jù)類型進行組織排列,顯示出每一項所占用的內(nèi)存數(shù)量,可以從中找出哪些對象正在占用著比預期更多的內(nèi)存,從而幫助你修改那些對象中可能存在的特定的問題,如果想要在一個特定的時間周期內(nèi)比較你的網(wǎng)頁應用程序的整個內(nèi)存的使用情況

在開發(fā)者工具中的Profiles標簽頁中選擇Record Heap Allocations單選按鈕,單擊start按鈕,開發(fā)者工具的左上方會顯示一個公色的只是圖標,表示現(xiàn)在正對內(nèi)存使用情況進行記錄,當你認為已經(jīng)收集到足夠的相關(guān)數(shù)據(jù)時,請單擊該指示圖標,以停止記錄,從你開始記錄的到停止記錄的時刻

在此期間內(nèi)的內(nèi)存使用情況,將在開發(fā)者工具的主面板中的圖表上繪制出來,內(nèi)存的使用出現(xiàn)變化的對象清單,在圖表上方的時間段內(nèi),可以用鼠標拖選某一個時間段,以篩選出更細的范圍

觀察期間發(fā)生的內(nèi)存使用事件情況,從而幫助自己找出是哪些對象的變化引起了大量的內(nèi)存占用變化并加以關(guān)注,這樣你就可以想辦法改進自己的應用程序的過多內(nèi)存的使用情況了
在瀏覽器的開發(fā)者工具中的Performance性能分析,老版本的瀏覽器是Timeline,里面有Memory時間軸的工具,要運行內(nèi)存時間軸檢查

只需要在刷新頁面(F5)開始記錄測量數(shù)據(jù)保持Performance標簽頁處于打開狀態(tài),當頁面加載事件完成之后,一個圖形將會呈現(xiàn),當中會顯示你所運行的頁面內(nèi)存消耗情況,在圖形之下,是記錄清單,顯示了所發(fā)生的影響應用程序使用的每一個事件

當中包括一些完整的詳細信息,如事件的類型,文件名稱以及影響內(nèi)存使用操作的行號,在圖形上滑動器選擇一段時間范圍,可以在下方的記錄清單中篩選出該時間范圍內(nèi)的記錄(可能在你注意到在內(nèi)存使用情況中出現(xiàn)了很高的細長柱狀標志的位置

但是并沒有消耗很多的內(nèi)存),以此來輔助進行調(diào)試,找出那些初始化并運行后使得應用程序消耗很多的內(nèi)存的操作,是一個正在運作的內(nèi)存時間軸,當中的內(nèi)容包括:隨著時間的進行而產(chǎn)生的內(nèi)存使用情況,引起內(nèi)存分配變化的事件清單,記錄生效的DOM節(jié)點個數(shù)和事件監(jiān)聽器個數(shù)的計數(shù)器(在網(wǎng)頁應用程序中,這兩者往往會是內(nèi)存泄露的原因)

• Take Heap Snapshot:采取堆快照
  • Heap snapshot profiles show memory distribution among your page's javascript objects and related DOM nodes:堆快照配置文件顯示頁面的JavaScript對象和相關(guān)DOM節(jié)點之間的內(nèi)存分配
• Record Allocation Profile:記錄配置概要文件資料
  • Allocation profiles show memory allocations from your javascript functions:分配配置問及那顯示了javascript函數(shù)的內(nèi)存分配
• Record Allocation Timeline 記錄分配時間
  • Allocation timelines show memory allocations from your heap over time,Use this profile type to isolate memory leaks 分配時間線顯示隨著時間的推移從堆中的內(nèi)存分配，使用此配置文件類型來隔離內(nèi)存泄漏
• Take Snapshot:拍快照
• Load:加載
  如下測試代碼:

             * 原型模式:通過使用原型繼承克隆已存在的對象創(chuàng)建出新的對象,即原型繼承是js貫穿創(chuàng)建過程的繼承類型
             * 實現(xiàn)方式:2種:第一種:使用一個已經(jīng)存在的對象prototype屬性,在js中創(chuàng)建類時所使用的 第二種:使用Ecmascript5的Object.create()方法,但是該方法需要更好的瀏覽器支持才能使用
             *
             * @global variable{textField,emailField}
             * @constructor Field
             * @param {type,displayText}
             * @method getElement
             * @return field
             * @Instanties objects {textField,emailField} 
             * @將實例化對象添加到body中
             * 
             */
             var textField,
                 emailField;
             // 定義一個Field類,用于創(chuàng)建input表單元素
             function Field(type,displayText){
                this.type = type || "";
                this.displayText = displayText || "";
             }   
             // 使用prototype屬性來實現(xiàn)原型模式,所定義的方法將會應用于所有繼承于此類的對象
             Field.prototype = {
                getElement:function(){
                    var field = document.createElement("input");
                    field.setAttribute("type",this.type);
                    field.setAttribute("placeholder",this.displayText);

                    return field;
                }
             };
             // 創(chuàng)建2個對象實例,二者都從prototype中獲得了getElement方法
             textField = new Field("text","請輸入你的地止");
             emailField = new Field("email","請輸入你的Email地止");

             // 一旦頁面加載完成,便把這些對象中所保存的元素添加至當前頁面
             window.onload = function(){
                 var bodyElement = document.body;

                     bodyElement.appendChild(textField.getElement());
                     bodyElement.appendChild(emailField.getElement());
             }

profiles.gif

記錄JS CPU執(zhí)行時間細節(jié)、顯示JS對象和相關(guān)的DOM節(jié)點的內(nèi)存消耗.gif

其中上面的那個Heavy(Bottom up)自底向上/tree to Down顯示結(jié)果一樣/,chart以圖表展示

performance記錄并分析在網(wǎng)站的生命周期內(nèi)所發(fā)生的各類事件,分析渲染,js執(zhí)行的每個階段.gif

利用以上的開發(fā)者工具進行分析代碼,performance性能,Memory,javascript Profiler工具,可以分析哪些函數(shù)代碼運行的周期所耗用的時間,進行性能調(diào)優(yōu),從而嘗試用更高效的寫法,比如說,if..else語句,用三目運算符性能就比它高等來實現(xiàn)相同的操作并得到相同的結(jié)果

但是前提還是在實現(xiàn)功能的條件下,心有余力時在尋找更優(yōu)的解決方案,否則一味的追求性能分析,核心功能代碼沒有實現(xiàn),后面的性能優(yōu)化都是徒勞而費時的,不要本末倒置了的,至少我覺得這需要一定的代碼功力和算法領(lǐng)域,數(shù)據(jù)結(jié)構(gòu)的知識

Application:記錄網(wǎng)站加載的所有資源信息，包括存儲數(shù)據(jù)（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies,Frames）、緩存數(shù)據(jù)、字體、圖片、腳本、樣式表等,有時候我們扣一個網(wǎng)站的具體圖片,除了通過審查元素鼠標探測方式保存圖片,這種方式也是可以的

Application.gif

Security:判斷當前網(wǎng)頁是否安全

Security.gif

Audits:對當前網(wǎng)頁進行網(wǎng)絡利用情況、網(wǎng)頁性能方面的診斷，并給出一些優(yōu)化建議。比如列出所有沒有用到的CSS文件，Audit present State審計狀態(tài),Reload Page and Audit on Load重載頁面和負載審計

Audits進行網(wǎng)絡利用呢性能優(yōu)化建議.gif

總結(jié):

如果您能堅持讀完或者聽我講完,那么我已經(jīng)非常感動了,如果讀的同時,能夠進行測試的話,我相信應該理解起來會更加深刻,畢竟動手測試跟浮光掠影閱讀那感覺是不一樣的,從開始的chrome瀏覽器下常用的熱鍵,以及windows下的一些常用鍵,通過他們兩者的強強聯(lián)手

熟練的駕馭這些軟技能,瞬間就能碾壓鼠標手了,是通向一個優(yōu)秀鍵盤俠必經(jīng)之路吧,平常的工作中是否看到有那種一個主顯示器,好幾個顯示屏之間飛快的進行切換工作的coder?往往萌妹子看到此景,除了崇拜還是崇拜,但是以身相許還是差那么點,因為顏值也是很重要的嘛,緊接著就是對開發(fā)者工具的Element,著重的console,Sources,Network面板使用,斷點工具的介紹及使用

更重要的是打了斷點后如何排查bug并修復,對代碼執(zhí)行流程的分析,這是很重要的,斷點分析對理解this,上下文壞境,監(jiān)測變量的實時變化是很有幫助的,通過查找內(nèi)存泄露,什么是內(nèi)存泄露,以及造成內(nèi)存泄露的三個主要原因,以及怎么避免和解決的

最后就是在chrome瀏覽器中進行內(nèi)存分析,perfermance,Memory,javascript Profiler,Application,Security,Audius進行代碼測試,以及gif過程的動畫演示,當然我這里沒有演示firefox,IE等其他瀏覽器,其實都差不多

我只是覺得chrome瀏覽器用的順手一些罷了,其實很多瀏覽器(360,2345)是IE內(nèi)核與chrome瀏覽器-webkit的雜交體,與chrome瀏覽器操作調(diào)試手段都大同小異,你可以分別在各個瀏覽器自行測試一下進行佐證的,哪里不會,就立馬Google嘛,至于開發(fā)者工具更多的調(diào)試技巧與知識,我也一直在學習當中,以后有新的體會在分享出來的

以下是本篇提點概要

• 主流瀏覽器下各快捷鍵的使用,chrome瀏覽器下的熱鍵,以及windows下的常用熱鍵
• javascript控制臺及面板工具,Element,console,Sources,NetWork,perfermance,Memory,javascript Profilter,Application,Security,Audits
• Element面板使用
• console面板使用(面試筆試的時候有時候會考到)
• Sources控制面板使用
• 觀察正在運行的js代碼,分析流程,并打斷點分析調(diào)試
• 查找內(nèi)存泄露,什么是內(nèi)存泄露,造成它的三大主要原因,以及怎么處理的
• 在chrome瀏覽器中進行內(nèi)存分析