对不起!冷到你!

整理印象笔记的时候发现了这些零零碎碎的冷门知识......html

注意!!这是一篇自娱自乐的没什么养分的文章(敲黑板!!!)chrome

1.你知道浏览器的地址栏能运行HTML代码嘛?

data:text/html,<div id="J_test">test</div>
复制代码

是否是很神奇?!前提是非IE内核的浏览器才能这么玩哦。浏览器

2.你知道全部的元素ID都是全局变量嘛?

两种方式输出的东西是同样的。仅限终端调试!!实际的代码中,仍是乖乖的该写什么写什么吧。bash

3.你知道console.log能变变变变颜色嘛?

利用%c让你从一堆调试信息中找到重点!函数

4.简单粗暴的debugger了解一下

只要把debugger写到代码里,浏览器运行的时候就会自动自动停在那里,简单粗暴,用完的记得删掉......汗测试

对于私有函数和匿名函数之外的函数,在控制台中输入 debug(funcName) 能够帮助你快速定位到要调试的函数哦。ui

var Test = function () {
	this.func1 = function () {
		console.log('debug test')
	}
}
var test = new Test()
debug(test.func1)
test.func1()
复制代码

5.console.table听过没?

把对象输出成表格,仍是有点小用的。this

6.console.time() 和 console.timeEnd() 测试耗时

想要知道某段代码消耗了多长时间? console.time() 和 console.timeEnd() 来帮助你!spa

7.你可能都没有注意到chrome的这个小按钮

美化压缩后的代码,一步到位!debug

8.使人头疼的垂直居中translateY来帮忙

/* 垂直居中 */
.vertical-center {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
/* 水平居中 */
.horizontal-center {
    position: relative;
    left: 50%;
    transform: translateX(-50%); 
}
复制代码

9.想知道你的代码被执行了几回嘛?

emmmm......console.count() 这个东西,仍是颇有用的。

可是!!!!用完记得删掉,省得上线后由于一句 console.count 阻断代码的执行,切记切记!!

相关文章
相关标签/搜索