在按 F12 出现的 Chrome 开发工具中，在 Elements 选项卡之中，选择页面的某个标签（以 `<p>`为例），右键 → Break on → Attributes modifications。即可为该元素添加断点，当它的属性发生改变时，会自动定位到页面代码中的对应行。

你如此设置之后，点击页面中的文字试一试效果。

这个是最常用的，但它还有一些更多功能：比如参数支持类似 C 语言的字符串替换模式。

console.log("%c不同样式的输出效果", "color: #00fdff; font-size: 2em;");

除了常规的 `log` 之外，还有一些其他已设定好的样式，区别在于图标或者颜色不一样：

console.info("蓝色圆形感叹号图标");

获取 DOM 元素之后，也可以打印输出。

不同的地方在于，`log` 输出这个 DOM 的 HTML 标签，而 `dir` 则会输出这个 DOM 元素的属性列表。

接受一个表达式作为参数，如果参数返回值是 false，则会输出第二个参数中的内容。

console.assert(p.innerHTML.match("她"), "我这儿才没有她这个人");

此前的文章中已经提到了 `console.table()` 方法，可以将数组、对象以表格的形式打印输出，如果只输出其中的某一列，可以加上第二个参数，示例如下。

这个例子中，`group()`/`groupCollapsed()` 与 `groupEnd()` 之间的内容会自动分组，区别在于是否自动展开。效果类似于 Excel 中的分类汇总的简易版。

这里的计数对象仅限于由 `count()` 输出的内容，并非所有 console 中的输出。

用 `time("name")` 和 `timeEnd("name")` 分别控制开始点和结束点，它们两的参数表示当前计时的名称，可以自定义但需要保持相同。所以如果想看异步获取数据花了多场时间，可以这样写：

// Interpolated

// 字符替换

console.log("我的名字叫做 %s ", "log");

// Styled

// 设定输出的样式

const p = document.querySelector('p');

console.log(p);

console.dir(p);

// Testing

console.assert(1 ===1, "（这句发布时删除）");

// clearing

// Grouping together

dogs.forEach(dog => {

console.group();