Chrome Developer Tools 哪些你不知道的姿势

官网地址：Chrome Developer Tools

不管是前端开发，还是后端开发，Chrome都是不可获取的浏览器(网络)工具

截屏 功能

• 操作步骤：
  1. 首先，要打开开发者工具：command + option + i
  2. 打开命令菜单：command + shift + P (Windows中是：ctrl + shift + P)
  3. 输入：Capture screenshot 截取当前页面

命令	说明
Capture screenshot	截取 当前页面
Capture node screenshot	截取 当前选中节点页面
Capture full size screenshot	截取 整个页面 (类似滚动截屏功能)

开发者工具 调试主题 暗黑主题

• 打开开发者工具，点击 Settings

开发者工具

开发者工具 控制台 Console

• 说明

方法	描述
console.log('')	普通信息
console.info('')	提示信息(左侧会出现蓝色感叹图标)
console.warn('')	警告信息(左侧会出现黄色感叹图标)
console.error('')	错误信息(左侧将会出现红色×图标)
console.count('')	统计执行的次数
console.assert(boolean, 'false的情况描述')	断言，只有Boolean为false时，才会输出信息到控制台
console.time('') / console.timeEnd('')	计时开始 / 计时结束 (组合使用)

• console.info(infoList) 和 console.table(infoList) 的区别

Chrome 开发者工具