js调试系列 初识控制台


Posted in Javascript onJune 18, 2014

写在最开头:其实我以前就在考虑要不要写这个东西,因为这个东西确实不难,但是为什么会有这么多人问,他们问的不是怎么用控制台,而是不知道控制台能干嘛,他们也知道有 console.log 之类的东西,但他们不知道为什么要用这么长的字符串代替 alert 输出信息。在他们眼里 alert 足以。好吧,我承认小小的吐槽了下,不过这个系列我只打算介绍下调试的基本知识,不会涉及太深,因为深入的东西结合js知识,如果你js没到一个境界,我就算教你调试bug,破解一些插件之类的,你也根本不知道我在做什么。我的目的只是让你认识控制台,让你入门调试,之后的路还得靠你们自己走。

当然大侠请飘过,或者吐槽一下也行。。

js调试系列目录:

其实做web开发的都知道这东西,不论是前端还是后台,但是很多人只停留在html查看和css修改上,完全没有把控制台利用起来。
说不定有些刚入门的还不知道有这东西呢。。
这东西的资料网上一抓一大把,但是都没有讲调试方面的,只是介绍基本的怎么用而已。。

不论是 chrome firefox ie(8以上版本) 还是 360急速浏览器 搜狗浏览器 等等,只要按 F12 就能打开控制台。
我们的文章以 chrome 为例讲解,不为什么,因为我喜欢 chrome 而已。。萝卜白菜各有所爱。。
ps: ff 以前都是firebug的天下,现在原生的也非常不错了。

现在我们按一下 F12 打开控制台,点击 Console 这一项。

js调试系列 初识控制台

可以看到我的头像和几行文字,不过下面还有几行东西,我们暂时先忽略,以后会讲解的。
其实对于这 F12 而言,最确切的叫法是开发人员工具,Console 这一项才是控制台。
PS:做为基础教程,我只介绍 Console 和 Sources 方面的调试,其他功能自己去了解吧。。

点击右键的 Clear console 菜单 或者 输入 clear() 然后按回车即可清空控制台内容。
我们进行第一步用 console.log 输出信息吧。
分别输入 console.log("hehe..") 和 console.log("hehe..", "haha..") 然后按回车,可以在控制台看到输出结果。

js调试系列 初识控制台

其实就是输出信息而,非常简单,用他代替 alert 和 document.write 调试,你的工作会变的非常轻松的。

例如调试一个循环这部分的代码,可是数组里却有几十个甚至上百个元素,alert 的话你会点疯掉的,
document.write 也不是不行,但是对于对象输出,你只能看到 [object Object] 这样的东西。
这是很多新人朋友遇到的真实问题。

如果用 console.log 代替 alert document.write 输出对象信息,可以在控制台展开这对象查看具体信息。
例如:

var arr = [{name: "尼玛", age: 22}, {name: "尼美", age: 20}];
for (var i=0; i<arr.length; i++) {
	console.log(arr[i]);
}

js调试系列 初识控制台

可以直接看到对象信息,而不会显示 [object Object] 令我们一头雾水。
js调试系列 初识控制台

是不是突然觉得 console.log ?疟?耍?br /> 其实这只是他的冰山一角而已,我会尽量把他的一些优势都展现给你们看。
继续刚才的步骤,现在我们直接输入 arr 然后回车。
js调试系列 初识控制台

是不是更吊了,现在可以直接点击 Object 展开这个数组内的对象进行查看了,连循环输出都省了。
这就是控制台的魅力,而且这只是他最基础的功能而已。

我们先来认识下 console 对象下还有那些方法供我们使用吧。
输入 console 然后回车,展开这个对象,
js调试系列 初识控制台
可以看一些深色和浅色的东西,深色的就是我们可以直接调用的方法了,浅色的表示默认属性或方法,展示无需关心,以后有机会再说。
其实常用的只有 log dir 而已,其他真心很少用,到高级调试才会用上。
group,table 之类的辅助性质,可用可不用,看你喜好了。我不太喜欢用。

