深入分析javascript中console命令_javascript技巧

一、显示信息的命令

代码如下:

<!DOCTYPE html>
<html>
<head>
<title>常用console命令</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<script type="text/javascript">
console.log('hello');
console.info('信息');
console.error('错误');
console.warn('警告');
</script>
</body>
</html>

最常用的就是console.log了。

二:占位符

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

代码如下:

<script type="text/javascript">
console.log("%d年%d月%d日",2016,8,20);
</script>

效果:

三、信息分组

代码如下:

<!DOCTYPE html>
<html>
<head>
<title>常用console命令</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<script type="text/javascript">
 console.group("第一组信息");

    console.log("第一组第一条:我的技术博客(https://segmentfault.com/u/learnme)");

    console.log("第一组第二条:我的gitHub(https://github.com/specialCoder/)");

  console.groupEnd();

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

    console.log("第二组第一条:程序爱好者");

    console.log("第二组第二条:欢迎你加入");

   console.groupEnd();
</script>
</body>
</html>

效果:

四、查看对象的信息

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

<script type="text/javascript">
var info = {
blog:"https://segmentfault.com/u/learnme/",
gitHub:"https://github.com/specialCoder/",
message:"程序爱好者欢迎你的加入"
};
console.dir(info);
</script>

效果:

五、显示某个节点的内容

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

<!DOCTYPE html>
<html>
<head>
<title>常用console命令</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="info">
<h3>我的博客:https://segmentfault.com/u/learnme/
<p>程序爱好者,欢迎你的加入</p>
</div>
<script type="text/javascript">
var info = document.getElementById('info');
console.dirxml(info);
</script>
</body>
</html>

效果:

六、判断变量是否是真

console.assert()用来判断一个表达式或变量是否为真。如果结果为否,则在控制台输出一条相应信息,并且抛出一个异常。
Assert(断言)是一个很好的用于保证程序正确性的特性。在具备调试工具的浏览器上,这一特性可以通过调用console.assert()来实现。

代码如下:

<script type="text/javascript">
  var result = 1;
  console.assert( result );
  var year = 2014;
  console.assert(year===2018,"Assertion failed");
</script>

在console.assert()语句中,第一个参数为需要进行assert的结果,正常情况下应当为true;第二个参数则为出错时在控制台上打印的错误信息。

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

显示结果:

七、追踪函数的调用轨迹

console.trace()用来追踪函数的调用轨迹。
代码如下:

