HTML控制台输出console,Javascript的console.log()用法
把下面代码保存为html文件,然后IE8---F12---脚本---控制台里就会出现有趣的东西,如果是Firefox,安装了FireBug后,则F12--控件台--所有 ,同样可以看到。
javascript的console.log()用法
/*
console.log 原先是 Firefox 的“专利”,严格说是安装了 Firebugs 之后的 Firefox 所独有的调试“绝招”。
这一招,IE8 学会了,不过用起来比 Firebugs 麻烦,只有在开启调试窗口(F12)的时候,console.log 才能出结果,不然就报错。
今天看到 Opera 也有个叫 dragonfly 的东东,用这东西查看 DOM,已经可以和 Firebug 媲美,然而还是不能用 console.log。于是有人就提供了这样两句代码:
window.console = window.console || {};
console.log || (console.log = opera.postError);
经测试,以上代码好使。
至此,Firefox/IE/Opera 都能用上 console.log 了。
当然,IE 和 Opera 下的 console.log 比起 Firebugs 原创的 console.log,还是太过简单,比如参数是 Object 或者数组就没有进一步的显示功能。
*/
//变量
var i = 'I am a string';
console.log('变量:',i);
//数组
var arr = [1,2,3,4,5];
console.log('数组:',arr);
//对象
var obj1 = {
key1 : 'value1',
key2 : 'value2',
key3 : 'value3'
};
var obj2 = {
key6 : 'value4',
key5 : 'value5',
key4 : 'value6'
};
var obj3 = {
key9 : 'value7',
key8 : 'value8',
key7 : 'value9'
};
console.log('对象:',obj1);
//对象数组
var objArr1 = [obj1,obj2,obj3];
var objArr2 = [[obj1],[obj2],[obj3]];
console.log('对象数组1:',objArr1);
console.log('对象数组1:',objArr2);
/*
输出:
变量:I am a string
数组:[1, 2, 3, 4, 5]
对象:Object { key1="value1", key2="value2", key3="value3"}
对象数组1:[Object { key1="value1", key2="value2", key3="value3"}, Object { key6="value4", key5="value5", key4="value6"}, Object { key9="value7", key8="value8", key7="value9"}]
对象数组1:[[Object { key1="value1", key2="value2", key3="value3"}], [Object { key6="value4", key5="value5", key4="value6"}], [Object { key9="value7", key8="value8", key7="value9"}]]
*/
附:
Firebug & Chrome Console 控制台的一些其他功能
console.log(object[, object, ...])
使用频率最高的一条语句:向控制台输出一条消息。支持 C 语言 printf 式的格式化输出。当然,也可以不使用格式化输出来达到同样的目的:
var animal='frog', count=10;
console.log("The %s jumped over %d tall buildings", animal, count);
console.log("The", animal, "jumped over", count, "tall buildings");
console.debug(object[, object, ...])
向控制台输出一条信息,它包括一个指向该行代码位置的超链接。
console.info(object[, object, ...])
向控制台输出一条信息,该信息包含一个表示“信息”的图标,和指向该行代码位置的超链接。
console.warn(object[, object, ...])
同 info。区别是图标与样式不同。
console.error(object[, object, ...])
同 info。区别是图标与样式不同。error 实际上和 throw new Error() 产生的效果相同,使用该语句时会向浏览器抛出一个 js 异常。
console.assert(expression[, object, ...])
断言,测试一条表达式是否为真,不为真时将抛出异常(断言失败)。
console.dir(object)
输出一个对象的全部属性(输出结果类似于 DOM 面板中的样式)。
console.dirxml(node)
输出一个 HTML 或者 XML 元素的结构树,点击结构树上面的节点进入到 HTML 面板。
console.trace()
输出 Javascript 执行时的堆栈追踪。
console.group(object[, object, ...])
输出消息的同时打开一个嵌套块,用以缩进输出的内容。调用 console.groupEnd() 用以结束这个块的输出。
console.groupCollapsed()
同 console.group(); 区别在于嵌套块默认是收起的。
console.time(name)
计时器,当调用 console.timeEnd(name);并传递相同的 name 为参数时,计时停止,并输出执行两条语句之间代码所消耗的时间(毫秒)。
console.profile([title])
与 profileEnd() 结合使用,用来做性能测试,与 console 面板上 profile 按钮的功能完全相同。
console.count([title])
输出该行代码被执行的次数,参数 title 将在输出时作为输出结果的前缀使用。
console.clear()
清空控制台
命令行
控制台的输出面板右边,是控制台的输入面板(Chrome 调试工具对应为下方),在这里除了可以运行常规的 javascript 代码,还内置了相当数量的命令行可以辅助我们的调试工作,下面是一些常用命令行的简单介绍。
$(id)
返回一个给定 id 的元素。
$$(selector)
返回给定的 css 选择器匹配到的一组元素。
$x(xpath)
返回给定的 XPath 表达式匹配到的一组元素。
$0
在 HTML 面板中选中的元素。
$1
上一次在 HTML 面板中选中的元素。
$n(index)
访问最近 5 个被选中过的元素,index 的范围: 0 – 4。
dir(object)
同 console.dir(object)。
dirxml(node)
同 console.dirxml(node)。
clear()
同 console.clear()。
inspect(object[, tabName])()
在合适的(或一个指定的) tab 中检视一个对象。
keys(object)
返回一个对象的所有属性的键。
values(object)
返回一个对象的所有属性的值。
debug(fn)
在函数第一行添加一个断点,使用 undebug(fn) 移除断点。
monitor(fn)
开启一个函数的调用日志,使用 unmonitor(fn) 关闭该功能。非常有用的一个命令,但是它似乎并没有很好地工作。
monitorEvents(object[, types])
开启一个元素的某个事件(或所有事件)被触发时的日志记录。用例如下:
monitorEvents($0,['click'])
上面的命令行被执行后,将开启当前在 HTML 面板中被选中元素的 click 事件监控,一旦这个元素的 click 事件被触发,事件对象将会在控制台输出。如果不指定第二个参数,将对所有事件进行记录。
profile([title])
同 console.profile([title])
分享到:更多
HTML控制台输出console,Javascript的console.log()用法相关推荐
- html 输出艺术字,控制台:控制台艺术字 为控制台输出增加样式(console.log( ))...
控制台/代码文档LOGO 除了知乎的控制台,大部分的代码文档都有这样的字符logo. 下面这个网站可以自动生成符号艺术字: 控制台输出通过多行log语句或者\n转义字符换行,如果用的是联想功能强大的编 ...
- html页面控制台输出,浏览器javascript输出控制台在哪?
浏览器输出控制台可以使用快捷键F12直接调出,或点击浏览器右上角菜单按钮,在弹出的下拉菜单中选择"工具/更多工具"-"开发者工具"即可打开输出控制台. cons ...
- php控制台输出视频教程,js如何实现控制台输出
在js中,可以使用Console 对象来实现控制台输出,常用的控制台输出命令有:console.log(). console.info().console.error().console.warn() ...
- java获取系统运行日志文件_java – 如何获取特定的日志文件并在jenkins控制台输出中显示其内容...
我有以下Jenkins post-build shell脚本: ssh user@my_server < service my_service stop service my_service s ...
- 理解javascript中的在控制台输出方式console.log
大家都有用过各种类型的浏览器,每种浏览器都有自己的特色,本人拙见,在我用过的浏览器当中,我是最喜欢Chrome的,因为它对于调试脚本及前端设计调试都有它比其它浏览器有过之而无不及的地方.可能大家对co ...
- 扩展:js控制台输出,除了 console.log还有哪些?
介绍: js的console你可以在firefox的firedbug或者ie和google的f12调试模式下看到,这些主流浏览器的调试模式的控制可以输出一些信息,你的一些js代码测试可以直接在cons ...
- 控制台输出console.log()的用法
用console.log代替alert和document.write,工作会变得轻松.用console.log在控制台展开对象查看具体信息,可以直接看到对象信息,而不会显示[object Object ...
- JS控制台输出,别只会 console.log 了
引言 控制台日志输出,别再只会 console.log 了,其实Console 对象还提供了很多方法.比如console.info().console.warn() .console.error()等 ...
- javaScript中console.log()的用法
console.log()类似于alert啊,不过不会打断操作.主要是方便调式javascript用的.你可以看到你在页面中输出的内容,不过需要浏览器支持控制台输出.在浏览器界面使用快捷键 F12 就 ...
最新文章
- jpa多表关联查询_JPA【关联查询篇】
- 【C++】 18_对象的构造 (中)
- SAP SD销售收入科目确定VKOA
- boost::units模块实现用常量测试所有运算符的组合的测试程序
- VTK:PolyData之SurfaceContourLineInterpolator
- oracle使用parallel并行,多线程查询
- 【JS 逆向百例】XHR 断点调试,Steam 登录逆向
- matlab createtask,Matlab批量与createjob
- 微软开发无人店技术叫阵Amazon Go,以后沃尔玛也能拿了就走?
- hive sql 替换指定的字符串
- 百度离线地图服务器搭建
- 【FinE】隐含波动率
- 解决Vue项目: verbose stack Error: unable to resolve dependency tree
- 【ABC 132 E】Hopscotch Addict(最短路)
- 华为交换机如何恢复出厂设置
- CAN总线网络知识(一)
- HTTPS请求方式工具类
- 移动4G网络App页面加载时间过长
- 计算机系统check,计算机巡回检测控制系统的容错设计(Fault-tolerant Design of Computer Cyclic Check and Control System)...
- 计算机控制 根轨迹,五计算机实时控制系统的设计根轨迹法PPT课件
热门文章
- java 如何实现分散对齐_[Android]TextView实现分散对齐(两端对齐)
- 这些道理以前没人告诉我-困惑我们人生的问题的答案
- SVM——详细讲解SMO算法优化两个变量以及变量的选择
- 【愚公系列】2022年11月 微信小程序-优购电商项目-商品收藏⻚⾯
- EasyUI的combobox使用总结
- Android基础入门教程——2.3.5.RadioButton(单选按钮)Checkbox(复选框)
- Excel教程:数值为0不显示的三种解决方法介绍,你都知道哪些?
- AlphaControls 控件Delphi使用
- 【C++】类和对象(上)
- ${0##*/}的意思