chrome控制台调试学习笔记 暂未整理

15:03 2015/12/7
chrome控制台调试学习：
推荐博客：http://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.html
console.log 普通提示信息，可以自己打印需要的内容或变量
可以结合%c进行格式定制：console.log('%chello world','font-size:25px;color:red;');
也可以结合css改变输出样式
可以多个参数，它会自动以空格分开进行输出：console.log('%c你好','color:red;','小明','你知道小红被妈妈打了么');
console.error 打印错误类信息
console.warn 打印警告类错误
console.info 打印提示信息
console.group
xonsole.groupEnd(适合于开发一个规模很大的模块，功能很复杂的时)
例子：
console.group("app.foo");
console.log("来自foo模块的信息 blah blah blah...");
console.groupEnd();
console.group("app.bar");
console.log("来自bar模块的信息 blah blah blah...");
console.groupEnd();

console.assert if表达式的实现
例子：
var isDebug=false;
console.assert(isDebug,'开发中的log信息。。。');
xonsole.count 用于统计某段代码被执行的次数
例子：
function foo(){
//其他函数逻辑blah blah。。。
console.count('foo 被执行的次数：');
}
foo(); // 调用上面的函数查看效果
xonsole.dir 将DOM节点以JS对象的形式输出，console.log是直接以DOM树的结构进行输出
console.dir(document.body);
console.log(document.body);
console.time & console.timeEnd // 做性能测试时查看执行耗时
例子：
console.time("Array initialize");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
array[i] = new Object();
};
console.timeEnd("Array initialize");
console.profile & console.timeLime
console.profile & console.profileEnd 查看CPU使用相关信息(开发工具的Tab就是的)
console.timeLime & console.timeEnd 时间轴
console.trace 堆栈跟踪相关的调试，代码被打断点后面板中可以查看堆栈相关信息
以上是挂载在window.console这个对象下的 统称Console API。
接下来是控制台中使用的 统称Command Line API。
$_ 返回最后一次表达式的执行结果 和按向上键的效果一样
例子：
2+2//回车，再
$_+1//回车得5
$0-$4表示最近5个你选择过的DOM节点,最多保存5个
$('body') 支持Jqeury选择器选择 但是$(selector)返回的是满足选择条件的首个DOM元素。是原生JavaScript document.querySelector() 的封装
$$(selector) 返回的是所有满足选择条件的元素的一个集合，是对document.querySelectorAll() 的封装
copy 将控制台获取的值复制到剪贴板
例子：
copy(document.body)
但是这里的控制台命令只能在控制台中环境中执行，因为他不依附于任何全局变量比如window，所以其实在JS代码里是访问不了这个copy方法的，所以从代码层面来调用复制功能也就无从谈起
key & values
前者返回对象所有属性名组成的数据 后者返回所有属性值组成的数组
var tboy={name:'wayou',gender:'unknown',hobby:'opposite to the gender'};
keys(tboy);
values(tboy);
monitor & unmonitor
接收一个函数名，每次该函数被执行之后控制台都会输出一条信息 包括函数名和传入的参数
function sayHello(name){
alert('hello,'+name);
}
monitor(sayHello);
sayHello('wayou');
unmonitor(sayHello);
sayHello('wayou');
debug & undebug
debug同样也是接收一个函数名作为参数。
当该函数执行时自动断下来以供调试，类似于在该函数的入口处打了个断点，
可以通过debugger来做到，同时也可以通过在Chrome开发者工具里找到相应源码然后手动打断点。
而undebug 则是解除该断点。
查看ajax请求相关信息：点击console，点击清楚记录，再刷新请求会出现ajax请求的url，直接点击就可以进入url网页查看模式，查看数据，可以用json格式化工具查看json数据格式
js直接测试
css实时测试
看时间
http
....