JavaScript console的使用方法实例分析


Posted in Javascript onApril 28, 2020

本文实例讲述了JavaScript console的使用方法。分享给大家供大家参考,具体如下:

Console 对象提供对浏览器控制台的接入(如:Firefox 的 Web Console)。不同浏览器上它的工作方式是不一样的,但这里会介绍一些大都会提供的接口特性。

Console对象可以在任何全局对象中访问,如 Window,WorkerGlobalScope 以及通过属性工作台提供的特殊定义。

它被浏览器定义为 Window.console,也可被简单的 console 调用。

方法

console.log()

console.log(obj1 [, obj2, ..., objN);
console.log(msg [, subst1, ..., substN);
console.log('String: %s, Int: %d,Float: %f, Object: %o', str, ints, floats, obj)
console.log(`temp的值为: ${temp}`)

对于打印对象数据的时候要注意:

原来浏览器在打印对象的时候只是打印的一个对象快照信息,当你在控制台点击展开对象的时候,浏览器才会去读这个对象具体属性,但是那个时候,这段代码早就已经运行完了

类似出现这种,都为null的情况:

SyntheticClipboardEvent {dispatchConfig: {…}, _targetInst: ReactDOMComponent, nativeEvent: ClipboardEvent, type: "paste", target: input, …}
bubbles: null
cancelable: null
clipboardData: null
currentTarget: null
defaultPrevented: null
dispatchConfig: null
eventPhase: null
isDefaultPrevented: null
isPropagationStopped: null
isTrusted: null
nativeEvent: null
target: null
timeStamp: null
type: null
_dispatchInstances: null
_dispatchListeners: null
_targetInst: null
__proto__: SyntheticEvent

console.table()

这个方法需要一个必须参数 data,data 必须是一个数组或者是一个对象;还可以使用一个可选参数 columns。

JavaScript console的使用方法实例分析

表格的第一列是 index。如果数据 data 是一个数组,那么这一列的单元格的值就是数组的索引。 如果数据是一个对象,那么它们的值就是各对象的属性名称。 注意(在 FireFox 中)console.table 被限制为只显示1000行(第一行是被标记的索引(原文:labeled index))。

JavaScript console的使用方法实例分析

console.assert()

console.assert为断言输出。第一个参数的表达式值为false时,则打印输出后面参数的值,否则为 true,则无输出并继续执行程序。例如:

function notEqual(a, b) {
  console.assert(a === b, {
    msg: 'a is not equal b', 
    a: a,
    b: b
  });
}

// console.assert
notEqual({a: 1}, {a: 2});

console.time

你可以启动一个计时器(timer)来跟踪某一个操作的占用时长。每一个计时器必须拥有唯一的名字,页面中最多能同时运行10,000个计时器。当以此计时器名字为参数调用 console.timeEnd() 时,浏览器将以毫秒为单位,输出对应计时器所经过的时间.

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Javascript处理DOM元素事件实现代码
May 23 Javascript
jQuery Tools tab(幻灯片)
Jul 14 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
Dec 07 Javascript
iframe父页面获取子页面参数的方法
Feb 21 Javascript
jQuery scroll事件实现监控滚动条分页示例
Apr 04 Javascript
jquery序列化方法实例分析
Jun 10 Javascript
简单掌握JavaScript中const声明常量与变量的用法
May 21 Javascript
vue.js指令v-model实现方法
Dec 05 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
vue写h5页面的方法总结
Feb 12 Javascript
es6中使用map简化复杂条件判断操作实例详解
Feb 19 Javascript
vue项目实现减少app.js和vender.js的体积操作
Nov 12 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
Apr 28 #Javascript
JavaScript Date对象功能与用法学习记录
Apr 28 #Javascript
JavaScript 链表定义与使用方法示例
Apr 28 #Javascript
Vue 3.0 全家桶抢先体验
Apr 28 #Javascript
React生命周期原理与用法踩坑笔记
Apr 28 #Javascript
js最全的数组的降维5种办法(小结)
Apr 28 #Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
Apr 28 #Javascript
You might like
php Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
Javascript & DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
浅析js封装和作用域
2013/07/09 Javascript
javascript中attribute和property的区别详解
2014/06/05 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
2014/08/27 Javascript
底部悬浮通栏可以关闭广告位的实现方法
2016/06/01 Javascript
分享一个插件实现水珠自动下落效果
2016/06/01 Javascript
JS锚点的设置与使用方法
2016/09/05 Javascript
JavaScript原生节点操作小结
2017/01/17 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
ES6中module模块化开发实例浅析
2017/04/06 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
2019/03/08 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
Javascript查看大图功能代码实现
2020/05/07 Javascript
js实现无刷新监听URL的变化示例代码详解
2020/06/03 Javascript
[46:53]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[01:28]国服启动器接入蒸汽平台操作流程视频
2021/03/11 DOTA
python3.5实现socket通讯示例(TCP)
2017/02/07 Python
Python中按值来获取指定的键
2019/03/04 Python
Python函数和模块的使用总结
2019/05/20 Python
scrapy利用selenium爬取豆瓣阅读的全步骤
2020/09/20 Python
CSS3中设置3D变形的transform-style属性详解
2016/05/23 HTML / CSS
联想台湾官网:Lenovo TW
2018/05/09 全球购物
耐克亚太地区:Nike APAC
2019/12/07 全球购物
RUIFIER官网:英国奢侈高级珠宝品牌
2020/06/12 全球购物
如何定义一个可复用的服务
2014/09/30 面试题
销售心得体会
2014/01/02 职场文书
高校教师思想汇报
2014/01/11 职场文书
玩手机检讨书1000字
2014/10/20 职场文书
社区灵活就业证明
2014/11/03 职场文书
2014年精神文明工作总结
2014/12/23 职场文书
小学英语教学反思范文
2016/02/15 职场文书
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android