javascript中控制臺(tái)怎么使用

這篇文章主要介紹“javascript中控制臺(tái)怎么使用”，在日常操作中，相信很多人在javascript中控制臺(tái)怎么使用問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”javascript中控制臺(tái)怎么使用”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

控制臺(tái)是現(xiàn)代瀏覽器中的內(nèi)置調(diào)試器，熟練的Web開(kāi)發(fā)人員會(huì)經(jīng)常使用console.log()在其代碼中打印消息和調(diào)試問(wèn)題?？刂婆_(tái)（Console）主要是用來(lái)顯示網(wǎng)頁(yè)加載過(guò)程中產(chǎn)生各類信息；在測(cè)試界面時(shí)，如果出現(xiàn)Bug問(wèn)題，一般情況下會(huì)在這欄展示，查看調(diào)試日志信息或者異常錯(cuò)誤信息，然后前端開(kāi)發(fā)工程師根據(jù)具體問(wèn)題來(lái)調(diào)試，進(jìn)行解決問(wèn)題。

本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

控制臺(tái)是現(xiàn)代瀏覽器中的內(nèi)置調(diào)試器。熟練的Web開(kāi)發(fā)人員會(huì)經(jīng)常使用 console.log() 在其代碼中打印消息和調(diào)試問(wèn)題。該工具實(shí)際上還有很多很有用的功能和技巧，善用之可以極大提高Web開(kāi)發(fā)，網(wǎng)站調(diào)優(yōu)的效率。

可以從運(yùn)行以下 Web 瀏覽器之一的任何遠(yuǎn)程計(jì)算機(jī)系統(tǒng)輕松訪問(wèn) Web 控制臺(tái)：

• 谷歌瀏覽器

• 火狐瀏覽器

• 蘋(píng)果瀏覽器

• Microsoft Internet Explorer 版本 11

• 。。。

開(kāi)發(fā)者工具中的控制臺(tái)（Console）主要是用來(lái)顯示網(wǎng)頁(yè)加載過(guò)程中產(chǎn)生各類信息。

當(dāng)網(wǎng)頁(yè)的JS代碼中使用了console.log()函數(shù)時(shí)，該函數(shù)輸出的日志信息會(huì)在控制臺(tái)中顯示。日志信息一般在開(kāi)發(fā)調(diào)試時(shí)啟用，而當(dāng)正式上線后，一般會(huì)將該函數(shù)去掉

在測(cè)試界面時(shí)，如果出現(xiàn)Bug問(wèn)題，一般情況下會(huì)在這欄展示，查看調(diào)試日志信息或者異常錯(cuò)誤信息，然后前端開(kāi)發(fā)工程師根據(jù)具體問(wèn)題來(lái)調(diào)試，進(jìn)行解決問(wèn)題。

打開(kāi)一個(gè)瀏覽器，F(xiàn)12打開(kāi)開(kāi)發(fā)者模式，點(diǎn)擊console頁(yè)簽，并輸入命令（支持補(bǔ)全）：

console.log(console)

如上截圖中所示， console 對(duì)象提供了大量的方法可供使用，而非我們最常用console.log() 一個(gè)函數(shù)。

控制臺(tái)（Console）的使用

一、顯示信息命令

其內(nèi)置一個(gè)console對(duì)象，提供5種方法，用來(lái)顯示信息。最簡(jiǎn)單的方法是 console.log()，可以用來(lái)取代 alert() 或 document.write() 。比如，在網(wǎng)頁(yè)腳本中使用 console.log("Hello World")，加載時(shí)控制臺(tái)就會(huì)自動(dòng)顯示如下內(nèi)容：

另外，根據(jù)信息的不同性質(zhì)。console 對(duì)象還可以有4種顯示的方法，分別是一般信息console.info()、除錯(cuò)信息console.debug()、警告提示console.warn()、錯(cuò)誤提示console.error()。比如，在網(wǎng)頁(yè)腳本中插入下面四行：

console.info("This is Info"); console.debug("This is Debug"); console.warn("This is Warn"); console.error("This is Error");加載時(shí)，控制臺(tái)會(huì)顯示如下內(nèi)容：

