Skip to content

GitLab

  • Projects
  • Groups
  • Snippets
  • Help
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
T treasure
  • Project overview
    • Project overview
    • Details
    • Activity
    • Releases
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 12
    • Issues 12
    • List
    • Boards
    • Labels
    • Service Desk
    • Milestones
  • Merge requests 0
    • Merge requests 0
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Operations
    • Operations
    • Incidents
    • Environments
  • Packages & Registries
    • Packages & Registries
    • Container Registry
  • Analytics
    • Analytics
    • CI/CD
    • Repository
    • Value Stream
  • Wiki
    • Wiki
  • External wiki
    • External wiki
  • Snippets
    • Snippets
  • Members
    • Members
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • FE
  • treasure
  • Issues
  • #187

Closed
Open
Created Sep 25, 2023 by hanxiaolong@hanxiaolong

console 的常见用法

1.debug 打印调试信息,custom levels 需要勾选 Verbose console.debug('debug'); image

2.log 普通打印 console.log('log'); image

3.info 信息,不同的浏览器 info 的样式可能不同的 console.info('info');

谷歌 image

Safari image

4.table 表格 console.table([ { value: 1, label: 'debug' }, { value: 2, label: 'log' }, { value: 3, label: 'info' }, ]); image

5.group label 作为组名,group 为分组开始,groupEnd 为分组结束,以 groupCollapsed 做分组开始,默认为折叠状态 const label = 'Package elephant'; console.group(label); // console.groupCollapsed(label); console.log('Package1'); console.log('Package2'); console.log('Package3'); console.log('Package4'); console.groupEnd(label); image image

6.dir 对象结构, 方便查看函数/对象的结构 console.dir(document.body); image

7.计时,方便统计函数执行的时间 console.time('loop'); const start = Date.now(); while (Date.now() - start < 2000) {} console.timeEnd('loop');

image

8.计数,可以统计函数的执行次数 const start1 = Date.now(); while (Date.now() - start1 < 20) { console.count('loop'); } console.countReset('loop');

image

9.堆栈, 查找函数的调用层次 function b() { console.trace(); } function a() { b(); } a(); image

10.断言,可以用于简单的测试,错误时会输入信息,正确时不会有输出 function sum(a, b) { return a * b; } console.assert(sum(1, 2) === 3); image

11.打印警告信息 console.warn('warn'); image

12.打印错误信息 console.error('error'); image

13.clear 清空消息 console.log(1); console.clear(); console.log(2); image

14.自定义样式消息, 打印内容以 ’%c‘ 开始 const styles = padding: 5px; background-color: antiquewhite; color: white; font-size: 14px; ; console.log('%cstyle', styles);

image

Edited Sep 25, 2023 by hanxiaolong
Assignee
Assign to
None
Milestone
None
Assign milestone
Time tracking