下面分享几个日常调试代码的时候在Console命令行显示你的操作，让你的js调试更简单。

  • console显示信息的命令

    在浏览器按f12在console上显示你的文本。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta content="telephone=no" name="format-detection">

<title>热点电视</title>

<meta name="keywords" content="热点电视的关键词">

<meta name="description" content="热点电视的网站描述">

</head>

<body>

    <div id="example">10.24程序猿节日</div>

 <script>

  console.log('hello000');

  console.info('信息111');

  console.error('错误222');

  console.warn('警告333');

 </script>

</body>

</html>

  • console信息分组

在console上区分开小组信息。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta content="telephone=no" name="format-detection">

<title>热点电视</title>

<meta name="keywords" content="热点电视的关键词">

<meta name="description" content="热点电视的网站描述">

</head>

<body>

    <div id="example">10.24程序猿节日</div>

 <script>

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

    console.log("第一组第一条:今天是");

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

    console.groupEnd();

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

    console.log("第二组第一条:程序猿节日");

    console.log("第二组第二条:节日快乐");

    console.groupEnd();

 </script>

</body>

</html>

  • console占位符

console上述的集中度支持printf的占位符格式，支持的占位符有：字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta content="telephone=no" name="format-detection">

<title>热点电视</title>

<meta name="keywords" content="热点电视的关键词">

<meta name="description" content="热点电视的网站描述">

</head>

<body>

    <div id="example">10.24程序猿节日</div>

 <script>

    console.log("%d年%d月%d日",2016,10,24);

 </script>

</body>

</html>

  • console查看对象的信息

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta content="telephone=no" name="format-detection">

<title>热点电视</title>

<meta name="keywords" content="热点电视的关键词">

<meta name="description" content="热点电视的网站描述">

</head>

<body>

    <div id="example">10.24程序猿节日</div>

 <script>

	var info = {

	    boom: "10.24程序猿节日",

	    message: "不加班"

	};

	console.dir(info);

 </script>

</body>

</html>

  • console显示某个节点的内容

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta content="telephone=no" name="format-detection">

<title>热点电视</title>

<meta name="keywords" content="热点电视的关键词">

<meta name="description" content="热点电视的网站描述">

</head>

<body>

    <div id="example">10.24程序猿节日</div>

 <script>

	var info = document.getElementById('example');

    console.dirxml(info);

 </script>

</body>

</html>

  • 判断变量是否是真

console.assert()用来判断一个表达式或变量是否为真。如果结果为否，则在控制台输出一条相应信息，并且抛出一个异常。（这里代码中，console.assert()语句保证cat对象的score变量值长度为3，不过我为了显示错误把3改成4。）

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta content="telephone=no" name="format-detection">

<title>热点电视</title>

<meta name="keywords" content="热点电视的关键词">

<meta name="description" content="热点电视的网站描述">

</head>

<body>

    <div id="example">10.24程序猿节日</div>

 <script>

	function cat(name, age, score){

	    this.name = name;

	    this.age = age;

	    this.score = score;

	}

	var c = new cat("miao", 2, [6,8,7]);

	console.assert(c.score.length==4, "Assertion of score length failed123456");

 </script>

</body>

</html>

  • 追踪函数的调用轨迹

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta content="telephone=no" name="format-detection">

<title>热点电视</title>

<meta name="keywords" content="热点电视的关键词">

<meta name="description" content="热点电视的网站描述">

</head>

