JavaScript console物件與控制檯使用範例詳解

2022-10-16 14:00:33

1. console物件

console物件是JavaScript的原生物件,提供了很多用於偵錯的方法,如console.log輸出資訊,console.count記錄執行次數

console.log(console);

2. console的靜態方法

console.log()、console.info()、console.debug()

console.log的使用

console.log('一行文字');
const name = 'jack';
const age = 21;
console.log(name,age); //jack,21

使用預留位置

const name = 'ian';
const age = 21;
console.log('I am %s,i am %d years old',name,age);
//I am ian,i am 21 years old

%s 字串
%d 整數
%i 整數
%f 浮點數
%o 物件的連結
%c css格式字串

由於js是弱語言,沒有型別的靜態校驗,通常我們不會使用預留位置,而是直接使用字串變數或者模板字串。

console.info是console.log的別名,用法和console.log完全一致,console.debug和console.log的用法也基本一致

console.war()和console.error()

warn方法和error方法也是在控制檯輸出資訊，它們與log方法的不同之處在於，warn方法輸出資訊時，在最前面加一個黃色三角，表示警告；error方法輸出資訊時，在最前面加一個紅色的叉，表示出錯。同時，還會高亮顯示輸出文字和錯誤發生的堆疊。其他方面都一樣。

console.error('Error: %s (%i)', 'Server is not responding', 500)
// Error: Server is not responding (500)
console.warn('Warning! Too few nodes (%d)', document.childNodes.length)
// Warning! Too few nodes (1)

console.count()

console.count用於記錄程式碼執行次數

    function foo(){
      count = console.count();
    };
    foo(); //default: 1
    foo(); //default: 2

count方法還接收一個字串用於將計算結果進行分類

    function foo(){
      count = console.count('foo');
    };
    foo(); // foo: 1
    foo(); // foo: 2
    function bar(){
      count = console.count('bar');
    };
    bar(); // bar: 1
    bar(); // bar: 2
  </script>

console.dir()、console.dirxml()

console.dir()用於對一個物件進行檢查,並以易於閱讀的方式輸出

const user = {name:'ian', age:21};
console.log(user); //{name: 'ian', age: 21}
console.dir(user);
// Object
//   name: "ian"
//   age: 21
//   __proto__: Object

console.dirxml主要用於以目錄樹的形式顯示DOM節點

console.log(documnet.body);
console.dirxml(document.body);

console.assert()

console.assert接收兩個引數第一個是布林值,第二個是提示資訊,當第一個引數為true的時候,就顯示一個錯誤,但不會中斷程式碼的執行

console.assert(true,'陣列長度不能小於0')

console.time()、console.timeEnd

這兩個方法可以計算出一段程式碼執行完所用的時間

   console.time();
   for(let i=0;i<10000;i++){
    console.log(i);
   };
   console.timeEnd();
   //default: 164.182861328125 ms

console.trace()、console.clear()

console.trace方法顯示當前程式碼在堆疊種的呼叫路徑

    function foo() {
      console.trace();
    };
    function bar() {
      foo();
    };
    bar();
//index.html:14 console.trace
//foo @ index.html:14
//bar @ index.html:18
//(anonymous) @ index.html:20

console.clear()用於清空控制檯

3. 自定義console

console物件所有的方法都可以被覆蓋,因此可以自定義自己的方法

重寫console.log()方法,將其改為document.write

console.log = function(str){
 document.write(str);
};

設定連console物件本身也可以被修改

console = null; //null

4. 控制檯命令列API

4.1 $_

$_返回上一個表示式的值

1 + 2 ;
$_; //3

4.2 $0-$4

$0-$4儲存了最近5個在Element面板選中的元素,$0表示(最近存取)第一個,$1表示第二個以此類推

4.3 $(selector)

( s e l e c t o r ) 返回第一個匹配的元素 , 等同於 d o c u m e n t . q u e r y S e l e c t o r ( ) , 需要注意的是 (selector)返回第一個匹配的元素,等同於document.querySelector(),需要注意的是 (selector)返回第一個匹配的元素,等同於document.querySelector(),需要注意的是是可以被複寫的。

$$(selector)相當於document.querySelectorAll()

4.4 $x(path)

$x(path)返回一個陣列，包含匹配特定 XPath 表示式的所有 DOM 元素。

$x('//p[a]'); 
//返回所有包含a標籤的p元素

4.5 inspect(obj)

inspect方法用於顯示物件的具體資訊

inspect(window);

4.6 keys()和values()

keys()以陣列的形式返回物件的所有鍵名,values()以陣列的形式返回物件的所有鍵值

const obj = {name:'ian',age:21};
keys(obj);
//['name', 'age']
values(obj);
//['ian', 21]

4.7 其它的命令

copy() 複製，某個值到貼上板
clear() 清空控制檯
dir(object)：顯示特定物件的所有屬性，是console.dir方法的別名
dirxml(object)：顯示特定物件的 XML 形式，是console.dirxml方法的別名

到此這篇關於JavaScript console物件與控制檯使用範例詳解的文章就介紹到這了,更多相關JS console物件與控制檯內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！