javascript console 函数详解 js开发调试的利器 浏览:3201|更新:2014-05-30 09:27

    • 引用地址:
http://jingyan.baidu.com/article/e75aca855c6419142edac6c1.html

一键约师傅

百度师傅最快的到家服务,最优质的电脑清灰!

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

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

方法/步骤

  1. 1

    控制台(Console)是Firebug的第一个面板,也是最重要的面板,主要作用是显示网页加载过程中产生各类信息。

    一、显示信息的命令

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

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

    javascript console 函数详解 js开发调试的利器
  2. 2

    另外,根据信息的不同性质,console对象还有4种显示信息的方法,分别是一般信息console.info()、除错信息console.debug()、警告提示console.warn()、错误提示console.error()。

    比如,在网页脚本中插入下面四行:

      console.info("这是info");

      console.debug("这是debug");

      console.warn("这是warn");

      console.error("这是error");

    javascript console 函数详解 js开发调试的利器
  3. 3

    占位符

    console对象的上面5种方法,都可以使用printf风格的占位符。不过,占位符的种类比较少,只支持字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)四种。

    比如,

      console.log("%d年%d月%d日",2011,3,26);

      console.log("圆周率是%f",3.1415926);

    %o占位符,可以用来查看一个对象内部情况。比如,有这样一个对象:

      var dog = {} ;

      dog.name = "大毛" ;

      dog.color = "黄色";

    然后,对它使用o%占位符。

      console.log("%o",dog);

    javascript console 函数详解 js开发调试的利器
    javascript console 函数详解 js开发调试的利器
  4. 4

    分组显示

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

      console.group("第一组信息");

        console.log("第一组第一条");

        console.log("第一组第二条");

      console.groupEnd();

      console.group("第二组信息");

        console.log("第二组第一条");

        console.log("第二组第二条");

      console.groupEnd();

    javascript console 函数详解 js开发调试的利器
    javascript console 函数详解 js开发调试的利器
  5. 5

    console.dir()

    console.dir()可以显示一个对象所有的属性和方法。

    比如,现在为第二节的dog对象,添加一个bark()方法。

      dog.bark = function(){alert("汪汪汪");};

    然后,显示该对象的内容,

      console.dir(dog);

    javascript console 函数详解 js开发调试的利器
  6. 6

    console.dirxml()

    console.dirxml()用来显示网页的某个节点(node)所包含的html/xml代码。

    比如,先获取一个表格节点,

      var table = document.getElementById("table1");

    然后,显示该节点包含的代码。

      console.dirxml(table);

    javascript console 函数详解 js开发调试的利器
  7. 7

    console.trace()

    console.trace()用来追踪函数的调用轨迹。

    比如,有一个加法器函数。

      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()。

    javascript console 函数详解 js开发调试的利器
  8. 8

    计时功能

    console.time()和console.timeEnd(),用来显示代码的运行时间。

      console.time("计时器一");

      for(var i=0;i<1000;i++){

        for(var j=0;j<1000;j++){}

      }

      console.timeEnd("计时器一");

    javascript console 函数详解 js开发调试的利器
  9. 9

    性能分析

    性能分析(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();

    控制台会显示一张性能分析表,如下图。

    javascript console 函数详解 js开发调试的利器

转载于:https://www.cnblogs.com/watercaltrop/p/5129430.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/459244.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

链路层基本问题 : 封装成帧、差错检测、流量控制

一、封装成帧 1、MAC帧 类型字段 &#xff08;2个字节&#xff09;&#xff1a; 用来标志上一层使用的是什么协议&#xff0c;以便把收到的MAC帧的数据上交给上一层的这个协议。 数据字段 &#xff08;46-1500&#xff09;&#xff1a; 正式名称是MAC客户数据字段最小长度6…

mysql 5.7 super_MySQL 5.7 下的对super用户只读

在MySQL的主从复制场景下&#xff0c;遇上slave被意外写入数据是一件比较严重的问题&#xff0c;毕竟在一般情况下我们都希望slave仅用只读数据库&#xff0c;如果被意外写入数据可能会造成数据的不一致&#xff0c;从而导致主从的报错。因此在MySQL中可以通过设置变量参数read…

CSS 链接

2019独角兽企业重金招聘Python工程师标准>>> 不同的链接可以有不同的样式。 链接样式 链接的样式&#xff0c;可以用任何CSS属性&#xff08;如颜色&#xff0c;字体&#xff0c;背景等&#xff09;。 特别的链接&#xff0c;可以有不同的样式&#xff0c;这取决于他…

iOS项目开发优秀文章汇总

UI界面 iOS和Android 界面设计尺寸规范 http://www.alibuybuy.com/posts/85486.html iPhone app界面设计尺寸规范 http://www.wufangbo.com/ios-iphone-app/ iOS界面设计切图小结 http://www.apkbus.com/android-140341-1-1.html 2x图片等适应不同分辨率手机 http://blog.…

数据链路层:ARP协议详解(绝对经典)

&#xff11;、ARP协议定义&#xff1a; 地址解析协议&#xff0c;工作在数据链路层&#xff0c;在本层和硬件接口联系&#xff0c;同时向上层提供服务。IP数据包常通过以太网发送&#xff0c;以太网设备不识别32位IP地址&#xff0c;他们是以48位以太网地址传输以太网数据包的…

php pdo操作mysql_PHP操作数据库详细(PDO)

PHP 5.1 发布时将附带一个全新的数据库连接层&#xff0c;即 PHP Data Objects (PDO)。虽然 PHP 一直都拥有很好的数据库连接&#xff0c;但 PDO 让 PHP的数据库操作 达到一个新的高度。PDO可支持基本的MySQL、Microsoft SQL Server、Oracle等数据库&#xff0c;并且提供了统一…

HTTP POST请求报文格式分析与Java实现文件上传

时间 2014-12-11 12:41:43 CSDN博客原文 http://blog.csdn.net/bboyfeiyu/article/details/41863951主题 HTTP HttpComponents在开发中&#xff0c;我们使用的比较多的HTTP请求方式基本上就是GET、POST。其中GET用于从服务器获取数据&#xff0c;POST主要用于向服务器提交一些…

网络层:IP协议详解(IP协议真的得看这篇)

1、IP协议概念 IP&#xff08;Internet Protocol , 互联网协议&#xff09;主要用于互联网通信。IP协议用于将多个包交换网络连接起来&#xff0c;他在原地址和目的地址之间传输数据报&#xff0c;还提供对数据大小的重新组装功能&#xff0c;以适应不同网络的要求。 IP协议是…

mysql my.cnf_如何知道mysql的my.cnf位置

你实际上可以让MySQL显示搜索my.cnf(或Windows上的my.ini)的所有位置的列表。 它不是一个SQL命令。 是终端命令&#xff0c;执行&#xff1a;$ mysqld –help –verbose在第一行&#xff0c;你会发现一个消息&#xff0c;列出所有my.cnf位置。 在我的机器上是&#xff1a;Defau…

传输层两大协议:TCP与UDP详解(两者的联系与区别)

一、TCP协议 1、TCP协议报文格式 TCP协议报文格式详解 2、TCP“三次握手”建立连接 位码即tcp标志位,有6种标示: SYN(synchronous建立联机) ACK(acknowledgement 确认) PSH(push传送) FIN(finish结束) RST(reset重置) URG(urgent紧急) Sequence number(顺序号码) Ac…

2016-01-17

1.《将来的你&#xff0c;一定会感谢现在拼命地自己》 感觉是一本总结的书&#xff0c;有方向、胸怀、习惯、幸运、内心、浮躁等等&#xff0c;现在有时候还拿出来温故一番。可以拥有。 2.《华为研发》 一本介绍华为的发展史&#xff0c;包括华为的一些故事&#xff0c;最令人印…

方法调方法(委托方式)

具有功能的实现方法&#xff0c;这个方法是一个吧数据插入到数据库然后再插入到listview的方法&#xff0c;使用for循环不断的调用这个方法进行插入&#xff1a; /// <summary>/// 获得Excel的名称和代号/// </summary>private void GetData(string name, string p…

docker二进制安装mysql_Docker搭建MySQL读写分离主从模式 分布式数据库中间件Mycat分库分表应用...

一、MySQL读写分离主从模式1. 下载镜像docker pull mysql当前最新版本&#xff1a;mysql Ver 8.0.19 for Linux on x86_64 (MySQL Community Server - GPL)2. 启动主节点并修改配置文件docker run -it --name mysql -p 3306:3306 -e MYSQL_ROOT_PASSWORD123456 mysql bash修改/…

C++11标准库 - array

std::array是原生数组的封装&#xff0c;它存放于栈上且大小固定&#xff0c;性能也与之相同。在原生数组的基础上&#xff0c;它添加了范围检查&#xff0c;以及其它的STL的相应特性&#xff0c;比如复制、交换、迭代器、查询大小。 按照C11的规范&#xff0c;应该抛弃原生数组…

设计模式之单例模式(C++代码实现)

1、单例模式&#xff1a; 单例模式&#xff1a;用来创建独一无二的&#xff0c;只能够有一个实例的对象。 单例模式的结构是设计模式中最简单的&#xff0c;但是想要完全实现一个线程安全的单例模式还是有很多陷阱的。 2、应用场景&#xff1a; 共享数据或者共享访问点&…

在Controller中使用AOP

转&#xff1a;http://usherlight.iteye.com/blog/1306111 在Controller中使用AOP的问题主要在于如何让Controller能够被检测到。 Controller和其他Spring bean的区别在于:Controller是由mvc定义并在web.xml中的dispatcher中定义的。 解决方法&#xff1a; 1、正确定义Controll…

mysql 6.17_2020 6/17 mysql数据的增删改查

一、增删改数据1、增加数据&#xff1a;-- 插入所有字段。一定依次按顺序插入INSERT INTO student VALUES(1,张三,男,20);-- 插入部分字段INSERT INTO student(id,NAME) VALUES(2,李四);2、修改数据&#xff1a;-- 带条件的修改(推荐使用)UPDATE student SET gender男 WHERE id…

五种I/O模型详解

1. 概念理解 在进行网络编程时&#xff0c;我们常常见到同步(Sync)/异步(Async)&#xff0c;阻塞(Block)/非阻塞(Unblock)四种调用方式&#xff1a; 同步&#xff1a; 所谓同步&#xff0c;就是在发出一个功能调用时&#xff0c;在没有得到结果之前&#xff0c;该调用就不…

回答自己的提问

第一章&#xff1a;概论 问题&#xff1a;看完这章后&#xff0c;了解了一些程序员都知道的名言、推论等&#xff1b;像"程序数据结构算法”、"软件程序软件工程"这些。在1.2.3这节内容上知道软件工程与计算机科学是息息相关的&#xff0c;那么在那么多的计算机…

Tomcat自定义部署

首先&#xff0c;需要把apachetomcat安装目录里面的 bin/ conf/ logs/ webapps/ work/ 都拷贝到自定义WEB应用目录下&#xff0c;比如 /home/app/test.aliyun.com/&#xff0c;这个目录以后就是部署该项目的操作目录&#xff0c;下面用yourdomain来代替。 文件夹部署方式&#…