2021-10-26

前高频端面试题合集17-浏览器调试工具

1.打开方式

如果要使用DOM或CSS，请右键单击页面上的元素，然后选择“检查”以跳到“元素”面板。或按Command + Option + C（Mac）或Control + Shift + C（Windows，Linux，Chrome操作系统）。
当您想查看记录的消息或运行JavaScript时，请按Command + Option + J（Mac）或Control + Shift + J（Windows，Linux，Chrome OS）直接跳至“控制台”面板。

2. 调试样式

1. 选择元素

2. 样式来源

3. 查看当前作用在元素上的样式且按照字母顺序进行排序

4. 查看伪类样式

5. 查看重绘和回流

6. 查看css样式利用率

7. 给元素添加类

8. 动画调试

3. js调试

1. 打印

```js
console.log(‘log’);
1
2
3

* ```js
console.dir(document.head);

```js
console.table([
{

first: 'René',
last: 'Magritte',

},
{

first: 'Chaim',
last: 'Soutine',
birthday: '18930113',

},
{

first: 'Henri',
last: 'Matisse',

}
]);

1
2
3


* ```js
  console.clear();

```js
console.dirxml(document);

1
2
3


* ```js
  console.error("I'm sorry, Dave. I'm afraid I can't do that.");

```js
const label = ‘Adolescent Irradiated Espionage Tortoises’;
console.group(label);
console.info(‘Leo’);
console.info(‘Mike’);
console.info(‘Don’);
console.info(‘Raph’);
console.groupEnd(label);
1
2
3
4
5
6
7

* ```js
console.time();
for (var i = 0; i < 100000; i++) {
let square = i ** 2;
}
console.timeEnd();

console.warn('warn');
1
2
3
4
5

### 2. 实用API

* `$_` 返回最近求值的表达式的值。


1+2
$_  // 3
['lucy','yellow','green']

["lucy", "yellow", "green"]

$_.length
3