原文发布时间为:2011-06-06 —— 来源于本人的百度文章 [由搬家工具导入]

Console API

当打开 firebug (也包括 Chrome 等浏览器的自带调试工具),window 下面会注册一个叫做 console 的对象,它提供多种方法向控制台输出信息,供开发人员调试使用。下面是这些方法的一个简单介绍,适时地运用它们,对于提高开发效率很有帮助。

console.log(object[, object, ...])
使用频率最高的一条语句:向控制台输出一条消息。支持 C 语言 printf 式的格式化输出。当然,也可以不使用格式化输出来达到同样的目的:

var animal='frog', count=10; console.log("The %s jumped over %d tall buildings", animal, count); console.log("The", animal,"jumped over", count,"tall buildings");

console.debug(object[, object, ...])
向控制台输出一条信息,它包括一个指向该行代码位置的超链接。

console.info(object[, object, ...])
向控制台输出一条信息,该信息包含一个表示“信息”的图标,和指向该行代码位置的超链接。

console.warn(object[, object, ...])
同 info。区别是图标与样式不同。

console.error(object[, object, ...])
同 info。区别是图标与样式不同。error 实际上和 throw new Error() 产生的效果相同,使用该语句时会向浏览器抛出一个 js 异常。

console.assert(expression[, object, ...])
断言,测试一条表达式是否为真,不为真时将抛出异常(断言失败)。

console.dir(object)
输出一个对象的全部属性(输出结果类似于 DOM 面板中的样式)。

console.dirxml(node)
输出一个 HTML 或者 XML 元素的结构树,点击结构树上面的节点进入到 HTML 面板。

console.trace()
输出 Javascript 执行时的堆栈追踪。

console.group(object[, object, ...])
输出消息的同时打开一个嵌套块,用以缩进输出的内容。调用 console.groupEnd() 用以结束这个块的输出。

console.groupCollapsed()
同 console.group(); 区别在于嵌套块默认是收起的。

console.time(name)
计时器,当调用 console.timeEnd(name);并传递相同的 name 为参数时,计时停止,并输出执行两条语句之间代码所消耗的时间(毫秒)。

console.profile([title])
与 profileEnd() 结合使用,用来做性能测试,与 console 面板上 profile 按钮的功能完全相同。

console.count([title])
输出该行代码被执行的次数,参数 title 将在输出时作为输出结果的前缀使用。

console.clear()
清空控制台

命令行

控制台的输出面板右边,是控制台的输入面板(Chrome 调试工具对应为下方),在这里除了可以运行常规的 javascript 代码,还内置了相当数量的命令行可以辅助我们的调试工作,下面是一些常用命令行的简单介绍。

$(id)
返回一个给定 id 的元素。

$$(selector)
返回给定的 css 选择器匹配到的一组元素。

$x(xpath)
返回给定的 XPath 表达式匹配到的一组元素。

$0
在 HTML 面板中选中的元素。

$1
上一次在 HTML 面板中选中的元素。

$n(index)
访问最近 5 个被选中过的元素,index 的范围: 0 – 4。

dir(object)
同 console.dir(object)。

dirxml(node)
同 console.dirxml(node)。

clear()
同 console.clear()。

inspect(object[, tabName])()
在合适的(或一个指定的) tab 中检视一个对象。

keys(object)
返回一个对象的所有属性的键。

values(object)
返回一个对象的所有属性的值。

debug(fn)
在函数第一行添加一个断点,使用 undebug(fn) 移除断点。

monitor(fn)
开启一个函数的调用日志,使用 unmonitor(fn) 关闭该功能。非常有用的一个命令,但是它似乎并没有很好地工作。

monitorEvents(object[, types])
开启一个元素的某个事件(或所有事件)被触发时的日志记录。用例如下:

monitorEvents($0,['click'])

上面的命令行被执行后,将开启当前在 HTML 面板中被选中元素的 click 事件监控,一旦这个元素的 click 事件被触发,事件对象将会在控制台输出。如果不指定第二个参数,将对所有事件进行记录。

