分享几个日常调试方法让js调试更简单
下面分享几个日常调试代码的时候在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>
来源：知乎
分享几个日常调试方法让js调试更简单的更多相关文章
- Linux内核调试方法总结之调试宏
本文介绍的内核调试宏属于静态调试方法,通过调试宏主动触发oops从而打印出函数调用栈信息. 1) BUG_ON 查看bug处堆栈内容,主动制造oops Linux中BUG_ON,WARN_ON用于调试 ...
- vue.js使用更简单的方法制作带删除功能的tooolist
今天复习了下vue.js,先做了个基本版的todolist,做完后自己想加个删除本项的按钮.一开始做没啥头绪了,试了试无果,查了一把后发现网上的那些方法真的是麻烦,自己动手丰衣足食,自己最后换了思路试 ...
- IEjs 调试、火狐 js 调试
http://www.jb51.net/article/26707.htm IE下调试代码, 在代码中写 debugger; 然后IE启用调试, 会执行到debugger 断点出, 双击变量 右键 添 ...
- iOS-----用LLDB调试，让移动开发更简单（二）
image lookup –address 当我们有一个地址,想查找这个地址具体对应的文件位置,可以使用image lookup --address,简写为image lookup -a e.g: 当 ...
- iOS---用LLDB调试，让移动开发更简单（一）
因文章字数超过限制,所以拆分成了上下篇 LLDB的Xcode默认的调试器,它与LLVM编译器一起,带给我们更丰富的流程控制和数据检测的调试功能.平时用Xcode运行程序,实际走的都是LLDB.熟练使用 ...
- .net 多播委托的使用方法以及场景，更简单的观察者模式
首先来说一下什么是多播委托 多播委托就是在委托里定义一个或者多个方法的一个集合 使用方法: public Action actList; //添加方法 public void AddActionMet ...
- Android 平台JS调试技术
1. 测试技术简介 Android平台微信公众号一般以H5的形式开发,测试发现流量一般都通过js进行加密传输,导致无法对越权.SQL注入等风险点进行测试.针对此难点,本手册会介绍包括Android环 ...
- Linux内核调试方法总结
Linux内核调试方法总结 一 调试前的准备 二 内核中的bug 三 内核调试配置选项 1 内核配置 2 调试原子操作 四 引发bug并打印信息 1 BUG()和BUG_ON() 2 ...
- LeanCloud SDK 中秒杀70%问题的调试方法
非常多同学在LeanCloud上遇到的不少问题,事实上能够自我解决的,如今介绍一下LeanCloud上的调试方法. LeanCloud 是通过 REST API来进行前后端分离的.这意味着当出现故障的 ...
随机推荐
- 关于JDEV的连接问题
在JDev中有两个连接数据哭库的地方,双击项目名称,里面的Business Components里面的Connection里面的链接,这个链接是Run页面时候的链接 第二个链接在Oracle Appl ...
- linux最常用命令
1,cd命令 作用:切换当前目录,它的参数切换的路劲,可以是相对路劲,也可以是绝对路劲. 用法: cd /root/Docements #切换当/root/Docements,绝对路劲 cd ./ ...
- poptest分享计划以及提供的服务
poptest分享计划以及提供的服务 POPTEST致力于测试开发工程师的培养,能让学员经过系统培训后从事自动化测试工作,包括功能自动化.性能自动化.接口自动化以及移动端系统的自动化测试等,由于移动端 ...
- CF #404 (Div. 2) D. Anton and School - 2 (数论+范德蒙恒等式)
题意:给你一个由'('和')'组成的字符串,问你有多少个子串,前半部分是由'('组成后半部分由')'组成 思路:枚举这个字符串中的所有'('左括号,它左边的所有'('左括号的个数为num1,它的右边的 ...
- selenium实例：unittest框架+PO开发模式
这是<selenium2+python学习总结>的升级版. 1. 项目结构 2. 项目代码 1) globalparameter.py # ...
- GPIO寄存器
GPIO寄存器描述 <STM32参考手册中文-p75> 1.端口配置低寄存器(GPIOx_CRL)(x = A...E)2.端口配置高寄存器(GPIOx_CRH)(x = A...E) 3 ...
- 用C#写经理评分系统
先写需求: 01.显示员工信息 02.实现项目经理给员工评分的功能 第一步: 建立两个类,员工类和项目经理类 定义属性和方法 员工类:工号.年龄.姓名.人气值.项 ...
- Python中字符串拼接的三种方式
在Python中,我们经常会遇到字符串的拼接问题,在这里我总结了三种字符串的拼接方式: 1.使用加号(+)号进行拼接 加号(+)号拼接是我第一次学习Python常用的方法,我们只需要把我们要加 ...
- nodeName,nodeValue,nodeType,typeof 的区别
nodeName 属性含有某个节点的名称. 元素节点的 nodeName 是标签名称 属性节点的 nodeName 是属性名称 文本节点的 nodeName 永远是 #text 文档节 ...
- Jax-ws 开发webService ,并使用spring注入service类
由于使用myeclipse自动生成的Delegate,所以在使用service实现层的时候,默认创建的时候都是使用new的方法: 这样就导致每一次请求过来都得new一个新的:如果service有注入其 ...