【javascript】console 让 js 调试更简单
浏览器的控制台(console)是最重要的面板,主要作用是显示网页加载过程中产生各类信息。
显示信息
console.log('hello world');
console.debug('debug');
console.info('信息');
console.error('错误');
console.warn('警告');
最常用的就是 console.log
了。
占位符
console
对象还可以使用 printf 风格的占位符。不过只支持字符(%s
)、整数(%d
或 %i
)、浮点数(%f
)、对象(%o
)和 css 样式(%c
)。
var person = {};
person.name = 'Jack';
person.age = 30;
console.log('%o', person);
console.log('%d年%d月%d日', 2016, 08, 23);
console.log('圆周率:%f', 3.1415926);
console.log('%c改变文本颜色', 'color:green;');
信息分组
console.group("第一组信息");
console.log("第一组第一条");
console.log("第一组第二条");
console.groupEnd();
console.group("第二组信息");
console.log("第二组第一条");
console.log("第二组第二条");
console.groupEnd();
查看对象的信息
console.dir()
可以显示一个对象所有的属性和方法。
var person = {};
person.name = 'Jack';
person.age = 30;
person.talk = function(str) {
console.log(str);
}
console.dir(person);
显示某个节点的内容
console.dirxml()
用来显示网页的某个节点(node)所包含的 html/xml 代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="keywords" content="">
<meta name="description" content="">
<title>Document</title>
</head>
<body>
<table id="table">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
</html>
<script>
var oTable = document.getElementById('table');
console.log(oTable);
</script>
判断是否为真
console.assert()
用来判断一个表达式或变量是否为真。如果结果为否,则在控制台输出一条相应信息,并且抛出一个异常。
console.assert(1);
console.assert(1 === 2);
追踪函数的调用轨迹
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);
}
运行后,会显示 add()
的调用轨迹,从上到下依次为 add()
、add1()
、add2()
、add3()
。
计时功能
console.time()
和 console.timeEnd()
,用来显示代码的运行时间。
console.time('计时器一');
for (var i = 0; i < 1000; i++) {
for (var j = 0; j < 1000; j++) {}
}
console.timeEnd('计时器一');
性能分析
性能分析(Profiler)就是分析程序各个部分的运行时间,找出瓶颈所在,使用的方法是console.profile()
。
假定有一个函数 Foo()
,里面调用了另外两个函数 funcA()
和 funcB()
,其中 funcA()
调用 10 次,funcB()
调用 1 次。
function Foo() {
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++) {}
}
然后,就可以分析 Foo()
的运行性能了。
console.profile('性能分析器一');
Foo();
console.profileEnd();
参考资料
【javascript】console 让 js 调试更简单的更多相关文章
- 灵活使用 console 让 js 调试更简单
摘要: 玩转console. 原文:灵活使用 console 让 js 调试更简单 作者:前端小智 Fundebug经授权转载,版权归原作者所有. Web 开发最常用的就是 console.log , ...
- console 让 js 调试更简单
浏览器的控制台(console)是最重要的面板,主要作用是显示网页加载过程中产生各类信息. 显示信息 console.log('hello world'); console.debug('debug' ...
- [转]九个Console命令,让js调试更简单
转自:九个Console命令,让js调试更简单 一.显示信息的命令 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html ...
- 让js调试更简单—console
一.显示信息的命令 console.log 用于输出普通信息 console.info 用于输出提示性信息 console.error用于输出错误信息 console.warn用于输出警示信息 最常用 ...
- .net core2.0添加json文件并转化成类注入控制器使用 让js调试更简单—console
.net core2.0添加json文件并转化成类注入控制器使用 上一篇,我们介绍了如何读取自定义的json文件,数据是读取出来了,只是处理的时候太麻烦,需要一遍一遍写,很枯燥.那么有没有很好的办法呢 ...
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
- 【F12】Console命令,让js调试更简单
Console命令,让js调试更简单 一.显示信息的命令 console.log("normal"); // 用于输出普通信息 console.info("informa ...
- 分享几个日常调试方法让js调试更简单
下面分享几个日常调试代码的时候在Console命令行显示你的操作,让你的js调试更简单. console显示信息的命令 在浏览器按f12在console上显示你的文本. <!DOCTYPE ht ...
- 【F12】九个Console命令,让js调试更简单
一.显示信息的命令 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html> <head> &l ...
随机推荐
- 用python批量生成简单的xml文档
最近生成训练数据时,给一批无效的背景图片生成对应的xml文档,我用python写了一个简单的批量生成xml文档的demo,遇见了意外的小问题,记录一下. 报错问题为:ImportError: No m ...
- BZOJ.2002.Bounce 弹飞绵羊(LCT)
题目链接 从一个点只能往后跳,即后继状态只有一个,那么拿nxt[x]做fa[x]啊!这样就成了一棵树,从每个点开始的答案是它到所在树的根节点的距离. nxt[]的更改即动态修改树边,用LCT即可. 这 ...
- (华中科大)江南雨烟 C++ STL 专栏
本文转载来自,华中科技大学江南雨烟的C/C++专栏部分STL剖析文章,以作学习之用. [1] [C++ STL学习之一]容器的共通能力和共通操作总结 [2] [C++ STL学习之二]容器vect ...
- VC6配置CXimage库
VC6下配置CxImage库教程 第一步 下载CxImage http://sourceforge.net/projects/cximage/下载相应的CxImage文件 本例使用的最新版本(7.02 ...
- Python进制转换(二进制/八进制/十进制/十六进制)
Python 进制转换 二进制 八进制 十进制 十六进制 作者:方倍工作室 地址:http://www.cnblogs.com/txw1958/p/python3-scale.html 全局定义 ba ...
- AngularJS中监视Scope变量以及外部调用Scope方法
在AngularJS中,有时候需要监视Scope中的某个变量,因为变量的改变会影响一些界面元素的显示.有时,也希望通过jQuery调用Scope的某个方法. 比如以下场景: <div> & ...
- linux查看及修改文件权限以及相关
linux查看及修改文件权限以及相关 查看文件权限的语句: 在终端输入: ls -l xxx.xxx (xxx.xxx是文件名)那么就会出现相类似的信息,主要都是这些: -rw-rw-r-- 一共有1 ...
- mysql 5.7 离线安装
删除原有的mariadbrpm -qa|grep mariadbrpm -e --nodeps mariadb-libs 安装rpm -ivh mysql-community-common-5.7.2 ...
- 你真的会用Gson吗?Gson使用指南(1)
JSON (官网) 是一种文本形式的数据交换格式,它比XML更轻量.比二进制容易阅读和编写,调式也更加方便.其重要性不言而喻.解析和生成的方式很多,Java中最常用的类库有:JSON-Java.Gso ...
- js-BootstrapValidator简单使用
本例使用版本 <!-- 新 Bootstrap 核心 CSS 文件 --> <link href="http://cdn.static.runoob.com/libs/bo ...