2018.4.15 星期日 22:18

Chrome 开发者工具|https://developers.google.com/web/tools/chrome-devtools/

A [Chrome 控制台实用指南]

1 console.clear

2 console.log家族

console.log (‘普通信息’)
console.info (‘提示性信息’)
console.error (‘错误信息’)
console.warn (‘警示信息’)

2.1 console.group 与console.groupEnd

如果再配合console.group 与console.groupEnd，可以将这种分类管理的思想发挥到极致。这适合于在开发一个规模很大模块很多很复杂的Web APP时，将各自的log信息分组到以各自命名空间为名称的组里面。

2.2 第一个参数可以带一些格式化指令

另外，console.log家族还给我们提供了一个的API：第一个参数可以带一些格式化指令，比如%c,n;看下面这个炫酷的效果：

console.log('%chello world', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');

hello
当然，图片也是可以的，读者可以自行尝试，修改上述代码即可。

2.3 接收不定参数，参数间用逗号分隔

另外，console.log() 接收不定参数，参数间用逗号分隔，最终会输出会将它们以空白字符连接。

console.log('%chello','color:red','wroe','sdf')

\$_PS: console.log(‘befor not %c after styled,’,’color:red’,’second not %c second not’,’background:#f0f’)
\$_PS: console.log(‘befor not %c after styled,’+’second before not %c second after styled’,’color:red’,’background:blue’,’,not styled’)
\$_PS: 如果用call，绑定了this，根据this的style，会丢失颜色

Vue.prototype.$log=function(){
  const args = [...arguments] // args=Array.from(arguments)
  var isForce=args[args.length-1]
  if(!this.isDebug&&isForce!==true) return 
  // 只在前面的命名空间定义颜色/样式；不在后面的输出定义颜色/样式，看着眼花，也没有现成的颜色
  // console.log.call(this,'%c '+this.name+'::',this.debug.style,...arguments) // call 之后就没有颜色了
  console.log('%c'+this.name+'::',this.debug.style,...arguments)
}

3 console.table

var data = {code:200,content:[{'品名': '杜雷斯', '数量': 4}, {'品名': '冈本', '数量': 3}]};
console.table(data.content);

4 console.assert

var isDebug=false;
console.assert(isDebug,'开发中的log信息。。。');

当你想代码满足某些条件时才输出信息到控制台，那么你大可不必写if或者三元表达式来达到目的，cosole.assert便是这样场景下一种很好的工具，它会先对传入的表达式进行断言，只有表达式为假时才输出相应信息到控制台。

5 console.count

function fun(){
    ..
    console.count('fun被执行的次数');
}

6 console.dir

将DOM结点以JavaScript对象的形式输出到控制台，而console.log是直接将该DOM结点以DOM树的结构进行输出，与在元素审查时看到的结构是一致的。不同的展现形式，同样的优雅，各种体位任君选择反正就是方便与体贴。

7 console.time & console.timeEnd

…

当想要查看CPU使用相关的信息时，可以使用console.profile配合 console.profileEnd来完成这个需求。
这一功能可以通过UI界面来完成，Chrome 开发者工具里面有个tab便是Profile。使用方法和console.time基本一样，其实time开发者工具里也有个tab就是timeline。关于console.prefile博主就不做多余的介绍了。想要做更多了解的读者可以看这里。

8 $

2+2//回车，再
$_+1//回车得5

上面的$_需要领悟其奥义才能使用得当，而$0~$4则代表了最近5个你选择过的DOM节点。

另外值得一赞的是，Chrome 控制台中原生支持类jQuery的选择器，也就是说你可以用$加上熟悉的css选择器来选择DOM节点，多么滴熟悉。

剥去她伪善的外衣，其实$(selector)是原生JavaScript document.querySelector() 的封装。
同时另一个命令$$(selector)返回的是所有满足选择条件的元素的一个集合，是对document.querySelectorAll() 的封装。

9 $x(path)

将所匹配的节点放在一个数组里返回

$x("//p");
$x("//p[a]");

$x(“//p”)匹配所有的p节点，$x(“//p[a]”);匹配所有子节点包含a的p节点

0 copy

注意：他不依附于任何全局变量比如window，所以其实在JS代码里是访问不了这个copy方法的，所以从代码层面来调用复制功能也就无从谈起。但愿有天浏览器会提供相应的JS实现吧~这样我们就可以通过js代码进行复制操作而不用再依赖Flash插件了。

1 keys & values

var tfboy={name:'wayou',gender:'unknown',hobby:'opposite to the gender'};
keys(tfboy);
values(tfboy);

2 monitor & unmonitor

monitor(function)，它接收一个函数名作为参数，比如function a，每次a被执行了，都会在控制台输出一条信息，里面包含了函数的名称a及执行时所传入的参数。而unmonitor(function)便是用来停止这一监听。

function sayHello(name){
    alert('hello,'+name);
}
monitor(sayHello);
sayHello('damonare');
sayHello('tjz');
unmonitor(sayHello);

3 debug & undebug

debug同样也是接收一个函数名作为参数。当该函数执行时自动断下来以供调试，类似于在该函数的入口处打了个断点，可以通过debugger来做到，同时也可以通过在Chrome开发者工具里找到相应源码然后手动打断点。而undebug 则是解除该断点。

而其他还有好些命令则让人没有说的欲望，因为好些都可以通过Chrome开发者工具的UI界面来操作并且比用在控制台输入要方便。

B [九个Console命令，让 JS 调试更简单]

一显示信息的命令

最常用的就是console.log了。

二占位符

console上述的集中度支持printf的占位符格式，支持的占位符有：字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）

console.log("%d年%d月%d日",2011,3,26);

三信息分组

console.group("第一组信息");

　　console.log(“第一组第一条:我的博客(http://www.ido321.com)");
　　console.log(“第一组第二条:CSDN(http://blog.csdn.net/u011043843)");
　　console.groupEnd();

四查看对象的信息

console.dir()可以显示一个对象所有的属性和方法。

五显示某个节点的内容

console.dirxml()用来显示网页的某个节点（node）所包含的html/xml代码。

六判断变量是否是真

console.assert()用来判断一个表达式或变量是否为真。如果结果为否，则在控制台输出一条相应信息，并且抛出一个异常。

var result = 1;

　　console.assert(result);
　　var year = 2014;
　　console.assert(year == 2018);
1是非0值，是真；而第二个判断是假，在控制台显示错误信息

七追踪函数的调用轨迹。

console.trace()用来追踪函数的调用轨迹。

八计时功能

console.time()和console.timeEnd()，用来显示代码的运行时间。

九 console.profile()的性能分析

性能分析（Profiler）就是分析程序各个部分的运行时间，找出瓶颈所在，使用的方法是console.profile()。

function All(){
    alert(11);

　　　　 for(vari=0;i<10;i++){
funcA(1000);
}
　　　　 funcB(10000);
　　}

　　function funcA(count){
　　　　for(vari=0;i<count;i++){}
　　}

　　function funcB(count){
　　　　for(vari=0;i<count;i++){}
　　}

　　console.profile(‘性能分析器’);
　　All();
　　console.profileEnd();
输出如图：
'性能分析器'

C [Chrome 开发者控制台中，你可能意想不到的功能]

Chrome 有内置的开发者工具。它拥有丰富的特性，比如元素（Elements）、网络（Network）和安全（Security）。今天，我们主要关注一下 JavaScript 控制台。

1. 选取DOM元素

如果你对 jQuery 很熟悉，

2. 将你的浏览器变成编辑器

曾经多次幻想是否在浏览器里面就可以编辑文本？答案是可以的，你可以把你的浏览器变成编辑器。你可以在 DOM 中任意添加或移除文本。
你不再需要检查元素和编辑 HTML。相反，打开开发者控制台输入下面内容：

document.body.contentEditable=true

这将使内容变为可编辑状态。你可以编辑 DOM 里的任何东西。

3. 查找DOM中元素关联的事件

当调试时，你肯定对 DOM 中约束元素的事件监听器感兴趣。开发者控制台让你更容易找到它们。
你可以做以下事情来找到特定事件的监听器：

getEventListeners($(‘selector’)).eventName[0].listener

这将展示与特定事件相关联的监听器。eventName[0] 是一个包含所有特定事件的数组。比如：

getEventListeners($(‘firstName’)).click[0].listener

它会展示 ID 为「firstName」元素的点击事件所关联的监听器。

4. 监控事件

如果你想在 DOM 中特定元素绑定的事件执行时监控它们，你可以通过控制台中完成。你可以使用很多不同的命令来监控部分或全部事件：
monitorEvents($(‘selector’)) 能够监控你所选取元素所关联的所有事件，当事件触发时，在控制台打印它们。比如 monitorEvents($(‘#firstName’)) 会打印 ID 为「firstName」的元素绑定的所有事件。
monitorEvents($(‘selector’),’eventName’) 将打印元素绑定的特定事件。你可以将事件名字作为参数传入函数。它将打印特定元素绑定的特定事件。比如，monitorEvents($(‘#firstName’),’click’) 会打印 ID 为「firstName」的元素绑定的点击事件。
monitorEvents($(‘selector’),[‘eventName1′,’eventName3’,…]) 会根据你的要求打印多个事件。传递参数包含所有事件的字符串数组，而不是单个事件名字。比如，monitorEvents($(‘#firstName’),[‘click’,’focus’]) 会打印 ID 为「firstName」的元素绑定的点击事件和焦点事件。
unmonitorEvents($(‘selector’)) ：这个会停止监视和在控制台打印事件。

5. 查询代码块执行时间

JavaScript 控制台有一个名为 console.time(‘labelName’) 的重要函数，它接收一个标记名作为参数，然后开启计时器。

6. 将变量里的值排列成表格

7. 检查DOM中的元素

你可以直接在控制台中检查元素：

inspect

inspect($(‘selector’)) 会检查与选择器匹配的元素，并切换 Chrome 开发者工具到元素标签页。举个例子，inspect($(‘#firstName’)) 检查 ID 为「firstName」的元素，inspect($(‘a’)[3]) 检查 DOM 中第 4 个锚点元素。

$0、$1、$2

$0、$1、$2 等等能帮助你取到最近检查的元素。比如，$0 给你返回上次检查的 DOM 元素，$1 返回上上次检查的 DOM 元素。

8. 列举元素的属性

你可以在控制台中做以下事情来列举一个元素的所有属性。
dir($(‘selector’)) 返回一个对象和与其 DOM 元素关联的所有属性。你可以展开它查看细节。

9. 检索最近一个结果的值

你可以把控制台当做计算器。一旦你这么做，你可能需要在计算中使用上一次的计算结

10. 清空控制台和内存

如果你想清空控制台和内存，只需要输入：
clear()

D [前端 Console 调试小技巧]

一 Console

打开 Chrome 开发者工具的方法：

在主菜单中选择“更多工具”菜单 > 点击开发者工具。
在页面任何元素上右键，选择“检查”。
在 Mac 中，按下 Command+Option+I；在 Windows 与 Linux 中，按下 Ctrl+Shift+I。

请观察 Console 选项卡中的内容。
第一行：

清空控制台

上下文（context）

top — 在默认状态下，Console 的上下文（context）为 top（顶级）。不过当你检查元素或使用 Chrome 插件上下文时，它会发生变化。你可以在此更改 console 执行的上下文（页面的顶级 frame）。

过滤

对控制台的输出进行过滤。你可以根据输出严重级别、正则表达式对其进行过滤，也可以在此隐藏网络连接产生的消息。

设置

Hide network — 隐藏诸如 404 之类的网络错误。
Preserve log — 控制台将会在页面刷新或者跳转时不清空记录。
Selected context only — 勾上后可以根据前面 top 选择的上下文来指定控制台的日志记录范围。
User messages only — 隐藏浏览器产生的访问异常之类的警告。
Log XMLHttpRequests — 顾名思义，记录 XMLHttpRequest 产生的信息。
Show timestamps — 在控制台中显示时间戳信息。
Autocomplete from history — Chrome 会记录你曾经输入过的命令，进行自动补全。

二选择合适的 Console API

控制台会在你应用的上下文中运行你输入的 JS 代码。你可以轻松地通过控制台查看全局作用域中存储的东西，也可以直接输入并查看表达式的结果。例如：“null === 0”。

console.log — 对象引用

根据定义，console.log 将会在控制台中打印输出内容。除此之外，你还得知道，console.log 会对你展示的对象保持引用关系。请看下面的代码：

console.log — 对对象属性进行排序

Chrome 按照字母表的顺序对属性进行了排序。没法说我们是否应该喜欢这种排序方式，但了解这儿发生了什么总没坏处。

console.assert(expression, message)

如果 expression 表达式的结果为 false，Console.assert 将会抛出错误。关键的是，assert 函数不会由于报错而停止评估之后的代码。它可以帮助你调试冗长棘手的代码，或者找到多次迭代后函数自身产生的错误。

console.count(label)

console.table()

我们可以决定是完全展示数据内容还是只展示整个对象的某几列。这个表格是可排序的 —— 点击需要排序的列的表头，即可按此列对表格进行排序。

console.group() / console.groupEnd();

console.trace();

console.trace 会将调用栈打印在控制台中。如果你正在构建库或框架时，它给出的信息将十分有用。

对比 console.log 与 console.dir

它们的实现方式取决于浏览器。在最开始的时候，规范中建议 dir 要保持对对象的引用，而 log 不需要引用。（Log 会显示一个对象的副本）。但现在，如上图所示，log 也保持了对于对象的引用。它们展示对象的方式有所不同，但我们不再加以深究。不过 dir 在调试 HTML 对象的时候会非常有用。

译注：console.dir 会详细打印一个对象的所有属性与方法。

$_, $0 — $4

$_ 会返回最近执行表达式的值。 $0 — $4 — 分别作为近 5 此检查元素时对 HTML 元素的引用。

getEventListeners(object)

返回指定 DOM 元素上注册的事件监听器。这儿还有一种更便捷的方法来设置事件监听，下次教程会介绍它。

monitorEvents(DOMElement, [events]) / unmonitorEvents(DOMElement)

在指定 DOM 元素上触发任何事件时，都可以在控制台中看到相关信息。直到取消对相应元素的监视。

三在控制台中选择元素

在 Element 标签中按 ESC 键展开这个界面。

在 $ 没有另做它用的情况下：
$() — 相当于 document.querySelector()。它会返回匹配 CSS 选择器的第一个元素（例如 $(‘span’) 会返回第一个 span） $$() — 相当于 document.querySelectorAll()。它会以数组的形式返回所有匹配 CSS 选择器的元素。

复制打印的数据

在打印出的对象上点击右键，选择 copy（复制），或选择 Store as global element（将指定元素的引用存储在全局作用域中）

自定义控制台输出样式

%d 或 %i — 整型值
%f — 浮点值
%o — 可展开的 DOM 元素
%O — 可展开的 JS 对象
%c — 使用 CSS 格式化输出

# [14 个你可能不知道的 JavaScript 调试技巧]