转 利用 Console 来学习、调试JavaScript

利用 Console 来学习、调试JavaScript

一  什么是 Console

Console 是用于显示 JS和 DOM 对象信息的单独窗口。并且向 JS 中注入1个 console 对象,使用该对象 可以输出信息到 Console 窗口中。

二  什么浏览器支持 Console

很多人可能都知道 Chrome 和 FireFox(FireBug)中都支持 Console。而其他浏览器都支 持不好。比如 IE8 自带的开发工具虽然支持 Console,但功能比较单调,显示对象的时候都是显示 [Object,Object],而且不能点击查看对象里面的属性。IE6、IE7 虽然可以安装 Developer Toolbar,但也 不支持 console。Safari、Opera 都支持 Console,但使用上都没有 FireBug和 Chrome 的方便。 现在firebug推出了 firebuglite工具,可以让所有浏览器都支持Console功能,而且使用上和FireBug 几乎一样。详见 http://getfirebug.com/firebuglite

三  为什么不直接使用 alert 或自己写的 log

使用 alert 不是一样可以显示信息,调试程序吗?alert 弹出窗口会中断程序, 如果要在循环中显示信息,手点击关闭窗口都累死。而且 alert 显示对象永远显示为[object ]。 自己写的 log 虽然可以显示一些 object 信息,但很多功能支持都没有 console 好,看完后面 console 的介绍就知道了。



(部分比较鸡肋的方法没有列出来,用粗蓝标出来的是常用的方法)

四  Console.log(object[, object, ...])

Console.log 是最简单输出信息到 console 窗口的方法,支持多个参数,该方法会把 这些参数组合在一起显示,e.g:

log 方法第一个参数支持类似 C 语言 printf 字符串替换模式,Log 支持下面几种替换模式:

  • %s  代替字符串
  • %d  代替整数
  • %f  代替浮点值
  • %o  代替 Object

e.g:

五  console.debug,info,warn,error

这 4 种方法与 log 方法使用一模一样,只是显示的图标和文字颜色不一样.

六  console.assert(expression[, object, ...])

assert 方法类似于单元测试中的断言,当 expression 表达式为 false 的时候,输出后面的信息,e.g: 注:assert 方法在 firebuglite 不支持,Chrome 和 FireBug 支持

七  console.clear()

该方法清空 console 中的所有信息 (Chrome中不支持)

八  console.dirxml(node)

把 html 元素的html 代码打印出来,等同于log.

九  console.trace()

trace 方法可以查看当前函数的调用堆栈信息,即当前函数是如何调用的,e.g:

十  console.group(object[, object, ...]), groupCollapsed, groupEnd

这 3 个函数用于把 log 等输出的信息进行分组,方便阅读查看。

groupCollapsed 方法与 group 方法一样,只是显示的分组默认是折叠的.

十一  console.time(name)/console.timeEnd(name)

我们经常需要测试 js 函数的执行时间,可能我们自己写代码在第1 条语句和 最后 1 条语句取当前时间相减。这组函数其实就实现了这样的功能,time(name)根据 name 创建 1 个新 的计时器。timeEnd(name)停止给定name 的计时器,并显示时间。

十二  console.profile(name)/console.profileEnd()

这组方法用于打开浏览器的分析器,用于分析这组函数之间的 js 执行情况, 注:firebuglite 不支持 profile 功能,Chrome 支持 profile,但分析的内容不详。

十三  console.count([title])

count 方法用于统计当前代码被执行过多少次,title 参数可以在次数前面输出额外的标题以帮助阅读。e.g:

十四  console.table(data)

table 方法把data 对象用表格的方式显示出来,这在显示数组或者格式一样的JSON 对象的时候非常有用。

注:table 只支持 FireBug,而且是在 firebug1.6+版本后才有。

总结: Console 是帮助我们学习和调试 JS的 1 个非常好工具,如果你以前没用过,哪现在就开始用它吧。

你会发现它能帮你省很多开发时间的。

时间: 2024-08-19 21:33:32

转 利用 Console 来学习、调试JavaScript的相关文章

如何利用好chrome控制台这个神器好好调试javascript代码

上面的文章已经大致介绍了一下console对象具体有哪些方面以及基本的应用,下面简单介绍一下如何利用好chrome控制台这个神器好好调试javascript代码(这个才是我们真正能用到实处的地方) 1.先说一下源码定位 大家打开测试网页   看到页面右下方有一个推荐的图标吗?右击推荐图标,选择审查元素,打开谷歌控制台,如下图所示 我们现在想知道votePost方法到底在哪?跟着我这样做,在Console面板里面输入votePost然后回车 直接点击上图标红的链接,控制台将定位到Sources面板