profile([title])
同 console.profile([title])

Firebug Console API的更多相关文章

  1. Firebug Console Panel 控制台详解【转载+整理】

    本文内容 信息显示 信息显示的占位符 console.group 和 console.groupEnd 分组显示 console.dir console.dirxml console.assert c ...

  2. Console API 与命令行

    一.Console API 当打开 firebug (也包括 Chrome 等浏览器的自带调试工具),window 下面会注册一个叫做 console 的对象,它提供多种方法向控制台输出信息,供开发人 ...

  3. Firebug Console 与命令行全集

    Console API 当打开 firebug (也包括 Chrome 等浏览器的自带调试工具),window 下面会注册一个叫做 console 的对象,它提供多种方法向控制台输出信息,供开发人员调 ...

  4. js console API All In One

    js console API All In One const log = console.log; for(const key in console) { log(`navigator.${key} ...

  5. Firebug 调试技巧之console API

    console.log(object[, object, ...]) Writes a message to the console. You may pass as many arguments a ...

  6. firebug console使用

    Firebug内置一个console对象,提供5种方法,用来显示信息. console.log("Hello World") console.info("这是info&q ...

  7. firebug console说明

    控制台(Console)是Firebug的第一个面板,也是最重要的面板,主要作用是显示网页加载过程中产生各类信息. 一.显示信息的命令 Firebug内置一个console对象,提供5种方法,用来显示 ...

  8. Chrome Console API 参考

    https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference

  9. Firebug & Chrome Console 控制台使用指南

    转自:http://visionsky.blog.51cto.com/733317/543789 Console API 当打开 firebug (也包括 Chrome 等浏览器的自带调试工具),wi ...

随机推荐

  1. SpringBoot之YAML

    SpringBoot的配置文件有两种,一种是properties结尾的,一种是以yaml或yml文件结尾的 我们讨论一下yml文件结尾的文件: 基本语法: 其实yml文件就是键值对的形式,不过就是键( ...

  2. 02.VUE学习二之数据绑定

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  3. python3下最全的wordcloud用法,附源代码及相关文件

    一.wordcloud是什么 词云,在一段文本中提取关键词进行扁平化的展示,更能吸引目标客户的眼球. 市面上有很多在线生成词云的工具,本文以Python中的第三方库wordcloud为例讲解如何自动生 ...

  4. 678. Valid Parenthesis String

    https://leetcode.com/problems/valid-parenthesis-string/description/ 这个题的难点在增加了*,*可能是(也可能是).是(的前提是:右边 ...

  5. 菜鸟学Linux - 文件/文件夹的隐藏属性

    文件/文件夹居然还有隐藏属性?没错,隐藏属性对于文件/文件夹的安全很重要.好比如说,我们需要使用”鉴定符“来揭开装备的隐藏属性:在Linux中chattr/lsattr就是“鉴定符”. chattr基 ...

  6. OpenCV学习笔记(三) 访问像素

    转自:OpenCV如何扫描图像.利用查找表和计时 测试代码:opencv\samples\cpp\tutorial_code\core\how_to_scan_images 测试函数耗时 cv::ge ...

  7. 使用 NPC,NPCManager 在 XNA 中创建 NPC(十九)

    平方已经开发了一些 Windows Phone 上的一些游戏,算不上什么技术大牛.在这里分享一下经验,仅为了和各位朋友交流经验.平方会逐步将自己编写的类上传到托管项目中,没有什么好名字,就叫 WPXN ...

  8. [oldboy-django][2深入django]老师管理--查看,添加,编辑

    # 添加老师(下拉框多选) 数据库设计: class Teacher(models.Model): name = models.CharField(max_length=64) cls = model ...

  9. java之ArrayList.add

    ArrayList添加 public boolean add(E e) { ensureCapacityInternal(size + 1); // Increments modCount!! ele ...

  10. ActionContext源码

    /* * Copyright 2002-2006,2009 The Apache Software Foundation. * * Licensed under the Apache License, ...