1、关于HTML（无CSS）

1.1 HTML部分

<p onClick="makeGreen()">BREAK×DOWN</p>

2、JavaScript部分

2.1 开头部分

先定义一个数组，方便后面使用

const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];

2.2 一般的开发测试

由于一行一行的关闭console.log()比较麻烦，所以设置一个方法，只要控制isDev:false，那么就显示不出来了

let console = {isDev:true,log(...args){if(!this.isDev) return;window.console.log("%c住手","font-size:60px;color:red;");window.console.log(...args);}
}

2.3 常规的方式

console.log(123,456);

2.4 在普通的字符串中嵌入表达式

// （把数值传递给对方，有%d（整数），%s（字符串），%f（浮点数））console.log("My name is %s !!!","Alex");console.log("I have %f yuan",3.45);console.log("I have %d yuan",3.45);//现在ES6，是使用`${}`的方法
let name = "Alex";
console.log(`My name is ${name} !!!`);

2.5 警告、错误、信息

console.warn("警告");
console.error("错误");
console.info("火狐会有一个❗");// Testingconsole.assert(false,"讯息");console.assert("","讯息");console.assert(0,"讯息");console.assert(NaN,"讯息");console.assert(null,"讯息");console.assert(undefined,"讯息");//要记得前面要写
let console = {isDev:true,warn(...args){if(!this.isDev) return;window.console.warn(...args);},error(...args){if(!this.isDev) return;window.console.error(...args);},info(...args){if(!this.isDev) return;window.console.info(...args);}，assert(...args){if(!this.isDev) return;window.console.info(...args);}
}//后面略写

2.6 dir和dogs（物件）

let p = document.querySelector("p");console.log(p);console.log(dogs);//出物件/*** dir有点向目录，把所有的东西展开* window.console.log(console);前面一个console是系统的，后面的console是自己写的*  */console.dir(p);console.dir(dogs);//物件// Grouping together//console.log(dogs,["name"]);console.table(dogs);

2.7 计算

  console.count('Wes');console.count('Wes');console.count('Steve');console.count('Steve');console.count('Wes');console.count('Steve');console.count('Wes')

2.8 时效

你可以启动一个计时器来跟踪某一个操作的占用时长。每一个计时器必须拥有唯一的名字，页面中最多能同时运行10,000个计时器。当以此计时器名字为参数调用 console.timeEnd() 时，浏览器将以毫秒为单位，输出对应计时器所经过的时间。


/** 如果在整个代码外面加一个{}，把它包起来，那么就会加速时间，下面的加上括号后就时间差不多。* *///第一种时间（i，j定义都在外面）test out: 301.48876953125 msconsole.time("test out");let i1 ,j1;for(i1 =1 ;i1<100000000;i1++){j1=i1;}console.timeEnd("test out");//第二种时间(i,j定义都在里面)test in: 58.506103515625 msconsole.time("test in");for(let i2 =1 ;i2<100000000;i2++){let j2=i2;}console.timeEnd("test in");//第三种时间（i的定义在外面，j定义在里面）test3: 194.106201171875 msconsole.time("test3");let i3;for(i3 =1 ;i3<100000000;i3++){let j3=i3;}console.timeEnd("test3");//第四种时间（j的定义在外面，i定义在里面）test4: 135.25 msconsole.time("test4");let j4;for(let i4 =1 ;i4<100000000;i4++){j4=i4;}console.timeEnd("test4");

JavaScript关于console的使用相关推荐

IE下javascript的console方法
IE下javascript的console方法 FireFox 和 Chrome 下调试JS都有console,IE6下没有.特用此办法来兼容IE6. <br /><pre lang ...
javascript 中 console 的用法
javascript 中 console 的用法视频 https://www.bilibili.com/video/BV1g7411L751?from=search&seid=1567656 ...
JavaScript 控制台(console)调试技巧
一.简单理解 Console是用于显示JS和DOM对象信息的单独窗口.在浏览器中按F12调出的调试窗口中有一个控制台选项或console选项. 二.支持console的浏览器 Chrome和FireF ...
HTML控制台输出console,Javascript的console.log()用法
把下面代码保存为html文件,然后IE8---F12---脚本---控制台里就会出现有趣的东西,如果是Firefox,安装了FireBug后,则F12--控件台--所有 ,同样可以看到. javasc ...
高级Javascript调试——console.table()
原文:http://www.mariusschulz.com/2013/11/13/advanced-javascript-debugging-with-consoletable 本文只是简单翻译,部 ...
javaScript中console.log()的用法
console.log()类似于alert啊,不过不会打断操作.主要是方便调式javascript用的.你可以看到你在页面中输出的内容,不过需要浏览器支持控制台输出.在浏览器界面使用快捷键 F12 就 ...
javaScript的console
console 第一印象便是console.log,通过它在浏览器控制台进行调试输出.但除此之外还有许多方法. 比如在访问百度首页时候的控制台,会有以下的内容.但是仔细一看,你会发现,它有颜色.怎么做 ...
Javascript：console - 使用须知！
最近为了在程序中使用console.dir打印对象结构,因而使用了console. console在IE中,可能只有9,10支持. 在IE浏览器中,按F12打开控制台的时候,打印很正常,但是不开控制台 ...
javascript通过console.log()控制台输出各种字体样式(3D文字、彩色背景色体)
一.3D文字 javascript代码如下: <script type="text/javascript"> console.log("%c 神码服云&quo ...

JavaScript关于console的使用

1、关于HTML（无CSS）

1.1 HTML部分

2、JavaScript部分

2.1 开头部分

2.2 一般的开发测试

2.3 常规的方式

2.4 在普通的字符串中嵌入表达式

2.5 警告、错误、信息

2.6 dir和dogs（物件）

2.7 计算

2.8 时效

JavaScript关于console的使用相关推荐

最新文章

热门文章