返回
数据
分类

必赢手机登录网址函数会阻断JavaScript程序的执行,    今天我们重点要学的是开发者工具中的"Console"

日期: 2020-01-02 08:05 浏览次数 : 183

JavaScript调试之console.log调试的一个小技巧分享,

前言

对于JavaScript程序的调试,相比于alert(),使用console.log()是一种更好的方式,原因在于:alert()函数会阻断JavaScript程序的执行,从而造成副作用;

alert弹出框需要点击确认比较麻烦,而console.log()仅在控制台中打印相关信息,因此不会造成类似的顾虑。

最重要的是alert只能输出字符串,不能输出对象里面的结构,console.log()可以接受任何字符串、数字和JavaScript对象,可以看到清楚的对象属性结构,在ajax返回json数组对象时调试很方便。

//兼容Firefox/IE/Opera使用console.log
if(!window.console){
window.console = {log : function(){}};
}
window.console = window.console || {}; 
console.log || (console.log = opera.postError);

下面分享两张打印出来的信息图片:

必赢手机登录网址 1

上面简单的介绍了console.log调试,下面本文将给大家分享一个JavaScript中console.log调试的小技巧,话不多说,来一起看看详细的介绍:

console出正确的值

必赢手机登录网址 ,我们直接来看这一段代码

var obj = {
 name: '小傻子',
 age: 12
}
console.log(obj)
obj.name = '大傻子'

很明显我在第四行的位置添加了console是想查看obj在第四行的时候的值。

但是结果并不如意会打印出

{name: "大傻子", age: 12}

究其原因,是因为obj为引用型变量,console后面的操作同样会影响到console的内容。

我们看一下这一段代码

var obj = {
 name: '小傻子',
 age: 12
}
console.log(obj.name)
obj.name = '大傻子'

这个时候打印的结果就是预期的小傻子

解决方案

我们不可能去打印obj的所有属性,因为这是不现实的。我们还是希望打印obj但是得到在当前位置的结果,我下面贴出自己的解决方案

console.log(JSON.parse(JSON.stringify(obj)))

通过JSON的方法进行深拷贝是我知道的最简单有效的方法

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对帮客之家的支持。

前言 对于JavaScript程序的调试,相比于alert(),使用 console.log() 是一种更好的方式,原因在于...

0.介绍

先上图:不知道有多少人发现,在浏览器开发工具的“Console”上的百度首页的关于百度招聘的信息:

必赢手机登录网址 2

 

必赢手机登录网址 3

 

 

 

   今天要给大家介绍的就是是Web前端调试工具中的Console面板,应该说只要是个浏览器就会有的开发者工具,按F12出现的即是,就是我们上面图片上显示的Console,我这以谷歌浏览器为例进行下基本的讲解。

 

Console探险

    今天我们重点要学的是开发者工具中的"Console",在介绍Console之前,我们先将其它的几个面板介绍下:

    Element:主要是用来调试网页中的html标签代码和css样式代码

    Network:查看网页的http通信情况,包括Method、Type、Timeline(网络请求的时间响应情况)等

    Source:查看JS文件、调试JS代码

    Timeline:查看js的执行时间,页面元素渲染时间等

    Profiles:用来查看网页的性能,比如CPU和内存消耗

    Resources:用来查看加载的各种资源文件,比如js、css、图片等

    Audits:可以分析当前网页,可以快速的分析出哪些资源被使用、哪些资源没有使用,然后提出建议

    Console:可以查看错误信息、打印调试信息、调试js代码,还可以当作Javascript API查看

 

代码调试

 

    我们可以用console来调试js代码:有图有真相:

 

必赢手机登录网址 4

 

    我的代码执行到161行,如果想打印下"result",我就可以在Console中进行调试,输入代码:"alert("result="+result);"回车即可,即可弹出result的结果;

 

必赢手机登录网址 5

必赢手机登录网址 6

 

 

    或者是输入代码"console.log("result="+result);"直接打印结果也可,如下图:

必赢手机登录网址 7

 

 

    上面说了console的打印和调试功能,下面就来看下它的api功能:

 

api功能

    控制台的核心对象是Console,如果我想查看console都有哪些方法和属性,我可以直接在Console中输入“console”并执行;或者用"console.dir(console)",同样可以实现查看console对象的方法和属性;

 

必赢手机登录网址 8

 

必赢手机登录网址 9

 

 

    我们再来查看一个常用函数日期函数的方法,我们利用“console.dir()”来查了日期函数的方法:

必赢手机登录网址 10

 

···

 

小结

 

    浏览器的console是个特别强大的面板,虽然现在我也只是发现了它的冰山一角,但就这冰山一角就已经深深将我折服了!这里也只是给大家推开一扇窗户,至于窗户以外的美景就需要大家自己去探索了。

一 实例

打印字符串和对象;

必赢手机登录网址 11

可展开对象查看内部情况;

必赢手机登录网址 12

看一下console对象本身的定义情况;

必赢手机登录网址 13

输出对象情况;

必赢手机登录网址 14

utag对象所在文件;

必赢手机登录网址 15

输出对象;

必赢手机登录网址 16

二 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控制台中可以看到,不同日志级别的打印信息,其颜色和图标是不一样的;同时,可以在控制台中选择不同的日志级别来对这些信息进行过滤