javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JS console对象与控制台

JavaScript console对象与控制台使用示例详解

作者:爱思考的猪

这篇文章主要介绍了JavaScript console对象与控制台的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧

1. console对象

console对象是JavaScript的原生对象,提供了很多用于调试的方法,如console.log输出信息,console.count记录执行次数

console.log(console);

2. console的静态方法

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

由于js是弱语言,没有类型的静态校验,通常我们不会使用占位符,而是直接使用字符串变量或者模板字符串。

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

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用于记录代码执行次数

    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()用于对一个对象进行检查,并以易于阅读的方式输出

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接收两个参数第一个是布尔值,第二个是提示信息,当第一个参数为true的时候,就显示一个错误,但不会中断代码的执行

console.assert(true,'数组长度不能小于0')

这两个方法可以计算出一段代码执行完所用的时间

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

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 其它的命令

到此这篇关于JavaScript console对象与控制台使用示例详解的文章就介绍到这了,更多相关JS console对象与控制台内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文