chrome 开发工具

原文：https://developers.google.com/chrome-developer-tools/docs/console-api?hl=zh-CN#consoleassertexpression_object

第一次读这个，以前的用法都是听同事朋友讲的。没看过文档，BS自己一下。

这些API命令，写信息到web程序的控制台中。由js创建，调试session初始化。（翻译过来真绕）
console.assert(expression, object) //
console.assert(1>5, 'is wrong!')
Assertion failed: is wrong! VM723:2
(anonymous function)VM723:2
InjectedScript._evaluateOnVM432:613
InjectedScript._evaluateAndWrapVM432:573
InjectedScript.evaluateVM432:492
undefined
console.assert(1>0, 'is wrong!')
undefined
如果指定的表达式是错误的,将消息写入控制台以及一个堆栈跟踪。


console.clear() //清空命令端


console.count(label)
被调用的次数
function login(user) {
console.count("Login called");
// login() code...
}
输出
Login called: 1
Login called: 2
Login called: 3


console.debug(object [, object, ...]) //与console.log() 是一样的。


console.dir(object)
打印的JavaScript表示指定的对象。如果被记录的对象是一个HTML元素,然后显示的DOM表示的属性
console.log("document body: %O", document.body);
可以打印出同样的东西。
console.log(document.body);
同上面输出一样的内容，只是格式为 xml 格式。


console.dirxml(object)
同上面输出一样的内容，只是格式为 xml 格式。


console.error(object [, object, ...])
类似于console.log(),console.error()和还包括一个堆栈跟踪的方法

(anonymous function)VM998:2
InjectedScript._evaluateOnVM432:613
InjectedScript._evaluateAndWrapVM432:573
InjectedScript.evaluate


console.group(object[, object, ...]) //参数就是这个日志组的标题。
开始一个新的日志组和一个可选的标题。所有发生的控制台输出调用该方法后,调用console.groupEnd()出现在同一视觉组。


console.groupCollapsed(object[, object, ...])
同上一样，创建一个日志组，只是初始化是关闭的。而上面是开放的


console.groupEnd() //结束当前日志组，注意大小写


console.info(object [, object, ...])
类似于console.log()


console.log(object [, object, ...])
最常用的，我第一次使用的。一段时间内，只会用的。大BOSS级东东。
详细介绍一下吧。
在控制台（命令行）显示一条消息。一个或多个对象传进来。
console.log("App started"); 纯显示消息
console.log(value);? 显示变量值
console.log("User %s has %d points", userName, userPoints);?格式化显示变量值和消息
%s, 字符串
%d or %i, 整数型
%f, 浮点数
%o, 一个可扩展的DOM元素(如面板)的元素。
%O, 一个可扩展的javascript 对象
%c, 字符串根据您提供CSS样式。
console.log("%cUser %s has %d points", "color:orange; background:blue; font-size: 16pt", userName, userPoints);


console.profile([label])
chrome DevTools 是打开时，这个函数开始一个CPU配置和一个标签（可选项），直到 profileEnd() 结束。?


console.profileEnd() //看上面，关闭配置文件。


console.time(label)
开始一个新的定时器和一个关联的标签。当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");
?以前许多同学问，如何计算，测试，JS的开发性能，这个来了。解决了这个问题，可以测试出一段代码的性能时间了。


console.timeEnd(label)
关闭相同标签的计时器。


console.timeStamp([label])
将此函数添加到时间轴（Timeline）上，可以让开发者从视觉上直观的观察到代码生成执行的时间点所在位置。
这个时间轴就是F12 中的那个菜单时间轴 (Timeline)。
function AddResult(name, result) {
console.timeStamp("Adding result");
var text = name + ': ' + result;
var results = document.getElementById("results");
results.innerHTML += (text + "
");
}
上面的代码这样加上后，就能在时间轴中查看到执行这个函数时的位置了。
?
console.trace()
打印一个堆栈跟踪的方法,包括链接到特定的JavaScript源代码行。一个计数器显示的次数跟踪()方法被调用,如下面屏幕截图所示。
?
console.warn(object [, object, ...])
这种方法就像console.log()也显示一个黄色的警告图标和登录信息。
?console.warn("User limit reached! (%d)", userPoints);
?
window
开启调试功能的全局开关。用法如：
brightness : function() {
window;
var r = Math.floor(this.red*255);
var g = Math.floor(this.green*255);
var b = Math.floor(this.blue*255);
return (r * 77 + g * 150 + b * 29) >> 8;
}
各项介绍完成。
?注意：上面由于编辑软件原因，没有加图，图在我的博客中会加上。几个关键的图。