chrome调试 JavaScript 脚本

随着 JavaScript 应用的复杂性逐渐提高,开发者需要有力的调试工具来帮助他们快速发现问题的原因,并且能高效地修复它.Chrome DevTools 提供了一系列实用的工具使得调试 JavaScript 应用不再是一件痛苦的事. 在这个部分,我们会通过调试 Google Closure hovercard demo 以及其他的动态示例来让你了解怎么去使用这些工具. 注意:如果你是 Web 开发者并且希望获得最新版的 DevTools,你应该使用 Chrome Canary 源面板 源面板允

Chrome 控制台 如何调试javascript

上面的文章已经大致介绍了一下console对象具体有哪些方面以及基本的应用,下面简单介绍一下如何利用好chrome控制台这个神器好好调试javascript代码(这个才是我们真正能用到实处的地方) 1.先说一下源码定位 大家打开测试网页   看到页面右下方有一个推荐的图标吗?右击推荐图标,选择审查元素,打开谷歌控制台,如下图所示 我们现在想知道votePost方法到底在哪?跟着我这样做,在Console面板里面输入votePost然后回车 直接点击上图标红的链接,控制台将定位到Sources面板

你是怎么调试 JavaScript 程序

你是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~,用这两种土办法确实解决了很多小型 JavaScript 脚本的调试问题.不过放着 Chrome 中功能越发强大的开发者工具不用实在太可惜了.本文主要介绍其中的 JavaScript断点设置和调试功能,也就是其中的 Sources Panel(以前叫 Scripts).如果你精通 Eclipse 中的各

使用Visual Studio Code调试Javascript

Code Runner 在应用商店中搜索Code Runner插件进行安装. 选中你要执行的Javascript脚本,右键选择Run Code,利用Console.log在下方的输出窗口里可以看到输出结果. 如果不小心点击了关闭按钮X关闭了输出窗口可以点击左上方的调试控制台重新打开. 通常我用它快速输出一段JS代码的运算结果. 写算法的时候有时候出岔子Run Code会死循环一直在跑,此时在下方的输出窗口中,右键菜单里选择stop code run即可强制退出. Node.js Node.js?

HTML 学习笔记 JavaScript(面向对象)

现在让我们继续跟着大神的脚步前进 学习一下JavaScript中的面向对象的思想,其实作为一个iOS开发者,对面向对象还是比较熟悉的,但是昨晚看了一下Js中的面向对象,妈蛋 一脸萌比啊.还好有大神.让我们跟着大神的思路在捋一下.(在这里更欢迎大家阅读原博 )原博地址:http://www.cnblogs.com/dolphinX/p/4385862.html 理解对象 对象这个词如雷贯耳,同样出名的一句话:XXX语言中一切皆为对象! 对象是什么?什么觉面向对象的编程? 对象(object),台湾

学习之Javascript基础

1)HTML只是描述网页长相的标记语言,JavaScript是一种在浏览器端执行的语言,简称为JS,JavaScript是解释性语言,无需编译就可以随时运行,没有语法错误的部分还是能正确运行. 2)VS2010中有Javascript.JQuery的自动完成功能 3)JS点儿不出来的成员也许可用,点儿处理的成员也许不可用 4)VS2008的HTML编辑器中触发JavaScript自动完成:Ctrl+J 5)JS标签: <script type="text/javascript"&

谷歌浏览器怎么调试js 谷歌浏览器调试javascript教程

谷歌浏览器是一款由谷歌公司开发的浏览器.谷歌浏览器是一款基于其他开源软件所撰写的.下面小编为大家分享一篇谷歌浏览器调试javascript的教程,希望帮助大家 首先我们打开开发者工具,你可以直接在页面上点击右键,然后选择审查元素或者在Chrome的工具中找到或者你直接记住这个快捷方式: Ctrl+Shift+I (或者Ctrl+Shift+J直接打开控制台),或者直接按F12. 打开的开发者工具就长下面的样子,建议大家将开发者工具弹出作为一个独立的窗口: 1.Elements标签页 这个就是查看

console.time 简单分析javascript动态添加Dom节点的性能

Bullshit 本来想每天都更新下博客的,但是最近要考试,还有就是自己还是停留在暗自窃喜中吧(这种想法要改变).其实最近总在想,自己要怎么去管理自己的数据,每天的生活都是对自己的数据的增删查改.昨天把自己的电脑重装了,确实很多软件的存放要改地方了,之前不知道怎么去管理软件安装,所以放得乱七八糟的.说好一大堆废话之后,我最后再说一遍,管好自己的时间.数据真的比你学习东西重要. Method 本文代码约定 1 el: 指的是增加直接点的DOM节点 2 totalNum: 为100000(值越大越能