这篇文章的目的只是让你认识控制台,让你入门调试js,之后的路还得靠你们自己走

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

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

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 元素的信息

最新资讯
瑞幸咖啡任命麦楷博平为独立审计方 取代安永

瑞幸咖啡任命麦楷博平

瑞幸咖啡宣布任命独立会计师事务所Marcum Bernstein &
石正丽:病毒溯源很重要,但可能永远找不到

石正丽:病毒溯源很重要

病毒溯源是一件非常重要的事,因为新冠病毒是一个新型冠
团车网第二季度营收5470万元 同比下滑73%

团车网第二季度营收54

团车网(Nasdaq:TC)今日发布了截至6月30日的2020年第二季
长期主义者阿里巴巴

长期主义者阿里巴巴

从某种意义上来说,阿里其实是一家活在明天的公司。
阿里互娱证实将升级为独立事业群

阿里互娱证实将升级为

据《晚点 LatePost》独家获悉,阿里巴巴游戏业务所属的
蚂蚁集团首发过会,从IPO受理到正式过会仅用时25天

蚂蚁集团首发过会,从IP

科创板上市委9月18日公告称,蚂蚁集团、奥普特首发过会
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,