<body>

    <div id="example">10.24程序猿节日</div>

 <script>

	/*函数是如何被调用的，在其中加入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>

</body>

</html>

  • 计时功能

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta content="telephone=no" name="format-detection">

<title>热点电视</title>

<meta name="keywords" content="热点电视的关键词">

<meta name="description" content="热点电视的网站描述">

</head>

<body>

    <div id="example">10.24程序猿节日</div>

 <script>

	console.time("控制台计时器一");　　

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

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

	}　　

	console.timeEnd("控制台计时器一");

 </script>

</body>

</html>

  • console.profile()的性能分析

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta content="telephone=no" name="format-detection">

<title>热点电视</title>

<meta name="keywords" content="热点电视的关键词">

<meta name="description" content="热点电视的网站描述">

</head>

<body>

    <div id="example">10.24程序猿节日</div>

 <script>

	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>

</body>

</html>

 
 
链接：https://zhuanlan.zhihu.com/p/23162358
来源：知乎

分享几个日常调试方法让js调试更简单的更多相关文章

  1. Linux内核调试方法总结之调试宏

    本文介绍的内核调试宏属于静态调试方法,通过调试宏主动触发oops从而打印出函数调用栈信息. 1) BUG_ON 查看bug处堆栈内容,主动制造oops Linux中BUG_ON,WARN_ON用于调试 ...

  2. vue.js使用更简单的方法制作带删除功能的tooolist

    今天复习了下vue.js,先做了个基本版的todolist,做完后自己想加个删除本项的按钮.一开始做没啥头绪了,试了试无果,查了一把后发现网上的那些方法真的是麻烦,自己动手丰衣足食,自己最后换了思路试 ...

  3. IEjs 调试、火狐 js 调试

    http://www.jb51.net/article/26707.htm IE下调试代码, 在代码中写 debugger; 然后IE启用调试, 会执行到debugger 断点出, 双击变量 右键 添 ...

  4. iOS-----用LLDB调试，让移动开发更简单（二）

    image lookup –address 当我们有一个地址,想查找这个地址具体对应的文件位置,可以使用image lookup --address,简写为image lookup -a e.g: 当 ...

  5. iOS---用LLDB调试，让移动开发更简单（一）

    因文章字数超过限制,所以拆分成了上下篇 LLDB的Xcode默认的调试器,它与LLVM编译器一起,带给我们更丰富的流程控制和数据检测的调试功能.平时用Xcode运行程序,实际走的都是LLDB.熟练使用 ...

  6. .net 多播委托的使用方法以及场景，更简单的观察者模式

    首先来说一下什么是多播委托 多播委托就是在委托里定义一个或者多个方法的一个集合 使用方法: public Action actList; //添加方法 public void AddActionMet ...

  7. Android 平台JS调试技术

    1.  测试技术简介 Android平台微信公众号一般以H5的形式开发,测试发现流量一般都通过js进行加密传输,导致无法对越权.SQL注入等风险点进行测试.针对此难点,本手册会介绍包括Android环 ...

  8. Linux内核调试方法总结

    Linux内核调试方法总结 一  调试前的准备 二  内核中的bug 三  内核调试配置选项 1  内核配置 2  调试原子操作 四  引发bug并打印信息 1  BUG()和BUG_ON() 2   ...

  9. LeanCloud SDK 中秒杀70%问题的调试方法

    非常多同学在LeanCloud上遇到的不少问题,事实上能够自我解决的,如今介绍一下LeanCloud上的调试方法. LeanCloud 是通过 REST API来进行前后端分离的.这意味着当出现故障的 ...

随机推荐

  1. C#中如何给PDF添加可见的数字签名

    数字签名广泛用于保护PDF文档,可见数字签名在日常生活中是相当重要的.在这篇文章中我将与大家分享如何给PDF文件添加可见的数字签名. 首先我下载了一个由E-iceblue公司开发的免费版的PDF组件- ...

  2. 在Windows下安装redis扩展和memcached扩展

    一.php安装redis扩展   1.使用phpinfo()函数查看PHP的版本信息,这会决定扩展文件版本       2.根据PHP版本号,编译器版本号和CPU架构, 选择php_redis-2.2 ...

  3. 提交到SVN中的项目被删除 且项目名已经被新建项目占用找回方法

    提到项目找回,一看就头疼,找回起来较麻烦.下面就讲一下. 首先,确定项目是否被删除?找项目,太多了,都被找一遍了,还是没找到,看看就头痛,换了个方法,找了个项目的包,xx.apk,反编译下吧,过程略, ...

  4. 解决tomcat debug 调试时间过长的问题

    做java web很早就碰到一个问题,eclipse 的调试有时候忽然启动时间奇慢 ,但是正常启动速度没问题,其他项目也完全正常 后来想想也不影响项目运行,也没太在意 不过今天又碰到这问题了,而且启动 ...

  5. ML(4): NavieBayes在R中的应用

    朴素贝叶斯方法是一种使用先验概率去计算后验概率的方法, 具体见上一节. 算法包:e1071 函数:navieBayes(formule,data,laplace=0,...,subset,na.act ...

  6. Memetic Algorithm(文化基因算法)

    1. 文化进化理论 威尔逊认为,从性质上来讲,文化进化总是以拉马克主义为特征的,即文化进化依赖于获得性状的传递,相对来说速度比较快:而基因进化是达尔文主义式的,依赖于经过几个世代的基因频率的改变,因而 ...

  7. Linux配置tomcat (centos配置java环境 tomcat配置篇 总结三)

    ♣下载安装tomcat7 ♣设置启动和关闭 ♣设置用户名和密码 ♣发布java web项目 声明:这篇教程是建立在前两篇教程的基础上的,所以,还没安装工具和jdk,可以先看这个系列的前面两篇(去到文末 ...

  8. Tarjan-求强连通分量

    知识点-Tarjan 强连通分量:在一个图的子图中,任意两个点相互可达,也就是存在互通的路径,那么这个子图就是强连通分量(或者称为强连通分支).如果一个有向图的任意两个点相互可达,那么这个图就称为强连 ...

  9. Lambda表达式效率问题

    原文 http://www.importnew.com/17262.html 有许许多多关于 Java 8 中流效率的讨论,但根据 Alex Zhitnitsky 的测试结果显示:坚持使用传统的 Ja ...

  10. OpenGL 的空间变换（下）：空间变换

    通过本文的上篇 OpenGL 的空间变换(上):矩阵在空间几何中的应用 ,我们了解到矩阵的基础概念.并且掌握了矩阵在空间几何中的应用.接下来,我们将结合矩阵来了解 OpenGL 的空间变换. 在使用 ...