我们走一步看一步吧,反正先从 log dir 说起,大部分的调试就靠他们了。
PS:其实应该给你们官方文档的,可是最近谷歌打不开,所以自行百度查看各个方法的功能吧。

找到个中文版,还不错,各位看先《console对象》。

来几个课后练习:(先打开百度,然后打开控制台)
1 在控制台查看 ID 为 kw1 的元素信息
2 然后用 console.dir 方法查看 kw1 元素的信息

Javascript 相关文章推荐
jQuery插件开发详细教程
Jun 06 Javascript
JavaScript中的类(Class)详细介绍
Dec 30 Javascript
Jsonp post 跨域方案
Jul 06 Javascript
javascript比较两个日期相差天数的方法
Jul 24 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 Javascript
理解javascript异步编程
Jan 27 Javascript
jQuery基础知识点总结(DOM操作)
Jun 01 Javascript
JS实现鼠标滑过显示边框的菜单效果
Sep 21 Javascript
JavaScript用200行代码制作打飞机小游戏实例
Jun 21 Javascript
浅析java线程中断的办法
Jul 29 Javascript
Vue Prop属性功能与用法实例详解
Feb 23 Javascript
node将geojson转shp返回给前端的实现方法
May 29 Javascript
ext前台接收action传过来的json数据示例
Jun 17 #Javascript
Ext GridPanel加载完数据后进行操作示例代码
Jun 17 #Javascript
ext中store.load跟store.reload的区别示例介绍
Jun 17 #Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 #Javascript
javascript setinterval 的正确语法如何书写
Jun 17 #Javascript
ext combobox动态加载数据库数据(附前后台)
Jun 17 #Javascript
JavaScript实现简单图片滚动附源码下载
Jun 17 #Javascript
You might like
PHP与SQL注入攻击[三]
2007/04/17 PHP
PHP的cURL库简介及使用示例
2015/02/06 PHP
php实现模拟post请求用法实例
2015/07/11 PHP
php基于PDO实现功能强大的MYSQL封装类实例
2017/02/27 PHP
图片上传即时显示缩略图的js代码
2009/05/27 Javascript
jquery 关于event.target使用的几点说明介绍
2013/04/26 Javascript
JS判断移动端访问设备并加载对应CSS样式
2014/06/13 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
2015/10/12 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
详解JavaScript中基于原型prototype的继承特性
2016/05/05 Javascript
vue中实现滚动加载更多的示例
2017/11/08 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
JavaScript禁用右键单击优缺点分析
2019/01/20 Javascript
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
jQuery实现消息弹出框效果
2019/12/10 jQuery
原生JS实现留言板功能
2020/02/08 Javascript
JavaScript实现点击出现子菜单效果
2021/02/08 Javascript
[02:27]刀塔重生降临
2015/10/14 DOTA
[01:10]DOTA2 Supermajor:英雄,由我们见证
2018/05/14 DOTA
[00:48]DOTA2国际邀请赛公开赛报名开始 扫码开启逐梦之旅
2018/06/06 DOTA
pandas 空的dataframe 插入列名的示例
2018/10/30 Python
python中的Elasticsearch操作汇总
2019/10/30 Python
Python利用matplotlib绘制约数个数统计图示例
2019/11/26 Python
pytorch下使用LSTM神经网络写诗实例
2020/01/14 Python
python实现ip地址的包含关系判断
2020/02/07 Python
解决python图像处理图像赋值后变为白色的问题
2020/06/04 Python
python中实现栈的三种方法
2020/12/19 Python
加拿大在线旅游公司:Flighthub
2019/03/11 全球购物
武汉某公司的C#笔试题面试题
2015/12/25 面试题
艺术系应届生的自我评价
2013/10/19 职场文书
求职意向书
2014/07/29 职场文书
2014年学校禁毒工作总结
2014/12/23 职场文书
家长会开场白和结束语
2015/05/29 职场文书
农村婚礼司仪主持词
2015/06/29 职场文书
python glom模块的使用简介
2021/04/13 Python