下面分享几个日常调试代码的时候在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. 转:js,jQuery 排序的实现,网页标签排序的实现,标签排序

    js,jQuery 排序的实现: 重点: 想要实现排序,最简单的方法就是 先把标签用jQuery读进对象数组 用js排序好对象数组 (针对对象数组进行排序, 不要试图直接对网页的内容进行直接更改) 用 ...

  2. 苹果App删除 AppStore应用删除指南

    最近做IOS应用上传时,想改一下SUK或者Bundle ID ,发现改不了,只能删除. 但是删除却没有找到删除按钮,百度半天不给力,不过后来多亏一位群里的兄弟给找个链接,终于解决 今天就给他记录下来, ...

  3. Luogu3373【模板】线段树2

    P3373[模板]线段树2 题目描述 如题,已知一个数列,你需要进行下面两种操作: 1.将某区间每一个数加上x 2.将某区间每一个数乘上x 3.求出某区间每一个数的和 输入输出格式 输入格式: 第一行 ...

  4. 1.Redis 的安装

    一.Redis 介绍 Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API. 作为Key-value型数据库,Red ...

  5. WebService基础学习(三)—CXF

    一.什么是CXF?      Apache CXF = Celtix + Xfire,开始叫 Apache CeltiXfire,后来更名为 Apache CXF 了,以下简称为 CXF.Apache ...

  6. activiti 一个流程的运转步骤 以请假流程为例

    ---为了加深对activiti的理解记忆,对自己做的一个流程进行自述.加强记忆 请假实例 一.设计请假的流程图以及流程文件,完善对应数据项,比如用户信息,请假单信息 --请假单 --流程图 --流程 ...

  7. Ubuntu12.04嵌入式交叉编译环境arm-linu-gcc搭建过程,图解

    转载:王文松的博客Ubuntu12.04嵌入式交叉编译环境arm-linu-gcc搭建过程,图解 安装环境       Linux版本:Ubuntu 12.04    内核版本:Linux 3.5.0 ...

  8. AES算法,DES算法,RSA算法JAVA实现

    1     AES算法 1.1    算法描述 1.1.1      设计思想 Rijndael密码的设计力求满足以下3条标准: ① 抵抗所有已知的攻击. ② 在多个平台上速度快,编码紧凑. ③ 设计 ...

  9. sublime前端开发工具常用技巧

    ctrl+N//新建文件夹ctrl+shift+p//打开命令行!,ctrl+E//快速生成html模板ctrl+E//自动补齐ctrl+P(#@)//goto 任何地方,其中#查找元素,@查找样式c ...

  10. URL解析器urllib2

    urllib2是Python的一个库(不用下载,安装,只需要使用时导入import urllib2)它提供了一系列用于操作URL的功能. urlopen urllib2.urlopen可以接受Requ ...