12种 console 相关的方法，帮你快速提高调试效率！（建议收藏）

错误：

console.error(‘I’m sorry Dave, I’m afraid I can’t do that’);

或不太重要的调试信息:

console.debug(‘nothing to see here - please move along’);

console.table()可以以更友好的格式输出对象的值。

const obj = {

propA: 1,

propB: 2,

propC: 3

};

console.table( obj );

或对象的数组:

const arr2 = [

{ a: 1, b: 2, c: 3 },

{ a: 4, b: 5, c: 6 },

{ a: 7, b: 8, c: 9 }

];

console.table( arr2 );

其他选项包括:

• console.dir( obj ) 显示一个 JS 对象的交互式属性列表

• console.dirxml( element ) 显示指定的HTML或XML节点的子代元素的互动树。

• console.clear() 清除控制台之前的所有信息。

3.过滤日志消息

浏览器以适当的颜色显示日志信息，但也可以进行过滤，以显示特定的类型。点击控制台窗格左上方的图标，就可以打开Chrome的侧边栏。

注意，console.debug()信息只有在查看 verbose 选项时才会显示。

4. 使用 printf-type 的信息

所有的日志类型都可以使用c 语言风格的printf消息格式，该格式定义了一个模板，其中包含一个变量被替换的%指示器。例如

console.log(

‘The answer to %s is %d.’,

‘life, the universe and everything’,

42

);

// The answer to life, the universe and everything is 42.

带样式的风格

console.log(

‘%cOK, things are really bad now!’,

`

font-size: 2em;

padding: 0.5em 2em;

margin: 1em 0;

color: yellow;

background-color: red;

border-radius: 50%;

`

);

控制台中的结果:

6. 使用类似测试的断言

类似于测试的console.assert()命令可以用来在条件失败时输出一个信息。可以用一个条件和一个或多个对象来定义断言，当该条件失败时输出，例如

console.assert(

life === 42,

‘life is expected to be’,

42,

‘but is set to’,

life

);

另外，也可以使用一个信息和替换值。

console.assert(

life === 42,

‘life is expected to be %s but is set to %s’,

42,

life

);

当条件失败时，这两个选项都会显示一个断言错误。

7. 运行堆栈跟踪

可以使用 console.trace() 输出构成当前执行点的所有函数调用的日志。

function callMeTwo() {

console.trace();

return true;

}

function callMeOne() {

return callMeTwo();

}

const r = callMeOne();

跟踪显示每次调用是哪一行，并且可以在控制台窗格中折叠或展开：

8. 组日志消息

打印日志时，可以在开头使用console.group( label ) 和结尾使用 console.groupEnd() 将日志消息分成命名组。 消息组可以嵌套和折叠或展开（console.groupCollapsed( label ) 最初显示处于折叠状态的组）：

// start log group

console.group(‘iloop’);

for (let i = 3; i > 0; i–) {

console.log(i);

// start collapsed log group

console.groupCollapsed(‘jloop’);

for (let j = 97; j < 100; j++) {

console.log(j);

}

// end log group (jloop)

console.groupEnd();

}

// end log group (iloop)

console.groupEnd();

9. 使用定时器

HTTP

• HTTP 报文结构是怎样的？

• HTTP有哪些请求方法？

• GET 和 POST 有什么区别？

• 如何理解 URI？

• 如何理解 HTTP 状态码？

• 简要概括一下 HTTP 的特点？HTTP 有哪些缺点？

• 对 Accept 系列字段了解多少？

• 对于定长和不定长的数据，HTTP 是怎么传输的？

• HTTP 如何处理大文件的传输？

• HTTP 中如何处理表单数据的提交？

• HTTP1.1 如何解决 HTTP 的队头阻塞问题？

• 对 Cookie 了解多少？

• 如何理解 HTTP 代理？

• 如何理解 HTTP 缓存及缓存代理？

• 为什么产生代理缓存？

• 源服务器的缓存控制

• 客户端的缓存控制

• 什么是跨域？浏览器如何拦截响应？如何解决？