<script type="text/javascript">
/*函数是如何被调用的,在其中加入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);}
</script>

控制台输出信息:

八、计时功能

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

<script type="text/javascript">
  console.time("计数1000*1000");
  for(var i=0;i<1000;i++){
    for(var j=0;j<1000;j++){}
  }
  console.timeEnd("计数1000*1000");
</script>

运行时间是10.64ms

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

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

<script type="text/javascript">
  function All(){
alert(11);
      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++){}
  }

  console.profile('性能分析器');
  All();
  console.profileEnd();
</script>

说明一下,LZ测试时,在All()中未加alert,控制条没有输出,加上了之后,就有了一张性能分析表,暂时不清楚原因,若你知道,可以评论。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索javascript
, js
, console
console命令
javascript console、深入浅出javascript、深入理解javascript、深入javascript、javascript深入学习,以便于您获取更多的相关知识。

时间: 2024-09-01 02:21:04

深入分析javascript中console命令_javascript技巧的相关文章

9个让JavaScript调试更简单的Console命令_javascript技巧

一.显示信息的命令 <!DOCTYPE html> <html> <head> <title>常用console命令</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <script type="text/javascri

Javascript中replace()小结_javascript技巧

关于定义   replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串. 关于语法 stringObject.replace(regexp/substr,replacement) 关于参数 参数 描述 regexp/substr 必需.规定子字符串或要替换的模式的 RegExp 对象. 请注意,如果该值是一个字符串,则将它作为要检索的直接量文本模式,而不是首先被转换为 RegExp 对象. replacement 必需.一个字符串值.规定了替换文本或生成替

Immutable 在 JavaScript 中的应用_javascript技巧

Mutable 对象 在 JavaScript 中,对象是引用类型的数据,其优点在于频繁的修改对象时都是在原对象的基础上修改,并不需要重新创建,这样可以有效的利用内存,不会造成内存空间的浪费,对象的这种特性可以称之为 Mutable,中文的字面意思是「可变」. 对于 Mutable 的对象,其灵活多变的优点有时可能会成为其缺点,越是灵活多变的数据越是不好控制,对于一个复杂结构的对象来说,一不小心就在某个不经意间修改了数据,假如该对象又在多个作用域中用到,此时很难预见到数据是否改变以及何时改变的.

深入理解javascript中concat方法_javascript技巧

最近在恶补js知识的时候,总是会因为js强大的语法而感到震撼.因为以前对前端方面的疏忽,导致了一些理解的错误.因此痛改前非,下定决心,不管做什么事情,都要有专研的精神. 在介绍前,抛出一个问题:如何将多个数组合并为一个数组? 以下的分享会分为如下小节: 1.concat方法的基础介绍 2.从实例中感受concat方法 1.concat方法的基础介绍 concat方法用于多个数组的合并.它将新数组的成员,添加到原数组的尾部,然后返回一个新数组,原数组不变. console.log([].conca

浅谈javascript中的作用域_javascript技巧

JS中作用域的概念: 表示变量或函数起作用的区域,指代了它们在什么样的上下文中执行,亦即上下文执行环境.Javascript的作用域只有两种:全局作用域和本地作用域,本地作用域是按照函数来区分的. 首先来看几道题目: 1. 复制代码 代码如下: if(true){ var aa= "bb"; } console.log(aa); //bb for(var i = 0; i < 100; i++){ //do } console.log(i); //100 2. 复制代码 代码如下

深入理解JavaScript中的并行处理_javascript技巧

前言 为什么说多线程如此重要?这是个值得思考的问题.一直以来,派生线程以一种优雅的方式实现了对同一个进程中任务的划分.操作系统负责分配每个线程的时间片,具有高优先级并且任务繁重的线程将分配到更多的时间片,而低优先级空闲的线程只能分到较少的时间片. 虽然多线程如此重要,但JavaScript却并没有多线程的能力.幸运的是,随着 Web Worker 的普及,我们终于可以在后台线程来处理资源密集型的计算了.而不好的方面是,目前制定的标准只适用于当前的生态系统,这有时候就比较尴尬了.如果你了解其他从一

浅谈javascript中replace()方法_javascript技巧

定义和用法 replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串.语法stringObject.replace(regexp/substr,replacement) 返回值 一个新的字符串,是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的.说明 字符串 stringObject 的 replace() 方法执行的是查找并替换的操作.它将在 stringObject 中查找与 regexp 相匹配的子字符串,然后用 r

浅谈javascript中return语句_javascript技巧

return语句在js中非常的重要,不仅仅具有返回函数值的功能,还具有一些特殊的用法,有个清晰的把握是非常有必要的.下面就结合实例简单介绍一下return语句的作用. 一.用来返回控制和函数结果: 通常情况,return语句对于一个函数是很有必要的,因为往往需要函数在一系列的代码执行后会得到一个期望的返回值,而此值就是通过return语句返回,并且将控制权返回给主调函数. 语法格式: return 表达式 代码实例如下: function add(){ var a=1; var b=2; ret

深入认识JavaScript中的函数_javascript技巧

概述 函数是进行模块化程序设计的基础,编写复杂的Ajax应用程序,必须对函数有更深入的了解.JavaScript中的函数不同于其他的语言,每个函数都是作为一个对象被维护和运行的.通过函数对象的性质,可以很方便的将一个函数赋值给一个变量或者将函数作为参数传递.在继续讲述之前,先看一下函数的使用语法: function func1(-){-} var func2=function(-){-}; var func3=function func4(-){-}; var func5=new Functio