1. console對象

console對象是JavaScript的原生對象,提供了很多用于調(diào)試的方法,如console.log輸出信息,console.count記錄執(zhí)行次數(shù)

console.log(console);

2. console的靜態(tài)方法

• 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 整數(shù)
• %i 整數(shù)
• %f 浮點數(shù)
• %o 對象的鏈接
• %c css格式字符串

由于js是弱語言,沒有類型的靜態(tài)校驗,通常我們不會使用占位符,而是直接使用字符串變量或者模板字符串。

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

• console.war()和console.error()

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

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用于記錄代碼執(zhí)行次數(shù)

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

 count方法還接收一個字符串用于將計算結(jié)果進行分類

    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節(jié)點

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

• console.assert()

console.assert接收兩個參數(shù)第一個是布爾值,第二個是提示信息,當?shù)谝粋€參數(shù)為true的時候,就顯示一個錯誤,但不會中斷代碼的執(zhí)行

console.assert(true,'數(shù)組長度不能小于0')

• console.time()、console.timeEnd

這兩個方法可以計算出一段代碼執(zhí)行完所用的時間

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

• console.trace()、console.clear()

console.trace方法顯示當前代碼在堆棧種的調(diào)用路徑

    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)返回一個數(shù)組，包含匹配特定 XPath 表達式的所有 DOM 元素。

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

4.5 inspect(obj)

inspect方法用于顯示對象的具體信息

inspect(window);

4.6 keys()和values()

keys()以數(shù)組的形式返回對象的所有鍵名,values()以數(shù)組的形式返回對象的所有鍵值

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對象與控制臺內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論