九个Console命令,让js调试更简单

一、显示信息的命令

   1: <!DOCTYPE html>2: <html>3: <head>4:     <title>常用console命令</title>5:     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />6: </head>7: <body>8:     <script type="text/javascript">9:         console.log('hello');10:         console.info('信息');11:         console.error('错误');12:         console.warn('警告');13:     </script>14: </body>15: </html>

最常用的就是console.log了。

二:占位符

console上述的集中度支持printf的占位符格式,支持的占位符有:字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)

   1: <script type="text/javascript">2:         console.log("%d年%d月%d日",2011,3,26);3: </script>

效果:
image

三、信息分组

   1: <!DOCTYPE html>2: <html>3: <head>4:     <title>常用console命令</title>5:     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />6: </head>7: <body>8:     <script type="text/javascript">9:         console.group("第一组信息");10:11:         console.log("第一组第一条:我的博客(http://www.ido321.com)");12:13:         console.log("第一组第二条:CSDN(http://blog.csdn.net/u011043843)");14:15:       console.groupEnd();16:17:       console.group("第二组信息");18:19:         console.log("第二组第一条:程序爱好者QQ群: 259280570");20:21:         console.log("第二组第二条:欢迎你加入");22:23:       console.groupEnd();24:     </script>25: </body>26: </html>

效果:
image

四、查看对象的信息

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

   1: <script type="text/javascript">2:         var info = {3:             blog:"http://www.ido321.com",4:             QQGroup:259280570,5:             message:"程序爱好者欢迎你的加入"6:         };7:         console.dir(info);8: </script>

效果:
image

五、显示某个节点的内容

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

   1: <!DOCTYPE html>2: <html>3: <head>4:     <title>常用console命令</title>5:     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />6: </head>7: <body>8:     <div id="info">9:         <h3>我的博客:www.ido321.com</h3>10:         <p>程序爱好者:259280570,欢迎你的加入</p>11:     </div>12:     <script type="text/javascript">13:         var info = document.getElementById('info');14:         console.dirxml(info);15:     </script>16: </body>17: </html>

效果:

 

六、判断变量是否是真

console.assert()用来判断一个表达式或变量是否为真。如果结果为否,则在控制台输出一条相应信息,并且抛出一个异常。

   1: <script type="text/javascript">2:       var result = 1;3:       console.assert( result );4:       var year = 2014;5:       console.assert(year == 2018 );6: </script>

1是非0值,是真;而第二个判断是假,在控制台显示错误信息
image

七、追踪函数的调用轨迹。

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

   1: <script type="text/javascript">2: /*函数是如何被调用的,在其中加入console.trace()方法就可以了*/3:   function add(a,b){4:         console.trace();5:     return a+b;6:   }7:   var x = add3(1,1);8:   function add3(a,b){return add2(a,b);}9:   function add2(a,b){return add1(a,b);}10:   function add1(a,b){return add(a,b);}11: </script>

控制台输出信息:
image

八、计时功能

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

   1: <script type="text/javascript">2:   console.time("控制台计时器一");3:   for(var i=0;i<1000;i++){4:     for(var j=0;j<1000;j++){}5:   }6:   console.timeEnd("控制台计时器一");7: </script>

运行时间是38.84ms
image

九、console.profile()的性能分析

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

   1: <script type="text/javascript">2:       function All(){3:             alert(11);4:          for(var i=0;i<10;i++){5:                 funcA(1000);6:              }7:         funcB(10000);8:       }9:10:       function funcA(count){11:         for(var i=0;i<count;i++){}12:       }13:14:       function funcB(count){15:         for(var i=0;i<count;i++){}16:       }17:18:       console.profile('性能分析器');19:       All();20:       console.profileEnd();21:     </script>

输出如图:
image

转载于:https://www.cnblogs.com/zhuiluoyu/p/5856030.html

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

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

相关文章

numpy——axis

size()和max()中的含义 以前我理解axis0代表行&#xff0c;axis1代表列&#xff1b; 但是这种含义在函数size()和max()中恰恰相反&#xff1b; 其实不是这样的&#xff0c;我们回到单词axis本身&#xff0c;它的意思是“轴”&#xff0c;没错轴就是代表一个方向&#xff0c;像…

Android ListView几个重要属性

1、transciptMode属性&#xff0c;需要用ListView或者其它显示大量Items的控件实时跟踪或者查看信息&#xff0c;并且希望最新的条目可以自动滚动到可视范围内。通过设置的控件transcriptMode属性可以将Android平台的控件&#xff08;支持ScrollBar&#xff09;自动滑动到最底部…

Halcon例程(基于GMM模型的分类)详解 —— classify_citrus_fruits.hdev

一、例程简介 该例程比较有代表性&#xff0c;属于Halcon里的分类方法之一&#xff0c;直接调用Halcon封装好的GMM分类器&#xff08;高斯混合模型&#xff09;对橘子和柠檬进行分类。GMM属于概率分类方法&#xff0c;属于P(Y|X)&#xff0c;通过对样本的概率密度分布进行估计…

正则表达式匹配不包含特定字符串解决匹配溢出问题

匹配溢出问题在正则表达式当中算是比较常见的问题&#xff0c;它常常导致我们匹配结果莫名其妙的出错&#xff0c;本文专门为你讲解如何通过匹配不包含特定字符串的方法来解决这类问题。 那么&#xff0c;什么是匹配溢出呢&#xff1f; 下面我们来看个例子&#xff1a; 源文本&…

numpy——mgrid

