谷歌浏览器F12前端调试工具 Console
前言
先上图：不知道有多少人发现，在浏览器开发工具的“Console”上的百度首页的关于百度招聘的信息：
Web前端调试工具中的Console面板，应该说只要是个浏览器就会有的开发者工具，按F12出现的即是，就是我们上面图片上显示的Console，我这以谷歌浏览器为例进行下基本的讲解。
Console探险
"Console"，在介绍Console之前，我们先将其它的几个面板介绍下：
：主要是用来调试网页中的html标签代码和css样式代码
http通信情况，包括Method、Type、Timeline（网络请求的时间响应情况）等
查看js文件、调试JS代码
line:查看js的执行时间，页面元素渲染时间等
CPU和内存消耗
js、css、图片等
Audits：可以分析当前网页，可以快速的分析出哪些资源被使用、哪些资源没有使用，然后提出建议
：可以查看错误信息、打印调试信息、调试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”上的百度首页的关于百度招聘的信息：
Web前端调试工具中的Console面板，应该说只要是个浏览器就会有的开发者工具，按F12出现的即是，就是我们上面图片上显示的Console，我这以谷歌浏览器为例进行下基本的讲解。
Console探险
"Console"，在介绍Console之前，我们先将其它的几个面板介绍下：
：主要是用来调试网页中的html标签代码和css样式代码
http通信情况，包括Method、Type、Timeline（网络请求的时间响应情况）等
查看js文件、调试JS代码
line:查看js的执行时间，页面元素渲染时间等
CPU和内存消耗
js、css、图片等
Audits：可以分析当前网页，可以快速的分析出哪些资源被使用、哪些资源没有使用，然后提出建议
：可以查看错误信息、打印调试信息、调试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是个特别强大的面板，虽然现在我也只是发现了它的冰山一角，但就这冰山一角就已经深深将我折服了！这里也只是给大家推开一扇窗户，至于窗户以外的美景就需要大家自己去探索了。
