js调试系列初识控制台
写在最开头:其实我以前就在考虑要不要写这个东西,因为这个东西确实不难,但是为什么会有这么多人问,他们问的不是怎么用控制台,而是不知道控制台能干嘛,他们也知道有console.log之类的东西,但他们不知道为什么要用这么长的字符串代替alert输出信息。在他们眼里alert足以。好吧,我承认小小的吐槽了下,不过这个系列我只打算介绍下调试的基本知识,不会涉及太深,因为深入的东西结合js知识,如果你js没到一个境界,我就算教你调试bug,破解一些插件之类的,你也根本不知道我在做什么。我的目的只是让你认识控制台,让你入门调试,之后的路还得靠你们自己走。
当然大侠请飘过,或者吐槽一下也行。。
js调试系列目录:
其实做web开发的都知道这东西,不论是前端还是后台,但是很多人只停留在html查看和css修改上,完全没有把控制台利用起来。
说不定有些刚入门的还不知道有这东西呢。。
这东西的资料网上一抓一大把,但是都没有讲调试方面的,只是介绍基本的怎么用而已。。
不论是chromefirefoxie(8以上版本)还是360急速浏览器搜狗浏览器等等,只要按F12就能打开控制台。
我们的文章以chrome为例讲解,不为什么,因为我喜欢chrome而已。。萝卜白菜各有所爱。。
ps:ff以前都是firebug的天下,现在原生的也非常不错了。
现在我们按一下F12打开控制台,点击Console这一项。
可以看到我的头像和几行文字,不过下面还有几行东西,我们暂时先忽略,以后会讲解的。
其实对于这F12而言,最确切的叫法是开发人员工具,Console这一项才是控制台。
PS:做为基础教程,我只介绍Console和Sources方面的调试,其他功能自己去了解吧。。
点击右键的Clearconsole菜单或者输入clear()然后按回车即可清空控制台内容。
我们进行第一步用console.log输出信息吧。
分别输入console.log("hehe..")和console.log("hehe..","haha..")然后按回车,可以在控制台看到输出结果。
其实就是输出信息而,非常简单,用他代替alert和document.write调试,你的工作会变的非常轻松的。
例如调试一个循环这部分的代码,可是数组里却有几十个甚至上百个元素,alert的话你会点疯掉的,
document.write也不是不行,但是对于对象输出,你只能看到[objectObject]这样的东西。
这是很多新人朋友遇到的真实问题。
如果用console.log代替alertdocument.write输出对象信息,可以在控制台展开这对象查看具体信息。
例如:
vararr=[{name:"尼玛",age:22},{name:"尼美",age:20}]; for(vari=0;i<arr.length;i++){ console.log(arr[i]); }
可以直接看到对象信息,而不会显示[objectObject]令我们一头雾水。
是不是突然觉得console.log?疟?耍?br/>
其实这只是他的冰山一角而已,我会尽量把他的一些优势都展现给你们看。
继续刚才的步骤,现在我们直接输入arr然后回车。
是不是更吊了,现在可以直接点击Object展开这个数组内的对象进行查看了,连循环输出都省了。
这就是控制台的魅力,而且这只是他最基础的功能而已。
我们先来认识下console对象下还有那些方法供我们使用吧。
输入console然后回车,展开这个对象,
可以看一些深色和浅色的东西,深色的就是我们可以直接调用的方法了,浅色的表示默认属性或方法,展示无需关心,以后有机会再说。
其实常用的只有logdir而已,其他真心很少用,到高级调试才会用上。
group,table之类的辅助性质,可用可不用,看你喜好了。我不太喜欢用。
我们走一步看一步吧,反正先从logdir说起,大部分的调试就靠他们了。
PS:其实应该给你们官方文档的,可是最近谷歌打不开,所以自行百度查看各个方法的功能吧。
找到个中文版,还不错,各位看先《console对象》。
来几个课后练习:(先打开百度,然后打开控制台)
1在控制台查看ID为kw1的元素信息
2然后用console.dir方法查看kw1元素的信息
相关文章
- 对 Node.js 事件驱动模型的深入理解
- js调试console.log使用总结图解
- WordPress网站js防扒代码-禁止右键/F12/调试自动关闭窗口
- 【说站】js代理模式是什么
- JS获取当前年份_js获取当前时间年月日
- jquery怎么写ajax_js中ajax写法
- get两个js小技能——JS截取视频第一帧&图片转Base64
- JS定时器详解编程语言
- js 事件流 捕获阶段 冒泡阶段 目标阶段详解编程语言
- JS dataset:获取HTML元素的自定义属性
- Linux上的JS压缩工具(js压缩工具linux)
- 使用JS在网页中连接Oracle数据库(js网页链接oracle)
- JavaScript探索之旅掌握Oracle和JS的完美融合(js与oracle)
- pjblog发表评论用的ajaxJS.js
- 在table中插入多行的js代码(与insertAdjacentHTML相似的功能)
- CSS和JS标签style属性对照表(方便js开发的朋友)
- js对象之JS入门之Array对象操作小结
- js获取url参数代码实例分享(JS操作URL)
- FireBug调试JS入门教程如何调试JS
- js获取当前地址JS获取当前URL的示例代码
- js调试工具console.log()方法查看js代码的执行情况