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;这取决于他…

数据链路层: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协议是…

传输层两大协议: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…

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修改/…

五种I/O模型详解

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

存储过程 while is null_4.2 串的存储实现(2)

返回目录&#xff1a;Chilan Yu&#xff1a;《数据结构》目录链接​zhuanlan.zhihu.com4.2.2 堆串字符串包括串名与串值两部分&#xff0c;而串值采用堆串存储方式存储&#xff0c;串名用符号表存储。堆串存储方式&#xff1a;这种存储方法以一组地址连续的存储单元存放串的字符…

高光谱图像pca降维_高光谱图像的数据特性之探讨

图像是获取信息以及探知世界的重要媒介。近年来&#xff0c;传感科技与成像技术实现了跨越式发展&#xff0c;促使图像获取在质与量上均获得了显著提升。在多样化成像手段中&#xff0c;光谱成像技术是成像科技的重要组成部分&#xff0c;是人类借助光这一能量手段探测物质特性…

注册Tomcat服务为系统服务

2019独角兽企业重金招聘Python工程师标准>>> 将解压版的Tomcat服务注册为系统服务之后&#xff0c;就不用每次启动机器之后都要手动去启动"startup.bat"&#xff0c;就方便多了&#xff0c;下面就是具体步骤&#xff08;以我的机器为例&#xff0c;我的To…

【Spring学习笔记-MVC-17】Spring MVC之拦截器

作者&#xff1a;ssslinppp 1. 拦截器简介及应用场景2. 拦截器接口及拦截器适配器3. 运行流程图正常运行中断流程4. 程序实例控制层&#xff1a;ControllerRequestMapping(value "/test")public class TestController {RequestMapping(value "/intercept…

iOS之地理位置及定位系统 -- 入门笔记(用Swift)

前言&#xff1a;关于地理位置及定位系统&#xff0c;在iOS开发中也比较常见&#xff0c;比如美团外面的餐饮店铺的搜索&#xff0c;它首先需要用户当前手机的位置&#xff0c;然后在这个位置附近搜索相关的餐饮店铺的位置&#xff0c;并提供相关的餐饮信息&#xff0c;再比如最…

PHP监測memcache服务端的执行状况

. 代码例如以下&#xff0c;代码为memcache官方代码&#xff0c;引用在此。做一下简单的说明&#xff1a; 1、设置username和password define(ADMIN_USERNAME,admin); // Admin Username define(ADMIN_PASSWORD,123456); // Admin Password 2、配置server及其port&#xff0…

linux grep 匹配空格_17 个案例,5 分钟简单搞定 Linux 正则表达式!

正则表达式是一种字符模式&#xff0c;用于在查找过程中匹配制定的字符。元字符通常在Linux中分为两类&#xff1a;Shell元字符&#xff0c;由Linux Shell进行解析&#xff1b;正则表达式元字符&#xff0c;由vi/grep/sed/awk等文本处理工具进行解析&#xff1b;正则表达式一般…

micropython web ws2812_MicroPython实例之TPYBoard v102炫彩跑马灯WS2812B

一、实验目的了解ws2812b的工作原理学习ws2812b的驱动方法二、实验器材TPYBoard v102 1块ws2812b RGB-Ring-8 1个micro USB数据线 1条杜邦线 若干三、WS2812B的介绍WS2812B是一个集控制电路与发光电路于一体的智能外控LED光源。 其外型与一个5050LED灯珠相同&#xff0c; 每个元…

mysql数据库表复用_MySQL 数据库之表操作

一、创建表的完整语法create table 表(字段名1 类型 [(宽度) 约束条件]&#xff0c;字段名2 类型 [(宽度) 约束条件]&#xff0c;字段名3 类型 [(宽度) 约束条件])&#xff1b;1.类型&#xff1a;使用限制字段必须以什么样的数据类型传值约束条件&#xff1a;约束条件是在类型之…

Android有道词典查询功能

有道词典 任务要求&#xff1a;完成查词等功能 因为需要申请API key&#xff0c;这里直接给出地址供使用&#xff1a;http://fanyi.youdao.com/openapi?pathdata-mode 1、activity_main.xml基本格局&#xff08;不做任何说明&#xff09; 代码如下&#xff1a; 1 <Relative…