成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

Web開(kāi)發(fā)工具系列（1）---Firebug中的console API

JohnLui / 1684人閱讀

摘要：本文主要探討中的使用。不同的瀏覽器中行為可能會(huì)有所不同。代碼測(cè)試運(yùn)行了次和用來(lái)顯示代碼的運(yùn)行時(shí)間。測(cè)試計(jì)算運(yùn)行性能代碼測(cè)試介紹的具體網(wǎng)址一篇相關(guān)的博文

前言

我個(gè)人一直在使用Firefox瀏覽器進(jìn)行開(kāi)發(fā)，并且經(jīng)常使用Firebug進(jìn)行一些簡(jiǎn)單的調(diào)試，但是一直限于使用簡(jiǎn)單的console.log()查看輸出，或者查看Ajax運(yùn)行時(shí)的Http請(qǐng)求和Cookie等。為了更好的掌握工具使用技巧，我希望最近騰出時(shí)間仔細(xì)探究下Firebug的使用。因此，本文將是“Web 開(kāi)發(fā)工具”系列中的第一篇。

本文主要探討Firebug中console的使用。firebug給所有當(dāng)前加載的頁(yè)面添加了一個(gè)console全局對(duì)象，這個(gè)對(duì)象包含各種方法，可以幫助我們通過(guò)console API 輸出JavaScript代碼執(zhí)行時(shí)的信息。相比alert()，console對(duì)象輸出不會(huì)停止代碼運(yùn)行，而alert()必須點(diǎn)擊彈出窗口才能繼續(xù)觀察結(jié)果。例如通過(guò)for循環(huán)觀察一個(gè)較大數(shù)組的輸出，在循環(huán)體內(nèi)使用alert無(wú)疑會(huì)是件很頭疼的事，因?yàn)槟阋B續(xù)點(diǎn)擊很多次，用console.log()則沒(méi)有這種顧慮：

console對(duì)象的方法

1) console.log(obiect[,object,object…]):這無(wú)疑是最常用的方法，用來(lái)輸出參數(shù)代表的值，參數(shù)可以是任何字符串、數(shù)字和JavaScript對(duì)象，輸出時(shí)以空格間隔多個(gè)變量。與alert()函數(shù)類似，console.log()也可以接受換行符n以及制表符t。console.log()語(yǔ)句所打印的調(diào)試信息可以在瀏覽器的調(diào)試控制臺(tái)中看到。不同的瀏覽器中console.log()行為可能會(huì)有所不同。

2) 與console.log()功能類似的console.debug()/console.info()/console.warn()/console.error()都會(huì)輸出參數(shù)內(nèi)容，但是輸出時(shí)顯示的圖標(biāo)不同。
代碼：

var a = new Array(),b = new Date(), c = 1;
console.info(a, b, c);//顯示info圖標(biāo)
console.error(a, b, c);//顯示錯(cuò)誤圖標(biāo)
console.warn(a, b, c);//顯示警告圖標(biāo)
console.debug(a, b, c);//不顯示圖標(biāo)

輸出：

console對(duì)象的上面5種方法，都可以使用C語(yǔ)言printf風(fēng)格的占位符。不過(guò)，占位符的種類比較少，只支持字符（%s）、整數(shù)（%d或%i）、浮點(diǎn)數(shù)（%f）和對(duì)象（%o）四種。
代碼：

console.log("%d年%d月%d日",2011,3,26);
console.log("圓周率是%f",3.1415926);

輸出：

%o占位符，可以用來(lái)查看一個(gè)對(duì)象內(nèi)部情況。
代碼：

var dog = {}; dog.name = "大毛"; dog.color = "黃色";
 console.log("%o", dog);

結(jié)果：

3) console.assert(expression[,object]):參數(shù)是表達(dá)式或者對(duì)象，判斷內(nèi)部是否為true，我認(rèn)為會(huì)經(jīng)過(guò)一個(gè)布爾類型轉(zhuǎn)換。如果轉(zhuǎn)換結(jié)果是真就不輸出，為假就輸出判斷結(jié)果。最好只輸入一個(gè)參數(shù)，多個(gè)參數(shù)時(shí)判斷結(jié)果很奇怪。連續(xù)多次執(zhí)行assert()方法，會(huì)一次性輸出總的斷言失敗數(shù)，不指出是哪一個(gè)失敗。
測(cè)試實(shí)例：

//除console.assert(a)外的斷言都是失敗的
var a = new Array(),b = new Date(), c = 0;
console.assert();//無(wú)參數(shù)
console.assert(c);//數(shù)值0
console.assert(a);//數(shù)組對(duì)象
console.assert(null);//null

輸出結(jié)果：

4）console.clear()：無(wú)參數(shù)，清空console窗口。
5） console.dir(object)：輸出對(duì)象的所有特性，包括方法和屬性; 直接將該DOM結(jié)點(diǎn)以DOM樹(shù)的結(jié)構(gòu)進(jìn)行輸出。
代碼：

//輸出console的所有方法和屬性
console.dir(console);

