av激情亚洲男人的天堂国语,日韩欧美精品一中文字幕,无码av一区二区三区无码,国产又色又爽又刺激的a片,国产又色又爽又刺激的a片

關(guān)于Chrome瀏覽器調(diào)試技巧

寫在前面：本文包括瀏覽器調(diào)試，不包括web移動端調(diào)試。本文調(diào)試均在chrome瀏覽器進行。

創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都做網(wǎng)站、成都網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的茫崖網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

alert

這個不用多說了，不言自明。

console

基本輸出

想必大家都在用 console.log 在控制臺輸出點東西，其實console還有其它的方法：

 
 
 
 
    
  
  
  
  
  1. console.log( "打印字符串" ); //在控制臺打印自定義字符串  
    2.   
  
  
  
  2. console.error( "我是個錯誤" ); //在控制臺打印自定義錯誤信息  
    3.   
  
  
  
  3. console.info( "我是個信息" ); //在控制臺打印自定義信息  
    4.   
  
  
  
  4. console.warn( "我是個警告" ); //在控制臺打印自定義警告信息  
    5.   
  
  
  
  5. console.debug( "我是個調(diào)試" ); //在控制臺打印自定義調(diào)試信息  
    6.   
  
  
  
  6. cosole.clear(); //清空控制臺（這個下方截圖中沒有） 
    7.

注意上面輸出的error和throw出的error不一樣，前者只是輸出錯誤信息，無法捕獲，不會冒泡，更不會中止程序運行。

格式化輸出

除此以外，console還支持自定義樣式和類似c語言的printf形式：

 
 
 
 
    
  
  
  
  
  1. console.log("%s年" , 2016 ); //%s表示字符串  
    2.   
  
  
  
  2. console.log( "%d年%d月" , 2016 , 11 ); //%d表示整數(shù)  
    3.   
  
  
  
  3. console.log( "%f" , 3.1415926 ); //%f小數(shù)  
    4.   
  
  
  
  4. console.log( "%o" ,console);//%o表示對象  
    5.   
  
  
  
  5. console.log( "%c自定義樣式" , "font-size:30px;color:#00f" );  
    6.   
  
  
  
  6. console.log( "%c我是%c自定義樣式" , "font-size:20px;color:green" , "font-size:10px;color:red" );  
    7.

DOM輸出

