JavaScript console对象与控制台使用介绍_F11 - 专业站长和开发者的学习网站

分享到

JavaScript console对象与控制台使用介绍

JavaScript 来源：互联网作者：秩名发布时间：2022-10-16 21:09:57 人浏览

摘要

1. console对象 console对象是JavaScript的原生对象,提供了很多用于调试的方法,如console.log输出信息,console.count记录执行次数 1 console.log(console); 2. console的静态方法 console.log()、console.info()、co

1. console对象

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

1	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节点

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

console.assert()

console.assert接收两个参数第一个是布尔值,第二个是提示信息,当第一个参数为true的时候,就显示一个错误,但不会中断代码的执行

1	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对象本身也可以被修改

1	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 元素。

1 2	$x('//p[a]'); //返回所有包含a标签的p元素

4.5 inspect(obj)

inspect方法用于显示对象的具体信息

1	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方法的别名

您可能感兴趣的文章 :

原文链接 : https://blog.csdn.net/qq_44621394/article/details/127039804

Tag : JavaScript(102)控制台(5)对象(12)console(3)

vue el-switch初始值(默认值)不能正确显示状态问题

el-switch 初始值（默认值）不能正确显示状态先去检查一下接口返回格式如果是字符串不需要加冒号 1 active-value=1 inactive-value=2 如果是数字
微信小程序跳转外部链接的实现方法

微信小程序跳转外部链接在开发小程序过程中，我们可能会有这样的需求，在小程序中打开H5或者外部链接实现方法如下： 1、配置业务域
自己写一个uniapp全局弹窗(APP端)

效果图： uniapp自带的提示框不符合我们的要求，需要自己写一个提示框，且全局通用。解决思路: 使用 plus.nativeObj 来绘制窗口以及事件监听
JavaScript console对象与控制台使用介绍

1. console对象 console对象是JavaScript的原生对象,提供了很多用于调试的方法,如console.log输出信息,console.count记录执行次数 1 console.log(console); 2.
JavaScript错误处理机制全面分析介绍

1. Error 实例 JavaScript在运行错误时会抛出一个错误,JS提供了Error构造函数,所有抛出的错误都是这个构造函数的实例 1 2 const err = new Error(代码出
JavaScript Object.defineProperty与proxy代理模式的使用详

1. Object.defineProperty 1 2 const obj = {}; Object.defineProperty(obj,prop,descript); 参数 obj 要定义属性的对象 prop 要定义的属性 descript 属性描述符返回值
Javascript Object对象类型使用介绍

1. 生成方法对象是javaScript中的一种数据类型,它是key-value的合集，是无序的 1 2 3 4 const obj = { name: ian,age: 21}; //key使用变量 const gender = gender
JavaScript代码不能被阻断的稳定性建设

背景稳定性建设之JavaScript代码不能被阻断 js代码可能会因为某些原因，导致出错，进而整个后续代码有可能都被阻断。直接影响线上的稳定
JavaScript前端学算法题解LeetCode最大重复子字符串

最大重复子字符串给你一个字符串sequence，如果字符串word连续重复k次形成的字符串是sequence的一个子字符串，那么单词word的重复值为k。单
uni-app小程序沉浸式导航实现的全过程

项目要在多个页面上加自定义导航栏，还要有渐变效果，就是随着页面上滑，导航栏透明度由0逐渐变为1。这里面有几个基本点需要注意下。

JavaScript console对象与控制台使用介绍

1. console对象

2. console的静态方法

3. 自定义console

4. 控制台命令行API

4.1 $_

4.2 $0-$4

4.3 $(selector)

4.4 $x(path)

4.5 inspect(obj)

4.6 keys()和values()

4.7 其它的命令

您可能感兴趣的文章 :

vue el-switch初始值(默认值)不能正确显示状态问题

微信小程序跳转外部链接的实现方法

自己写一个uniapp全局弹窗(APP端)

JavaScript console对象与控制台使用介绍

JavaScript错误处理机制全面分析介绍

JavaScript Object.defineProperty与proxy代理模式的使用详

Javascript Object对象类型使用介绍

JavaScript代码不能被阻断的稳定性建设

JavaScript前端学算法题解LeetCode最大重复子字符串

uni-app小程序沉浸式导航实现的全过程

React配置子路由的实现

微信小程序地图(map)组件点击(tap)获取

微信小程序实现工作时间段选择

用js实现猜数字小游戏的代码

vue与react的介绍