js调试工具console方法详解
一、显示信息的方法
最常用的console.log(),一般用来调试。
console.log('hello');
console.info('信息');
console.error('错误');
console.warn('警告');
效果:
二、占位符
console上述的集中度支持printf的占位符格式,支持的占位符有:字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o
console.log("%d年%d月%d日",2011,3,26);
效果:
三、信息分组
console.group("第一组信息");
console.log("第一组第一条");
console.log("第一组第二条");
console.groupEnd();
console.group("第二组信息");
console.log("第二组第一条");
console.log("第二组第二条");
console.groupEnd();
效果:

四、查看对象的信息
var obj = {
name: 'ali',
age: '20',
showName: function () {
alert(this.name);
}
}
console.dir(obj);
效果:

五、显示某个节点的内容
var info = document.getElementById('info');
console.dirxml(info);
效果:

六、判断变量是否是真
var result = 1;
console.assert( result );
var year = 2014;
console.assert(year == 2018 );
效果:

七、追踪函数的调用轨迹
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);}
效果:

八、计时功能
console.time("控制台计时器一");
for(var i=0;i<1000;i++){
for(var j=0;j<1000;j++){}
}
console.timeEnd("控制台计时器一");
效果:

九、的性能分析
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();
效果:

chrome貌似不起作用,盗了一张firebug的图...
js调试工具console方法详解的更多相关文章
- js调试工具Console命令详解
这篇文章主要介绍了js调试工具Console命令详解,需要的朋友可以参考下 一.显示信息的命令 复制代码 代码如下: < !DOCTYPE html> < html> &l ...
- js调试工具Console命令详解——转
一.显示信息的命令 <!DOCTYPE html> <html> <head> <title>常用console命令</title> < ...
- Js apply call方法详解
Js apply方法详解 我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...
- JS之console.log详解以及兄弟姐们邻居方法扩展
console.log() 基本用法 console.log,前端常用它来调试分析代码,你可以在任何的js代码中调用console.log(),然后你就可以在浏览器控制台看到你刚才打印的常量,变量,数 ...
- JS进阶篇--JS数组reduce()方法详解及高级技巧
基本概念 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被 ...
- JS数组reduce()方法详解及高级技巧
1.语法 arr.reduce(callback,[initialValue]) reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上 ...
- Js apply call方法详解【转】
我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家 ...
- js cookie使用方法详解
代码如下 复制代码 <script>function getCookie(c_name){ if (document.cookie.length>0){ //先查询cookie是否为 ...
- js数组sort方法详解
在处理数组的时候,我们有时候需要对数组进行排序,排序的方法有很多种,但是最好最快的就是利用sort方法进行快速的排序. 我们来看一个例子: var arr1 = [6, 3, 4, 1, 2, 5, ...
随机推荐
- jdk的split 有多坑
先看段 代码: String str = "4117|519951|长信利泰灵活配置混合型证券投资基金|长信利泰|3|3||||156|0||||||||||||||||||||{\&quo ...
- POJ 1258 + POJ 1287 【最小生成树裸题/矩阵建图】
Farmer John has been elected mayor of his town! One of his campaign promises was to bring internet c ...
- 【Bzoj4555】【Luogu P4091】求和(NTT)
题面 Bzoj Luogu 题解 先来颓柿子 $$ \sum_{i=0}^n\sum_{j=0}^iS(i,j)2^jj! \\ =\sum_{j=0}^n2^jj!\sum_{i=0}^nS(i,j ...
- SCU - 4439 Vertex Cover (图的最小点覆盖集)
Vertex Cover frog has a graph with \(n\) vertices \(v(1), v(2), \dots, v(n)\) and \(m\) edges \((v(a ...
- thinkphp结合bootstrap打造个性化分页
分页功能是web开发中常见的一项功能,也存在很多形式,这里主要讲一下利用thinkPHP框架的page类来打造一款bootstrap风格的分页过程. 首先需要去thinkPHP官网现在其分页扩展类ht ...
- Luogu P3362 Cool loves shaxian 生成函数
题意: 定义f(i)=∑ k∣i k^d(i≤n),给出q个询问,每个询问询问区间[l,r]的f(i)的和. n<=1e7 d<=1e18 q<=5e4 可以发现f(i)是个积性函数 ...
- bzoj 3900: 交换茸角
3900: 交换茸角 Description 动物园里有 n 头麋鹿.每头麋鹿有两支茸角,每支茸角有一个重量.然而,一旦某头麋鹿上 两支茸角的重量之差过大,这头麋鹿就会失去平衡摔倒.为了不然这种悲剧发 ...
- [BalkanOI2016]Cruise
题目大意: 平面直角坐标系内有n个点,每个点有一个点权. 你从原点p出发,走若干个点然后回到原点. 两个点之间只能笔直走,你的收获为你的路径围起来的区域内的所有店权和除以路径长度. 问最大收益. 思路 ...
- [NOIP2013 花匠] 新人解题报告
本来按照老师的要求,我学OI的第一份解题报告应是在寒假完成的关于数据结构的基础题,但由于身体原因当时未能完成,那么就在省选赛前临时写几篇吧…… 题目描述 花匠栋栋种了一排花,每株花都有自己的高度.花儿 ...
- Codeforces Round #345 (Div. 1) E. Clockwork Bomb 并查集
E. Clockwork Bomb 题目连接: http://www.codeforces.com/contest/650/problem/E Description My name is James ...

