【调试】js调试console.log使用总结图解(重要)

0.介绍

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

 

 

 

 

   今天要给你们介绍的就是是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代码：有图有真相：

 

 

    个人代码执行到161行，若是想打印下"result"，我就能够在Console中进行调试，输入代码："alert("result="+result);"回车便可，便可弹出result的结果；

 

 

 

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

 

 

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

 

api功能

    控制台的核心对象是Console，若是我想查看console都有哪些方法和属性，我能够直接在Console中输入“console”并执行；或者用"console.dir(console)",一样能够实现查看console对象的方法和属性；

 

 

 

 

    咱们再来查看一个经常使用函很多天期函数的方法，咱们利用“console.dir()”来查了日期函数的方法：

 

···

 

小结

 

    浏览器的console是个特别强大的面板，虽然如今我也只是发现了它的冰山一角，但就这冰山一角就已经深深将我折服了！这里也只是给你们推开一扇窗户，至于窗户之外的美景就须要你们本身去探索了。

一 实例

打印字符串和对象；

可展开对象查看内部状况；

看一下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()仅在控制台中打印相关信息，所以不会形成相似的顾虑

1、什么是console.log()？
除了一些很老版本的浏览器，现今大多数浏览器都自带调试功能；即便没有调试功能，也能够经过安装插件来进行补充。好比，老版本的Firefox没有自带调 试工具，在这种状况下能够经过安装Firebug插件来添加调试功能。在具有调试功能的浏览器上，window对象中会注册一个名为console的成员 变量，指代调试工具中的控制台。经过调用该console对象的log()函数，能够在控制台中打印信息。

console.log()能够接受任何字符串、数字和JavaScript对象。与alert()函数相似，console.log()也能够接受换行 符\n以及制表符\t。console.log()语句所打印的调试信息能够在浏览器的调试控制台中看到。不一样的浏览器中console.log()行为 可能会有所不一样， 
2、兼容没有调试控制台的浏览器
对于缺乏调试控制台的老版本浏览器，window中的console对象并不存在，所以直接使用console.log()语句可能会在浏览器内部形成错 误(空指针错误)，并最终致使某些老版本浏览器的崩溃。为了解决这一问题，能够人为定义console对象，并声明该console对象的log函数为空 函数；这样，当console.log()语句执行时，这些老版本的浏览器将不会作任何事情：
代码以下:
if(!window.console){
  window.console = {log : function(){}};
}
不过，在大多数状况下，没有必要去作这种兼容性工做 — console.log()等调试代码应当从最终的产品代码中删除掉。
3、使用参数
与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.”
4、使用其它日志级别
除了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控制台中能够看到，不一样日志级别的打印信息，其颜色和图标是不同的；同时，能够在控制台中选择不一样的日志级别来对这些信息进行过滤