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实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
Jul 01 Javascript
如何让DIV可编辑、可拖动示例代码
Sep 18 Javascript
jquery实现页面图片等比例放大缩小功能
Feb 12 Javascript
javascript数组遍历for与for in区别详解
Dec 04 Javascript
js实现点击左右按钮轮播图片效果实例
Jan 29 Javascript
JS作为值的函数用法示例
Jun 20 Javascript
第一次接触神奇的Bootstrap
Oct 14 Javascript
js实现简单的手风琴效果
Feb 27 Javascript
javascript实现数据双向绑定的三种方式小结
Mar 09 Javascript
JScript实现地址选择功能
Aug 15 Javascript
JavaScript实现网页tab栏效果制作
Nov 20 Javascript
Three.js实现雪糕地球的使用示例详解
Jul 07 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
CodeIgniter删除和设置Cookie的方法
2015/04/07 PHP
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
jquery实现动静态条形统计图
2015/08/17 Javascript
jquery.validate使用详解
2016/06/02 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
js仿微信抢红包功能
2020/09/25 Javascript
js判断文件类型大小并给出提示的实现方法
2018/01/03 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
2019/01/05 jQuery
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
2019/01/19 Javascript
小程序getLocation需要在app.json中声明permission字段
2019/04/04 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
Python中正则表达式的详细教程
2015/04/30 Python
解析Python中的二进制位运算符
2015/05/13 Python
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
python中redis查看剩余过期时间及用正则通配符批量删除key的方法
2018/07/30 Python
Python3删除排序数组中重复项的方法分析
2019/01/31 Python
django 环境变量配置过程详解
2019/08/06 Python
详解用python计算阶乘的几种方法
2019/08/14 Python
Python Collatz序列实现过程解析
2019/10/12 Python
关于sys.stdout和print的区别详解
2019/12/05 Python
简单了解python装饰器原理及使用方法
2019/12/18 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
python数据分析工具之 matplotlib详解
2020/04/09 Python
Python sublime安装及配置过程详解
2020/06/29 Python
Sperry官网:帆船鞋创始品牌
2016/09/07 全球购物
实习求职信
2013/12/01 职场文书
读书活动总结范文
2014/04/26 职场文书
工作作风承诺书
2014/08/30 职场文书
党的群众路线对照检查材料(个人)
2014/09/24 职场文书
党的群众路线教育实践活动教师自我剖析材料
2014/10/09 职场文书
2014年销售经理工作总结
2014/12/01 职场文书
幼儿园托班开学寄语(2016春季)
2015/12/03 职场文书
SpringBoot+Vue+JWT的前后端分离登录认证详细步骤
2021/09/25 Java/Android