浏览器内置Console函数使用详解

浏览器内置Console函数比较好用:ChromeFireFox(Firebug插件)

利用此功能可以像直接在面板里面运行JS一样(写法不同而已)

一、显示信息的命令

Firebug内置一个console对象,提供5种方法,用来显示信息。

最简单的方法是console.log(),可以用来取代alert()或document.write()。比如,在网页脚本中使用console.log("Hello World"),加载时控制台就会自动显示如下内容。

另外4种写法:

console.info("这是info");
console.debug("这是debug");
console.warn("这是warn");
console.error("这是error");

二、占位符

只支持字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)四种。

三、分组显示

如果信息太多,可以分组显示,用到的方法是console.group()和console.groupEnd()。

四、console.dir():显示对象所有的属性和方法

五、console.dirxml():显示页面节点(node)包含的html/xml代码

六、console.assert() :判断表达式或变量是否为真

如果结果为否,则在控制台输出一条相应信息,并且抛出一个异常。

七、console.trace() 追踪函数的调用轨迹

比如页面有js函数

function add(a,b){
  return a+b;
}

我想知道这个函数是如何被调用的,在其中加入console.trace()方法就可以了。

function add(a,b){
  console.trace();
   return a+b;
}

假定这个函数的调用代码如下:

var x = add3(1,1);
function add3(a,b){return add2(a,b);}
function add2(a,b){return add1(a,b);}
function add1(a,b){return add(a,b);}

运行后,会显示add()的调用轨迹,从上到下依次为add()、add1()、add2()、add3()。

八、计时功能

九、性能分析

性能分析(Profiler)就是分析程序各个部分的运行时间,找出瓶颈所在,使用的方法是console.profile()。

假定有一个函数Foo(),里面调用了另外两个函数funcA()和funcB(),其中funcA()调用10次,funcB()调用1次。

function Foo(){
  for(var i=0;i<10;i++){funcA(1000);}
  funcB(10000);
}

function funcA(count){
  for(var i=0;i<count;i++){}
}

function funcB(count){
   for(var i=0;i<count;i++){}
}

然后,就可以分析Foo()的运行性能了。

console.profile(‘性能分析器一‘);
Foo();
console.profileEnd();

标题栏提示,一共运行了12个函数,共耗时2.656毫秒。其中funcA()运行10次,耗时1.391毫秒,最短运行时间0.123毫秒,最长0.284毫秒,平均0.139毫秒;funcB()运行1次,耗时1.229ms毫秒。

除 了使用console.profile()方法,firebug还提供了一个"概况"(Profiler)按钮。第一次点击该按钮,"性能分析" 开始,你可以对网页进行某种操作(比如ajax操作),然后第二次点击该按钮,"性能分析"结束,该操作引发的所有运算就会进行性能分析。

十、属性菜单

控制台面板的名称后面,有一个倒三角,点击后会显示属性菜单。

默认情况下,控制台只显示Javascript错误。如果选中Javascript警告、CSS错误、XML错误都送上,则相关的提示信息都会显示。

这里比较有用的是"显示XMLHttpRequests",也就是显示ajax请求。选中以后,网页的所有ajax请求,都会在控制台面板显示出来。

比如,点击一个YUI示例,控制台就会告诉我们,它用ajax方式发出了一个GET请求,http请求和响应的头信息和内容主体,也都可以看到。

来源:http://www.cnblogs.com/see7di/archive/2011/11/21/2257442.html

浏览器内置Console函数使用详解

时间: 2024-10-06 06:46:04

浏览器内置Console函数使用详解的相关文章

vue路由导航守卫及前置后置钩子函数参数详解

首先构建一个测试demo如下图: 接着来探讨路由配置界面 import Vue from 'vue' import Router from 'vue-router' // import HelloWorld from '@/components/HelloWorld' Vue.use(Router) const router = new Router({ routes: [{ path: '/', name: 'HelloWorld', component: resolve => require

eval()函数用法详解

eval()函数用法详解:此函数可能使用的频率并不是太高,但是在某些情况下具有很大的作用,下面就介绍一下eval()函数的用法.语法结构: eval(str) 此函数可以接受一个字符串str作为参数,并把此str当做一段javascript代码去执行,如果str执行结果是一个值则返回此值,否则返回undefined.如果参数不是一个字符串,则直接返回该参数,实例如下: eval("var a=1");//声明一个变量a并赋值1. eval("2+3");//执行加运

PHP输出缓冲控制- Output Control 函数应用详解

