js调试console.log使用总结图解
一 实例
打印字符串和对象;
可展开对象查看内部情况;
看一下console对象本身的定义情况;
输出对象情况;
utag对象所在文件;
输出对象;
二 Console.log 总结
1
如果你js没到一个境界,我就算教你调试bug,破解一些插件之类的,你也根本不知道我在做什么。我的目的只是让你认识控制台,让你入门调试,之后的路还得靠你们自己走。
不论是 chrome firefox ie(8以上版本) 还是 360急速浏览器 搜狗浏览器 等等,只要按 F12 就能打开控制台。
其实对于这 F12 而言,最确切的叫法是开发人员工具,Console 这一项才是控制台。
点击右键的 Clear console 菜单 或者 输入 clear() 然后按回车即可清空控制台内容。
我们进行第一步用 console.log 输出信息吧。
分别输入 console.log("hehe..") 和 console.log("hehe..", "haha..") 然后按回车,可以在控制台看到输出结果。
其实就是输出信息而,非常简单,用他代替 alert 和 document.write 调试,你的工作会变的非常轻松的。
例如调试一个循环这部分的代码,可是数组里却有几十个甚至上百个元素,alert 的话你会点疯掉的,
document.write 也不是不行,但是对于对象输出,你只能看到 [object Object] 这样的东西。
如果用 console.log 代替 alert document.write 输出对象信息,可以在控制台展开这对象查看具体信息。
可以直接看到对象信息,而不会显示 [object Object] 令我们一头雾水。
现在可以直接点击 Object 展开这个数组内的对象进行查看了,连循环输出都省了。
这就是控制台的魅力,而且这只是他最基础的功能而已。
可以看一些深色和浅色的东西,深色的就是我们可以直接调用的方法了,浅色的表示默认属性或方法,展示无需关心,以后有机会再说。
其实常用的只有 log dir 而已,其他真心很少用,到高级调试才会用上。
group,table 之类的辅助性质,可用可不用,看你喜好了。
2
之前在调试代码的时候,跟砸js代码执行情况,一般都是通过在代码块中使用alert的方式查看js代码的执行情况,今天也是看到有朋友使用console.log函数打印输出函数,变量,对象,下边就console.log的使用情况进行记录,具体的语法是:
console.log("值为:",fn);
console.log()能够输出变量,函数,数组,对象等等
3
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"}]]
*/
注:IE浏览器下默认是不支持console.log,反而会因为这句代码报错,所有ie下注释掉比较好
4
对于JavaScript程序的调试,相比于alert(),使用console.log()是一种更好的方式,原因在于:alert()函数会阻断JavaScript程序的执行,从而造成副作用;而console.log()仅在控制台中打印相关信息,因此不会造成类似的顾虑
一、什么是console.log()?
除了一些很老版本的浏览器,现今大多数浏览器都自带调试功能;即使没有调试功能,也可以通过安装插件来进行补充。比如,老版本的Firefox没有自带调试工具,在这种情况下可以通过安装Firebug插件来添加调试功能。在具备调试功能的浏览器上,window对象中会注册一个名为console的成员变量,指代调试工具中的控制台。通过调用该console对象的log()函数,可以在控制台中打印信息。
console.log()可以接受任何字符串、数字和JavaScript对象。与alert()函数类似,console.log()也可以接受换行符\n以及制表符\t。console.log()语句所打印的调试信息可以在浏览器的调试控制台中看到。不同的浏览器中console.log()行为可能会有所不同,
二、兼容没有调试控制台的浏览器
对于缺少调试控制台的老版本浏览器,window中的console对象并不存在,因此直接使用console.log()语句可能会在浏览器内部造成错误(空指针错误),并最终导致某些老版本浏览器的崩溃。为了解决这一问题,可以人为定义console对象,并声明该console对象的log函数为空函数;这样,当console.log()语句执行时,这些老版本的浏览器将不会做任何事情:
代码如下:
if(!window.console){
window.console = {log : function(){}};
}
不过,在大多数情况下,没有必要去做这种兼容性工作 — console.log()等调试代码应当从最终的产品代码中删除掉。
三、使用参数
与alert()函数类似,console.log()也可以接受变量并将其与别的字符串进行拼接:
代码如下:
//Use variable
var name = "Bob";
console.log("The name is: " + name);
与alert()函数不同的是,console.log()还可以接受变量作为参数传递到字符串中,其具体语法与C语言中的printf语法一致:
复制代码 代码如下:
//Use parameter
var people = "Alex";
var years = 42;
console.log("%s is %d years old.", people, years);
上述代码的执行结果为:”Alex is 42 years old.”
四、使用其它日志级别
除了console.log(),Firebug还支持多种不同的日志级别:debug、info、warn、error。以下代码将在控制台中打印这些不同日志级别的信息:
代码如下:
//Use different logging level
console.log("Log level");
console.debug("Debug level");
console.info("Info level");
console.warn("Warn level");
console.error("Error level");
从Firebug控制台中可以看到,不同日志级别的打印信息,其颜色和图标是不一样的;同时,可以在控制台中选择不同的日志级别来对这些信息进行过滤
js调试console.log使用总结图解相关推荐
- 开发chrome 插件, background.js中 console log 看不到解决方法
开发chrome 插件, background.js中 console log 看不到解决方法 参考文章: (1)开发chrome 插件, background.js中 console log 看不到 ...
- js调试控制台使用详解图解
一 实例图解 四种不同的console输出函数,输出信息前显示不同的图标: $查看某个元素: console.dir()可以显示一个对象所有的属性和方法: 分组显示信息: 显示digitalData对 ...
- js重写console.log函数
重写console.log函数 在前端开发中console.log是我们必不可少的调试工具,但是原生的console.log有两点不能很好地满足我们的需求 开发时需要log,但是上线时希望去掉log, ...
- js技巧 console.log使用
很多时候,我们就用到console.log()来输入一个信息,用了来调试,其实console对象有很多方法,今天针对一些常用的方法进行讲解. 输出带色彩的信息 console.log('消息内容!') ...
- ie浏览器下调试 console.log() 报错SCRIPT5007: 缺少对象
原来使用火狐和谷歌浏览器调试,直接用console.log(param);是没问题的 但是最近这个项目要兼容ie浏览器,发现报错SCRIPT5007: 缺少对象 在具备调试功能的浏览器上,window ...
- 【JS】console.log()打印出五彩斑斓的黑
逛B站不小心点到了F12,于是乎看到了蓝色的小电视,于是乎了解了一下 先大致说一下语法: console.log('%c巴拉%c巴拉','color:#fff','color:#000'); //上述 ...
- nodejs 下使用js封装console.log方法输出自定义的彩色字体,遇到Octal escape sequences are not allowed in template strings
阳光明媚,在家敲javascript的代码,控制台里清一色的黑底白字,我console.log出来的文字也是黑底白字淹没在茫茫字母海中,所以我想封装一下log方法,能自己定义字体还有背景的颜色,然后就 ...
- 手机端调试console.log,直接引入一个js文件
http://files.cnblogs.com/files/lwwen/mConsole.js 这是我写的一个原生js文件 直接引入即可,可以把html上面的需要打印的东西打印出来 <!DOC ...
- 将js中console.log打印的内容输出保存到txt文件的简单方法
方法 :结合DOS 简单的将输出信息保存到一个文件命令以及用node执行js代码的方法 电脑cmd输入如下命令: node print.js >D:\output.txt 其中node为安装好的 ...
最新文章
- 变量和指针——学习笔记
- 两周的时间教会我,要低头做人(jQuery实现京东购物车)
- 大规模计算时代:深度生成模型何去何从
- Linux系统xshell常用指令,linux系统安装数据库时,xshell工具常用MySQL(5.5)相关命令...
- 二叉树的三叉链表存储和基本操作
- okhttp3 模拟get、post(json参数传递,form表单提交)
- 原生python自带的ide_python自带的IDE是一个功能强大的IDE
- oracle 主键自增函数_Oracle数据库中创建自增主键的实例教程
- 跳一跳外挂的python实现--OpenCV步步精深
- Redis客户端工具 支持使用Redis命令行和集群
- 百度注册登录页面简单实现——仿照
- 软件实现串口程序出售,9600收发毫无压力。 采用io管脚模拟,适合串口资源欠缺的芯片使用。 stm32,tms320f28xx,PIC等
- Docker容器之Consul部署
- mmdetection3d的安装和使用
- 运行出现:Trying to start MapKit location updates without prompting for location authorization.
- Unity 的协程的原理
- 新买的键盘部分按键不好使失灵
- Kaggel Egg脑电图像癫痫预测——资料整理
- Linux_Shell脚本 + 配置文件:按照不同文件类型合并文件,小文件合并成大文件
- python获取文件夹下所有文件名