JavaScript console對象與控制臺使用示例詳解

Posted on by

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對象與控制臺內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：