x1,x2 np.mgrid(x1min:x1max:num1j,x2min:x2max:num2j)x1返回的是x1min到x1max间均匀分成num1个数&#xff0c;进行横向扩展为方阵 x2返回的是x2min到x2max间均匀分成num2个数&#xff0c;进行纵向扩展为方阵 Examples -------- >>> np.mgrid[0:5,0:5] array([[[0,…

Halcon例程(基于3D形状匹配识别方法)详解 —— create_shape_model_3d_lowest_model_level.hdev

一、例程简介 最近在研究3D识别方面的东西&#xff0c;查了不少资料&#xff0c;发现halcon里有不少关于三维物体识别的例程&#xff0c;这里对其中一个做出详解。该例程是基于三维匹配方法的&#xff0c;因为有三维模型SM3&#xff0c;所以不需要自己创建&#xff1b;另因为例…

15.瀑布流、测量

排行界面TopProtocol &#xff1a;json数据就是写字符串&#xff0c;所以不需要写bean对象public class TopProtocol extends BaseProtocol<List<String>> { Override public List<String> paserJson(String json) { List<String> datasnew ArrayList&…

linear-gradient线性渐变

background:linear-gradient(180deg, sliver 20%, skyblue 80%, gray 100%);180deg 是线性渐变的角度,水平方向;如果是90deg,则是垂直方向. silver 20% 是最上面的颜色和该颜色所在的位置,可以为负值,,如 linear-gradient(180deg, silver -7%, pink 80%, skyblue 127%);的效果是…

numpy——stack

np.stack(array,axis,outNone)&#xff0c;函数原型。 其中最重要是的这个axis怎么理解的。 举例说明&#xff1a;arrays [np.random.randn(3, 4) for _ in range(10)] 会生成一个 10 *( 3 * 4 )的矩阵列表。十个矩阵&#xff0c;每个矩阵是(3 * 4)大小。 首先说明一下axis的映…

C# —— 简单工厂设计模式详述

一、基本概念 众所周知&#xff0c;C#是一种面向对象的语言&#xff0c;而其中封装&#xff0c;继承&#xff0c;多态是面向对象的三大重要特征&#xff0c;简单工厂的设计模式则可以完全体现这些特征。要彻底理解这个模式&#xff0c;必须要先将封装&#xff08;访问修饰符的…

【计算机视觉】计算机视觉、模式识别、机器学习常用牛人主页链接

计算机视觉、模式识别、机器学习常用牛人主页链接 牛人主页&#xff08;主页有很多论文代码&#xff09; Serge Belongie at UC San DiegoAntonio Torralba at MITAlexei Ffros at CMUCe Liu at Microsoft Research New EnglandVittorio Ferrari at Univ.of EdinburghKristen G…

C# 中的 ConfigurationManager类引用方法

c#添加了Configuration;后&#xff0c;竟然找不到 ConfigurationManager 这个类&#xff0c;后来才发现&#xff1a;虽然引用了using System.Configuration;这个包&#xff0c;但是还是不行的。 后来终于找到一个解决方法&#xff0c;就是在解决方案资源管理器里找到类文件选择…

机器学习——支持向量机SVM之python实现简单实例一(含数据预处理、交叉验证、参数优化等)

目录 一、SVM理论 二、numpy的相关函数介绍 三、python实现之准备 1、数据集的下载

工业相机常用类型详述

一、工业相机定义 工业相机是应用于工业领域、安防和交通等对相机要求较高领域的摄像机&#xff0c;功能就是将光信号转变成有序的电信号&#xff0c;此信号经过模数转换为数字信号&#xff0c;然后传递给图像处理器。与一般的家用相机相比&#xff0c;其具有更高的稳定性能&a…

机器学习——SVM之python实现数据样本标准化和归一化

目录 一、标准化和归一化的目的 1、标准化 2、归一化 二、标准化和归一化常用的理论公式 1、归一化 2、标准化 三、python实现SVM样本数据标准化和归一化 1、标准化 2、归一化 本文源代码&#xff1a;《机器学习——支持向量机SVM之python实现简单实例一》 一、标准化…

[黑群晖经典教程] 一步一步建立自己的黑群晖

【申明&#xff1a;本文并非本人所作&#xff0c;为内部网络中一位大神所写&#xff0c;个人觉得写得很好&#xff0c;遂原文搬了过来&#xff0c;如有侵犯原作者的权利&#xff0c;请及时与我联系】 PS:有好几个兄弟觉得我擅自转发&#xff0c;不是很妥。解释一下&#xff1a;…

Java为什么能跨平台运行

因为java程序编译之后的代码不是能被硬件系统直接运行的代码&#xff0c;而是一种“中间码”--字节码。不同的硬件平台上装有不同的java虚拟机&#xff08;JVM&#xff09;&#xff0c;由JVM来把字节码再翻译成所对应的硬件平台能够执行的代码&#xff0c;因此java可以跨平台运…

C++和Opencv4.5 实现全景图像拼接

前言 最近刚下了最新版的opencv4.5&#xff0c;急不可待的试下操作&#xff0c;就用了opencv自带的Stitcher类拼接下图像&#xff0c;结果傻眼了&#xff0c;程序显示Stitcher没有createDefault成员&#xff0c;看了好久&#xff0c;终于找到了解决方法。 Stitcher原理 Stit…

机器学习——python实现SVM模型w,b的查看

基于源代码&#xff1a;《机器学习——支持向量机SVM之python实现简单实例一》进行讲解 1、线性模型 这里以二特征三类&#xff0c;一对多策略为案例 kernel “linear”&#xff1a;线性核&#xff0c;参数有w&#xff0c;b 线性模型的决策边界是&#xff1a;w0iTx0i w1i…

Codeforces-712C-Memory and De-Evolution

转载于:https://www.cnblogs.com/GrowingJlx/p/6642764.html