下面幾個比較簡單的，就不舉例子了，簡單說一下：

 
 
 
 
    
  
  
  
  
  1. var  ul = document.getElementsByTagName( "ul" );  
    2.   
  
  
  
  2. console.dirxml(ul);  
    3.   
  
  
  
  3. //樹形輸出table節(jié)點，即和它的innerHTML，由于document.getElementsByTagName是動態(tài)的，所以這個得到的結(jié)果肯定是動態(tài)的   
    對象輸出
     
 
 
 
      
  
  
  
  
    1. var  o = { name: "Lily" ,    age:  18  };  
      2.   
  
  
  
    2. console.dir(obj); 
      3.   
  
  
  
    3. //顯示對象自有屬性和方法  
      4.  
 
 
 
    對于多個對象的集合，你可以這樣，輸出更清晰：
     
 
 
 
      
  
  
  
  
    1. var stu = [{name:"Bob",age:13,hobby:"playing"},{name:"Lucy",age:14,hobby:"reading"},{name:"Jane",age:11,hobby:"shopping"}];  
      2.   
  
  
  
    2. console.log(stu);  
      3.   
  
  
  
    3. console.table(stu);  
      4.  
 
 
 
    成組輸出
     
 
 
 
      
  
  
  
  
    1. //建立一個參數(shù)組  
      2.   
  
  
  
    2. console.group("start"); //引號里是組名，自己起  
      3.   
  
  
  
    3. console.log("sub1");  
      4.   
  
  
  
    4. console.log("sub1");  
      5.   
  
  
  
    5. console.log("sub1");  
      6.   
  
  
  
    6. console.groupEnd("end");  
      7.  
 
 
 
    函數(shù)計數(shù)和跟蹤
     
 
 
 
      
  
  
  
  
    1. function fib(n){ //輸出前n個斐波那契數(shù)列值 
      2.   
  
  
  
    2.   if(n == 0) return; 
      3.   
  
  
  
    3.   console.count("調(diào)用次數(shù)");//放在函數(shù)里，每當這句代碼運行輸出所在函數(shù)執(zhí)行次數(shù) 
      4.   
  
  
  
    4.   console.trace();//顯示函數(shù)調(diào)用軌跡(訪問調(diào)用棧） 
      5.   
  
  
  
    5.   var a = arguments[1] || 1; 
      6.   
  
  
  
    6.   var b = arguments[2] || 1; 
      7.   
  
  
  
    7.   console.log("fib=" + a); 
      8.   
  
  
  
    8.   [a, b] = [b, a + b]; 
      9.   
  
  
  
    9.   fib(--n, a, b); 
      10.   
  
  
  
    10. } 
      11.   
  
  
  
    11. fib(6);  
      12.  
 
 
 
    注：Chrome開發(fā)者工具中的Sources標簽頁也在Watch表達式下面顯示調(diào)用棧。
    計時
     
 
 
 
      
  
  
  
  
    1. console.time() //計時開始 
      2.   
  
  
  
    2. fib(100); //用上述函數(shù)計算100個斐波那契數(shù) 
      3.   
  
  
  
    3. console.timeEnd() //計時結(jié)束并輸出時長  
      4.  
 
 
 
    斷言語句，這個c++調(diào)試里面也經(jīng)常用到。js中，當一個表達式或參數(shù)為true時候什么也不發(fā)生，為false時終止程序并報錯。
     
 
 
 
      
  
  
  
  
    1. console.assert(true, "我錯了"); 
      2.   
  
  
  
    2. console.assert(false, "我真的錯了");  
      3.  
 
 
 
    性能分析
     
 
 
 
      
  
  
  
  
    1. function F(){ 
      2.   
  
  
  
    2.   var i = 0; 
      3.   
  
  
  
    3.   function f(){ 
      4.   
  
  
  
    4.     while(i++ == 1000); 
      5.   
  
  
  
    5.   } 
      6.   
  
  
  
    6.   function g(){ 
      7.   
  
  
  
    7.     while(i++ == 100000); 
      8.   
  
  
  
    8.   } 
      9.   
  
  
  
    9.   f(); 
      10.   
  
  
  
    10.   g(); 
      11.   
  
  
  
    11. } 
      12.   
  
  
  
    12. console.profile(); 
      13.   
  
  
  
    13. F(); 
      14.   
  
  
  
    14. console.profileEnd();  
      15.  
 
 
 
    注：Chrome開發(fā)者工具中的Audits標簽頁也可以實現(xiàn)性能分析。
    debugger
    這個重量級的是博主最常用的，可能是c++出身，對于單步調(diào)試由衷的熱愛。單步調(diào)試就是點一下，執(zhí)行一句程序，并且可以查看當前作用域可見的所有變量和值。而debugger就是告訴程序在那里停下來進行單步調(diào)試，俗稱斷點。
    右邊按鈕如下：
    • Pause/Resume script execution：暫停/恢復(fù)腳本執(zhí)行(程序執(zhí)行到下一斷點停止)。
    • Step over next function call：執(zhí)行到下一步的函數(shù)調(diào)用(跳到下一行)。
    • Step into next function call：進入當前函數(shù)。
    • Step out of current function：跳出當前執(zhí)行函數(shù)。
    • Deactive/Active all breakpoints：關(guān)閉/開啟所有斷點(不會取消)。
    • Pause on exceptions：異常情況自動斷點設(shè)置。
    其實右側(cè)還有很多強大的功能：
    • Watch：Watch表達式
    • Call Stack: 棧中變量的調(diào)用，這里是遞歸調(diào)用，肯定是在內(nèi)存棧部分調(diào)用。
    • Scope：當前作用域變量觀察。
    • BreakPoints：當前斷點變量觀察。
    • XHR BreakPoints：面向Ajax，專為異步而生的斷點調(diào)試功能。
    • DOM BreakPoints：主要包括下列DOM斷點，注冊方式見下圖：
      

    1. 當節(jié)點屬性發(fā)生變化時斷點(Break on attributes modifications)
    2. 當節(jié)點內(nèi)部子節(jié)點變化時斷點(Break on subtree modifications)
    3. 當節(jié)點被移除時斷點(Break on node removal) 
      

    • Global Listeners：全局事件監(jiān)聽
    • Event Listener Breakpoints：事件監(jiān)聽器斷點，列出了所有頁面及腳本事件，包括：鼠標、鍵盤、動畫、定時器、XHR等等。
    chrome中的調(diào)試技巧
    1、DOM元素的控制臺書簽：Chrome開發(fā)者工具和Firebug都提供了書簽功能，用于顯示你在元素標簽頁(Chrome)或HTML標簽頁(Firebug)中最后點擊的DOM元素。如果你依次選擇了A元素、B元素和C元素，那么\$0 表示C元素， \$1 表示B元素， \$2 表示A元素(這個和正則表達式的\$符號類似，不過順序不同)。
    2、如果你想調(diào)試f函數(shù)，用debug(f)語句可以增加這種斷點。
    3、Sources標簽頁左側(cè)面板上有一個代碼片段(Snippet)子標簽頁，可用于保存代碼片段，幫你調(diào)試代碼。
    4、可以用Chrome開發(fā)者工具Sources標簽頁中的格式化按鈕(Pretty Print Button)格式化壓縮后的代碼。
    5、在Network面板，選擇一個資源文件，右鍵Copy Response可快速復(fù)制響應(yīng)內(nèi)容。
    6、利用媒體查詢，這個主要是在Device Mode調(diào)節(jié)不同的分辨率顯示。
    7、選擇Elements，按 Esc > Emulation > Sensors進行傳感器模擬。
    8、點擊漸入效果樣式圖標(紫色的圖標)，可以預(yù)覽動畫效果，并可對相應(yīng)的貝塞爾曲線(cubic-bezier)進行調(diào)節(jié)動畫效果。
    9、在Source中按住Alt鍵并拖動鼠標進行多列內(nèi)容選擇。
    10、Elements面板右鍵執(zhí)行DOM元素節(jié)點，選擇Force Element State或者點擊右側(cè)Toggle Element State圖標可以出發(fā)偽類。
    11、Network面板中選擇一張圖片，在右側(cè)圖片上鼠標右鍵選擇copy it as a Data URI,就可以獲取圖片的Data URL (base64編碼)。
    12、通過按住Ctrl鍵可以添加多個編輯光標，同時對多處進行編輯。按下Ctrl + U可以撤銷編輯。
    13、Elements面板右側(cè)的Style編輯器中，點擊顏色十六進制編碼前的小色塊，會彈出一個調(diào)色板。
    14、按下Alt鍵并且鼠標雙擊選擇DOM元素前面的箭頭，就會展開該DOM元素下的所有字節(jié)點元素.
    15、快捷鍵：
    • 快速定位到行：快捷鍵 Ctrl+O(Mac: CMD+O)，輸入：行號:列號 來進行定位
    • 元素搜索：快捷鍵 Ctrl+F(Mac: CMD+F)，試試在搜索欄輸入ID選擇符或者類選擇符就可以定位到元素啦
    調(diào)試過程注意事項
    1、避免記錄引用類型
    當記錄對象或數(shù)組時，永遠記得你在記錄什么。記錄原始類型時，使用帶斷點的watch表達式。如果是異步代碼，避免記錄引用類型。
     
 
 
 
      
  
  
  
  
    1. var arr = [{ num: 0 }]; 
      2.   
  
  
  
    2. setInterval(function(){ 
      3.   
  
  
  
    3. console.log(arr); 
      4.   
  
  
  
    4. arr[0].num += 1; 
      5.   
  
  
  
    5. }, 1000);  
      6.  
 
 
 
    這里，頭一個屬性中對象引用的值是不可靠的。當你頭一次在開發(fā)者工具中顯示這個屬性時，num的值就已經(jīng)確定了。之后無論你對同一個引用重新打開多少次都不會變化。
    2、盡可能使用 source map。有時生產(chǎn)代碼不能使用source map，但不管怎樣，你都不應(yīng)該直接對生產(chǎn)代碼進行調(diào)試。

    
                    分享標題：關(guān)于Chrome瀏覽器調(diào)試技巧                    
    
                    文章分享：http://uogjgqi.cn/article/cogpdis.html
    
                    
    
                    
    
                        
    掃二維碼與項目經(jīng)理溝通
    
                        
    我們在微信上24小時期待你的聲音
    
                        
    解答本文疑問/技術(shù)咨詢/運營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流