说到输出缓冲,首先要说的是一个叫做缓冲器(buffer)的东西.举个简单的例子说明他的作用:我们在编辑一篇文档时,在我们没有保存之前,系统 是不会向磁盘写入的,而是写到buffer中,当buffer写满或者执行了保存操作,才会将数据写入磁盘.对于PHP来说,每一次像 echo 这样的输出操作,同样是先写入到了 php buffer 里,在脚本执行完毕或者执行了强制输出缓存操作,数据才会在浏览器上显示. 其实对于PHP程序员来说,基本上每个脚本都涉及到了输出缓冲,只是在大多数情况下,我们都不需要对

归一化函数normalize详解

opencv 2 归一化函数normalize详解 1. 归一化定义与作用     归一化就是要把需要处理的数据经过处理后(通过某种算法)限制在你需要的一定范围内.首先归一化是为了后面数据处理的方便,其次是保证程序运行时收敛加快.归一化的具体作用是归纳统一样本的统计分布性.归一化在0-1之间是统计的概率分布,归一化在某个区间上是统计的坐标分布.归一化有同一.统一和合一的意思.     归一化的目的简而言之,是使得没有可比性的数据变得具有可比性,同时又保持相比较的两个数据之间的相对关系,如大小关系

MySQL UUID函数的详解(转)

MySQL UUID函数的详解 MySQL中可以有二类用于生成唯一值性质的工具:UUID()函数和自增序列,那么二者有何区别呢?我们就此对比下各自的特性及异同点: l  都可以实现生成唯一值的功能: l  UUID是可以生成时间.空间上都独一无二的值:自增序列只能生成基于表内的唯 一值,且需要搭配使其为唯一的主键或唯一索引: l  实现方式不一样,UUID是随机+规则组合而成的,而自增序列是控制一个值逐步增长的: l  UUID产生的是字符串类型值,固定长度为:36个字符,而自增序列产生的是整数

PHP的ob_start函数用法详解[php函数]

用PHP的ob_start();控制您的浏览器cache Output Control 函数可以让你自由控制脚本中数据的输出.它非常地有用,特别是对于:当你想在数据已经输出后,再输出文件头的情况.输出控制函数不对使用 header() 或 setcookie(), 发送的文件头信息产生影响,只对那些类似于 echo() 和 PHP 代码的数据块有作用. 我们先举一个简单的例子,让大家对Output Control有一个大致的印象: Example 1. CODE<?php ob_start();

VMware厚置备延迟置零,厚置备置零,精简置备详解

本文详细介绍VMware厚置备延迟置零,厚置备置零,精简置备的概念及选择使用 1.厚置备延迟置零(zeroed thick) 以默认的厚格式创建虚拟磁盘.创建过程中为虚拟磁盘分配所需空间.创建时不会擦除物理设备上保留的任何数据,但是以后从虚拟机首次执行写操作时会按需要将其置零. 简单的说就是立刻分配指定大小的空间,空间内数据暂时不清空,以后按需清空. 2.厚置备置零(eager zeroed thick) 创建支持群集功能(如 FaultTolerance)的厚磁盘.在创建时为虚拟磁盘分配所需的

PE文件结构与函数导出表——详解与实例

PE文件结构与函数导出表--详解与实例 随着windows系统从Xp升级到Win7.Win8, 从32位升级到64位,PE文件结构在整体未变的情况下发生了一些小的变动,一方面是推荐的程序装载地址未采用,另一方面,导出函数序号不再是简单的升序,而是一定程度上的进行了乱序.本文首先对PE文件结构进行了详尽的解说,接着介绍了如何得出函数导出表,整个过程采用SysWoW64目录下的wininet.dll实例进行说明.在介绍过程中,明确指出了Win7.Win8等新系统相对Xp带来的区别. 文章链接:htt

Python学习入门教程,字符串函数扩充详解

因有用户反映,在基础文章对字符串函数的讲解太过少,故写一篇文章详细讲解一下常用字符串函数.本文章是对:程序员带你十天快速入门Python,玩转电脑软件开发(三)中字符串函数的详解与扩充. 如果您想学习并参与本教程的完善与写作.请在下方讨论区,回复相关问题.一起完善本文章教程的书写. Python字符串常用函数. 声明字符串变量: str = ‘关注做全栈攻城狮,写代码也要读书,爱全栈,更爱生活.’ 下面所有字符串函数函数,是对变量str进行操作: 求字符串长度: 函数使用: 运行结果: 值得注意