可以看到，不同性質(zhì)的信息前面有不同的圖標(biāo)，并且每條信息后面都有超級(jí)鏈接，點(diǎn)擊后跳轉(zhuǎn)到網(wǎng)頁(yè)源碼的相應(yīng)行。

二、占位符

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

console.log("%d年%d月%d日",2012,12,21);console.log("圓周率是%f",3.1415926);

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

var car = {};car.name = "寶馬";car.color = "白色";然后，對(duì)它使用占位符%o：
console.log("%o",car);

登錄后復(fù)制

三、分組顯示

如果信息太多，可以分組顯示，用到的方法是 console.group()和console.groupEnd()。

console.group("The first Info"); 
console.log("The first Info first Line"); 
console.log("The first Info second Line"); 
console.groupEnd(); 
console.group("The second Info"); 
console.log("The second Info first Line"); 
console.log("The second Info second Line"); 
console.groupEnd();

點(diǎn)擊組標(biāo)題，該組信息會(huì)折疊或展開(kāi)。

四、console.dir()

console.dir()可以顯示一個(gè)對(duì)象所有的屬性和方法。比如，現(xiàn)在為第二節(jié)的car對(duì)象，添加一個(gè)drive()方法

car.drive = function(){ alert("The car is working.") };然后，顯示該對(duì)象內(nèi)容：
console.dir(car);

五、consol.dirxml()

consol.dirxml() 用來(lái)顯示網(wǎng)頁(yè)的某個(gè)節(jié)點(diǎn)（node）所包含的html/xml代碼。比如，先獲取一個(gè)表格節(jié)點(diǎn)，然后顯示該節(jié)點(diǎn)包含的代碼：

<table id="table" border="0">

	<tbody></tbody>
	<tr>
		<td>A</td>
		<td>B</td>
		<td>C</td>
	</tr>
</table>
<script>
	var table = document.getElementById("table");
	console.dirxml(table);
</script>

六、console.assert()

console.assert()用來(lái)判斷一個(gè)表達(dá)式或變量是否為真。如果結(jié)果為否，則在控制臺(tái)輸出一條相應(yīng)的信息，并且拋出一個(gè)異常。比如，下面兩個(gè)判斷的結(jié)果都為否：

var result = 0;
console.assert(result);
var year = 2017;
console.assert(year == 2016);

登錄后復(fù)制

七、console.trace()

console.trace() 用來(lái)追蹤函數(shù)的調(diào)用軌跡。比如，有一個(gè)加法函數(shù)：

function add(a,b){ return a+b;} 如果想知道這個(gè)函數(shù)是如何被調(diào)用的，在其中加入console.trace() 方法就可以了。

function add(a,b){ console.trace(); return a+b;}假定這個(gè)函數(shù)的調(diào)用如下：

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

運(yùn)行后，會(huì)顯示add()的調(diào)用軌跡，從上到下依次為add()、add1()、add2()、add3()。

八、計(jì)時(shí)功能

console.time() 和 console.timeEnd()，用來(lái)顯示代碼的運(yùn)行時(shí)間。

console.time("Timer1");
for(var i=0;i<1000;i++){
 for(var j=0;j<1000;j++){}
}
console.timeEnd("Timer1");

九、性能分析

性能分析（Profiler）就是分析程序各個(gè)部分的運(yùn)行時(shí)間，找出瓶頸所在，使用方法是 console.profile()。

假定有一個(gè)函數(shù)Foo()，里面調(diào)用了另外兩個(gè)函數(shù)funcA()和funcB()，其中funcA()調(diào)用10次，funcB()調(diào)用1次，

function Foo(){ 
for(var i=0;i<10;i++){ funcA(1000); } 
funcB(1000); 
} 
function funcA(count){
 for(var i=0;i<count;i++){} 
} 
function funcB(count){
 for(var i=0;i<count;i++){} 
}

然后，就可以分析Foo()的運(yùn)行性能了。

到此，關(guān)于“javascript中控制臺(tái)怎么使用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！