6）console.dirxml()：用來(lái)顯示網(wǎng)頁(yè)的某個(gè)節(jié)點(diǎn)（node）所包含的html/xml代碼。
代碼

    /*zhangzhang

        

        

    

    */

測(cè)試：

7）console.trace()：追蹤函數(shù)的調(diào)用軌跡
代碼：

function add(a, b) {
  console.trace();
  return a + b;
}
function add3(a, b) {
  return add2(a, b);
}
function add2(a, b) {
  return add1(a, b);
}
function add1(a, b) {
  return add(a, b);
}
var x = add3(1, 1);

測(cè)試：

8）console.group(object[, object, ...])和console.groupEnd()：分組顯示。
代碼：

    console.group("第一組信息");
　　　　console.log("第一組第一條");
　　　　console.log("第一組第二條");
　　console.groupEnd();
　　console.group("第二組信息");
　　　　console.log("第二組第一條");
　　　　console.log("第二組第二條");
    console.groupEnd();

測(cè)試：

9）console.count(): 統(tǒng)計(jì)調(diào)用count()的那行代碼被執(zhí)行的次數(shù)。
代碼：

  
      
      
    JS Performance

測(cè)試：運(yùn)行了100次

10）console.time(name)和console.timeEnd(name)：用來(lái)顯示代碼的運(yùn)行時(shí)間。
測(cè)試：

11）console.profile()：計(jì)算運(yùn)行性能
代碼：

  
      
      
    JS Performance

測(cè)試：

Reference：

firebug介紹的具體網(wǎng)址：
http://getfirebug.com/wiki/in...
一篇相關(guān)的博文：
http://www.ruanyifeng.com/blo...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/80702.html

相關(guān)文章

  • 前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

    摘要：特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多，可以很快搞定，沒(méi)想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯(cuò)誤的地方，還請(qǐng)斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會(huì)及時(shí)更新，平時(shí)業(yè)務(wù)工作時(shí)也會(huì)不定期更...

    princekin 評(píng)論0 收藏0

  • 客戶端數(shù)據(jù)存儲(chǔ) --- web storage From 《高程3》

    摘要：的目的就是取代進(jìn)行大量的本地?cái)?shù)據(jù)存儲(chǔ)，其中不能進(jìn)行跨會(huì)話存儲(chǔ)，這可以使用彌補(bǔ)。刪除由指定的名值對(duì)兒。使用方法存儲(chǔ)數(shù)據(jù)使用屬性存儲(chǔ)數(shù)據(jù)使用方法讀取數(shù)據(jù)使用屬性讀取數(shù)據(jù)一般來(lái)說(shuō)，對(duì)存儲(chǔ)空間大小的限制都是以每個(gè)源協(xié)議域和端口為單位的。 前言 本文首先介紹web storage和Cookie的對(duì)比，解釋web storage的優(yōu)勢(shì)；隨后指出怎樣使用插firebug插件的擴(kuò)展firestorag...

    wangbinke 評(píng)論0 收藏0

  • 客戶端數(shù)據(jù)存儲(chǔ) --- web storage From 《高程3》

    摘要：的目的就是取代進(jìn)行大量的本地?cái)?shù)據(jù)存儲(chǔ)，其中不能進(jìn)行跨會(huì)話存儲(chǔ)，這可以使用彌補(bǔ)。刪除由指定的名值對(duì)兒。使用方法存儲(chǔ)數(shù)據(jù)使用屬性存儲(chǔ)數(shù)據(jù)使用方法讀取數(shù)據(jù)使用屬性讀取數(shù)據(jù)一般來(lái)說(shuō)，對(duì)存儲(chǔ)空間大小的限制都是以每個(gè)源協(xié)議域和端口為單位的。 前言 本文首先介紹web storage和Cookie的對(duì)比，解釋web storage的優(yōu)勢(shì)；隨后指出怎樣使用插firebug插件的擴(kuò)展firestorag...

    wfc_666 評(píng)論0 收藏0

  • 錯(cuò)誤檢測(cè)（1）------try-catch語(yǔ)句 From 《高程3》

    摘要：類型的錯(cuò)誤會(huì)在數(shù)值超出相應(yīng)范圍時(shí)觸發(fā)。最常發(fā)生類型錯(cuò)誤的情況，就是傳遞給函數(shù)的參數(shù)事先未經(jīng)檢查，結(jié)果傳入類型與預(yù)期類型不相符。捕獲錯(cuò)誤的目的在于避免瀏覽器以默認(rèn)方式處理它們而拋出錯(cuò)誤的目的在于提供錯(cuò)誤發(fā)生具體原因的消息。 0 前言 目前讀到了《高程3》的錯(cuò)誤檢測(cè)部分，現(xiàn)在先挖一個(gè)坑，關(guān)于錯(cuò)誤檢測(cè)應(yīng)該寫(xiě)三篇總結(jié)：firebug檢測(cè)錯(cuò)誤和輸出信息；try-catch錯(cuò)誤捕獲；常見(jiàn)錯(cuò)誤種類。...

    UnixAgain 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<