浏览器的控制台(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();

参考资料

console 让 js 调试更简单的更多相关文章

  1. 灵活使用 console 让 js 调试更简单

    摘要: 玩转console. 原文:灵活使用 console 让 js 调试更简单 作者:前端小智 Fundebug经授权转载,版权归原作者所有. Web 开发最常用的就是 console.log , ...

  2. 【javascript】console 让 js 调试更简单

    浏览器的控制台(console)是最重要的面板,主要作用是显示网页加载过程中产生各类信息. 显示信息 console.log('hello world'); console.debug('debug' ...

  3. [转]九个Console命令,让js调试更简单

    转自:九个Console命令,让js调试更简单 一.显示信息的命令 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html ...

  4. 让js调试更简单—console

    一.显示信息的命令 console.log 用于输出普通信息 console.info 用于输出提示性信息 console.error用于输出错误信息 console.warn用于输出警示信息 最常用 ...

  5. 【F12】Console命令,让js调试更简单

    Console命令,让js调试更简单 一.显示信息的命令 console.log("normal"); // 用于输出普通信息 console.info("informa ...

  6. .net core2.0添加json文件并转化成类注入控制器使用 让js调试更简单—console

    .net core2.0添加json文件并转化成类注入控制器使用 上一篇,我们介绍了如何读取自定义的json文件,数据是读取出来了,只是处理的时候太麻烦,需要一遍一遍写,很枯燥.那么有没有很好的办法呢 ...

  7. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  8. 分享几个日常调试方法让js调试更简单

    下面分享几个日常调试代码的时候在Console命令行显示你的操作,让你的js调试更简单. console显示信息的命令 在浏览器按f12在console上显示你的文本. <!DOCTYPE ht ...

  9. 【F12】九个Console命令,让js调试更简单

    一.显示信息的命令 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html> <head>     &l ...

随机推荐

  1. [ACM] hdu 1025 Constructing Roads In JGShining's Kingdom (最长递增子序列,lower_bound使用)

    Constructing Roads In JGShining's Kingdom Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65 ...

  2. android listview用adapter.notifyDataSetChanged()无法刷新每项的图标

    http://blog.csdn.net/caizhegnhao/article/details/41318575 今天在开发中遇到一个很奇怪的listview的问题. 这个问题情景是我的应用需要做一 ...

  3. 时间格式转化 String2datestyle

    时间格式转化成string工具类: package cn.javass.util; import java.text.DateFormat; import java.text.SimpleDateFo ...

  4. SQL Server 利用游标解决Tempdb究极竞争-DBA-程序员需知

    SQL Server tempdb分配竞争算是DBA老生常谈的问题了,几乎现在所有的DBA都知道多建几个文件来解决/缓解问题.但是深层次的的竞争依旧不可避免.这里给大家剖析下游标在tempdb中的特点 ...

  5. WPF快速入门系列(4)——深入解析WPF绑定

    一.引言 WPF绑定使得原本需要多行代码实现的功能,现在只需要简单的XAML代码就可以完成之前多行后台代码实现的功能.WPF绑定可以理解为一种关系,该关系告诉WPF从一个源对象提取一些信息,并将这些信 ...

  6. Asp.Net Web API 2第六课——Web API路由和动作选择

    Asp.Net Web API 导航 Asp.Net Web API第一课——入门http://www.cnblogs.com/aehyok/p/3432158.html Asp.Net Web AP ...

  7. 优秀的UI插件

    妹子UI: http://amazeui.org/getting-started 百度图表: http://echarts.baidu.com/ 手机UI库:https://github.com/ac ...

  8. 自定义Windows性能监视器

    Windows 性能监视器是一个很好用的自带监视工具,对于一些基本简单的监视需求可以轻松满足.本文主要总结了一下如何将自己应用中的一些性能数据暴露到性能监视器上方便管理. 什么?不知道什么是Windo ...

  9. [ACM_图论] Fire Net (ZOJ 1002 带障碍棋盘布炮,互不攻击最大数量)

    Suppose that we have a square city with straight streets.  A map of a city is a square board with n ...

  10. atitit.表单验证 的dsl 本质跟 easyui ligerui比较

    atitit.表单验证的dsl 本质跟 easyui ligerui比较 1. DSL 声明验证 1 2. 自定义规则 1 3. 正则表达式验证,可以扩展实现 2 4. 犯错误消息提示,generic ...