JavaScript?console對象與控制臺如何使用

這篇文章主要介紹了JavaScript console對象與控制臺如何使用的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇JavaScript console對象與控制臺如何使用文章都會有所收獲，下面我們一起來看看吧。

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對象與控制臺如何使用”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“JavaScript console對象與控制臺如何使用”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。