js调试系列 初识控制台

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

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

js调试系列目录：

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

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

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

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

点击右键的 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 输出对象信息，可以在控制台展开这对象查看具体信息。
例如：

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

可以直接看到对象信息，而不会显示 [object Object] 令我们一头雾水。

是不是突然觉得 console.log 屌爆了？
其实这只是他的冰山一角而已，我会尽量把他的一些优势都展现给你们看。
继续刚才的步骤，现在我们直接输入 arr 然后回车。

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

我们先来认识下 console 对象下还有那些方法供我们使用吧。
输入 console 然后回车，展开这个对象，

可以看一些深色和浅色的东西，深色的就是我们可以直接调用的方法了，浅色的表示默认属性或方法，展示无需关心，以后有机会再说。
其实常用的只有 log dir 而已，其他真心很少用，到高级调试才会用上。
group，table 之类的辅助性质，可用可不用，看你喜好了。我不太喜欢用。

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

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

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

赞 (0)

相关推荐

  • JavaScript调试技巧之console.log()详解

    JavaScript调试技巧之console.log()详解

    一.什么是console.log()?除了一些很老版本的浏览器,现今大多数浏览器都自带调试功能:即使没有调试功能,也可以通过安装插件来进行补充.比如,老版本的Firefox没有自带调试工具,在这种情况下可以通过安装Firebug插件来添加调试功能.在具备调试功能的浏览器上,window对象中会注册一个名为console的成员变量,指代调试工具中的控制台.通过调用该console对象的log()函数,可以在控制台中打印信息.比如,以下代码将在控制台中打印"Sample log": 复制代

  • js调试工具Console命令详解

    js调试工具Console命令详解

    一.显示信息的命令 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>常用console命令</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <script type="te

  • 利用Js的console对象,在控制台打印调式信息测试Js的实现

    一次偶然的机会,打开百度的时候按下了F12,然后就见控制台里面输出了百度的招聘广告,感觉挺帅气的,再然后就有了这篇博文. 既然可以这样在控制台输出信息,那以后再调试Js的时候不就可以省去很多麻烦了嘛!避免不误人子弟,特意使用for(var i in console)查看了下各种浏览器控制台对console的支持, 结果如下: IE 11 控制台 log , info , warn , error , debug , assert , time , timeEnd , group , groupC

  • js调试系列 初识控制台

    js调试系列 初识控制台

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

  • js调试系列 断点与动态调试[基础篇]

    js调试系列 断点与动态调试[基础篇]

    上几篇文章已经为大家介绍了js调试系列的一些基础知识,这次乱码兄弟为大家带来了js断点与动态调试方法,需要的朋友可以参考下 昨天留的课后练习 1. 分析 votePost 函数是如何实现 推荐 的. 其实我们已经看到了源码,只要读下源码即可知道他是怎么实现的了. function votePost(n, t, i) { i || (i = !1); var r = { blogApp: currentBlogApp, postId: n, voteType: t, isAbandoned: i

  • js调试系列 控制台命令行API使用方法

    js调试系列 控制台命令行API使用方法

    先打开百度,然后按 F12 打开后,如果不是 Console 项的就点击 Console 这项,因为我们要在控制台操作.. 看到如下内容: 好了我们先清空内容,可以右击选 Clear console 菜单,或者输入 clear() 都行. 接着,我们输入 document.getElementById('kw1'); 然后回车,就可以看到 id 为 kw1 的元素信息了. 是不是很简单.下一步是用 console.dir 查看该元素信息. 输入 console.dir(document.getE

  • js调试系列 源码定位与调试[基础篇]

    js调试系列 源码定位与调试[基础篇]

    我们先来处理第一个问题:1. 查看文章下方 推荐 这个功能所调用的函数源码 其实非常简单,点放大镜选中那个推荐即可. 这个  votePost(cb_entryId,'Digg')  就是推荐按钮所调用的函数了,是不是非常简单. 第二个问题,定位到函数所在文件位置. 其实也是非常简单的,当然,不熟悉控制台的朋友也许不知道怎么看. 我在控制台输入 votePost 然后回车, 函数源码粗显啦,并且在右下角有个链接 blog-common.js?v=WE8o1xrgcTu07QVvwYqERqD7A

  • JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】

    JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】

    Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等.今天就结合Bootstrap table的父子表和行列调序的用法再来介绍下它稍微高级点的用法. bootstrap table系列: JS表格组件神器bootstrap table详解(基础版) JS组件系列之Bootstrap table表格组件神器[终结篇] JS组件系列之Bootstrap t

  • 轻轻松松学JS调试（不下载任何工具）

    轻轻松松学JS调试（不下载任何工具）

    但是,我对JS调试还是有一定经验的: 首先当我们写好一段JS 的时候: 1. 点击IE浏览器 -- 工具栏 -- 点击开发人员工具或按F12我们调试界面 点击最左侧可以和 VS2005 一样设置断点了 点击调试: 就可以回到页面 运行 或 刷新 进行调试了 其实都 是微软的产品 难免和 VS 一样 ,所以学起来都很轻松 既然和VS也一样 自然 VS也能调试 JS 火狐也是差不多 选择错误控制台(CTRL+SHIFT+J) 可以直接输入JS测试 比较好用的就是 firefox+firebug结合查

  • JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题

    JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题

    正文 前言:一年前,博主分享过一篇关于bootstrapTable组件冻结列的解决方案  JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 ,通过该篇,确实可以实现bootstrapTable的冻结列效果,并且可以兼容ie浏览器.这一年的时间,不断有园友以及群里面的朋友问过我关于固定高度之后,冻结列页面效果不能对齐的问题,奈何博主太忙,一直没有抽空将这个问题优化.最近项目里面也不断有人提过这个bug,这下子不能再推了,必须要直面"惨淡的bug",于

  • 必备的JS调试技巧汇总

    必备的JS调试技巧汇总

    前言:任何一个编程者都少不了要去调试代码,不管你是高手还是菜鸟,调试程序都是一项必不可少的工作.一般来说调试程序是在编写代码之后或测试期修改Bug 时进行的,往往在调试代码期间更加能够体现出编程者的水平高低以及分析问题的准确度.不少初学者在寻找错误原因时,总是不得要领,花费了大量时间却无法解决一些最终证明是相当简单的Bug.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今天,如何在前端开发中降低开发成本,

  • JS组件系列之使用HTML标签的data属性初始化JS组件

    JS组件系列之使用HTML标签的data属性初始化JS组件

    前言:最近使用bootstrap组件的时候发现一个易用性问题,很多简单的组件初始化都需要在JS里面写很多的初始化代码,比如一个简单的select标签,因为仅仅只是需要从后台获取数据填充到option里面,可是从后台取数据就需要js的初始化,所以导致页面初始化的时候js的初始化代码里面出现很多重复的代码,看着很闹心.于是想起bootstrap table里面的data属性来,如果能够直接在html里面使用data-*这种方式来初始化简单的组件,那该多爽.我们先来看看bootstrap table的

  • JS组件系列之Bootstrap table表格组件神器【终结篇】

    JS组件系列之Bootstrap table表格组件神器【终结篇】

    bootstrap table系列: JS表格组件神器bootstrap table详解(基础版) JS组件系列之Bootstrap table表格组件神器[终结篇] JS组件系列之Bootstrap table表格组件神器[二.父子表和行列调序] Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等.那么本文给大家介绍JS组件系列之Bootstrap

随机推荐