国产视频app 在前端調試js代碼的時候,很多人都喜歡用 alert() 來進行調試,但是 alert() 會阻斷JS的運行,而且對一些類型的變量無法輸出,這就造成了不少的麻煩。針對這個問題,這篇文章就說一說js中的別一種調試方法 console.log()

console.log()定義

国产视频app console.log():可以將變量輸出到瀏覽器的控制臺中,方便開發者調用JS代碼,它是一個使用頻率很高的功能。

提示:瀏覽器中按 F12 可以打開瀏覽器的控制臺(也可以叫做開發者工具)

語法:

console.log(var);

參數:

国产视频app var:變量,可以是數組類型,對象類型,或者字符串類型等

console.log()用法

国产视频app 1、console.log()打印字符串

<script>
    var str = 'feiniaomy.com';
    console.log(str);
    var str2 = '飛鳥慕魚博客';
    console.log(str2);
</script>

打印結果:

JS調試之console.log()作用與用法

国产视频app 2、console.log()打印數組

<script>
    var arr = new Array('beijing','shandong','hangzhou','guangdong');
    console.log(arr);
</script>

打印結果:

JS調試之console.log()作用與用法

国产视频app 3、console.log打印一個對象變量

<script>
    var obj = { Host: "http://xswdd.cn", Name: "飛鳥慕魚博客"};
    console.log(obj);
</script>

打印結果:

JS調試之console.log()作用與用法

console.log()高級用法

console.log()可以通過一些特有的占位符進行信息的加工輸出,當然你只要粗略的了解一下即可

国产视频app console.log()用到的占位符號

%s:字符串

%d:整數

%i:整數

%f:浮點數

%o:obj對象

%O:obj對象

%c:CSS樣式

例:利用console.log()打印出對象和DOM節點,

1、打印一個DOM節點,區別占位符 %o 與 %O不同

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div id="mochu">飛鳥慕魚博客<br/>http://xswdd.cn</div>
<script>
    console.log(document.body);
    console.log('%o',document.body);
    console.log('%O', document.body);
</script>
</body>
</html>

打印結果:

JS調試之console.log()作用與用法

2、打印一個obj對象,區別占位符 %o 與 %O不同

<script>
    var obj = {'name':'MOCHU','age':'22','page':'http://xswdd.cn'};
    console.log(obj);
    console.log(obj);
    console.log(obj);
</script>

打印結果:

JS調試之console.log()作用與用法

注意:

1、%o、%O都是用來輸出Obj對象的

国产视频app 2、%o、%O在打印普通對象時,是沒有區別的

国产视频app 3、%o、%O在打印DOM節點時,區別是很大的

例:利用console.log()打印整數,

1、使用%d占位符,并進行計算

<script>
    console.log('%d + %d =' ,1,2,3);
</script>

打印結果:

JS調試之console.log()作用與用法

2、使用%i占位符并進行計算

<script>
    console.log('%i + %i =' ,1,2,3);
</script>

打印結果:

JS調試之console.log()作用與用法

例:利用console.log()打印帶有樣式的文字

<script>
    console.log('飛鳥%c慕魚%c博客' ,'color:red','color:blue');
</script>

打印結果:

JS調試之console.log()作用與用法