- 当前位置：首页 >域名 >JavaScript console.log() 小技巧
JavaScript console.log() 小技巧
发布时间：2025-11-05 00:25:05 来源：码上建站 作者：系统运维
本文转载自微信公众号“前端先锋”（jingchengyideng）。小技
每个前端都会用 JavaScript 控制台打日志或调试。小技但是小技 console 对象比 console.log() 有更多的东西。
计算属性名称
ES6 的小技计算属性名称特别有用，因为它们可以通过在变量周围添加一对大括号来帮你识别的小技变量。
const x = 1,小技 y = 2, z = 3; console.log({x, y, z}); // {x: 1, y: 2, z: 3}console.trace()
console.trac() 与 console.log() 完全相同，但它也会输出整个栈跟踪，小技能让你确切地知道到底发生了什么。小技
const outer = () => { const inner = () => console.trace(Hello); inner(); }; outer(); /* Hello inner @ VM207:3 outer @ VM207:5 (anonymous) @ VM228:1 */console.group()
console.group() 可以把日志分组为可折叠的小技结构，服务器托管当有多个日志时特别有用。小技
console.group(Outer); // 创建一个名为 Outer 的小技组 console.log(Hello); // 在 Outer 组中输出日志 console.groupCollapsed(Inner); // 创建一个名为 Inner 的组，折叠状态 console.log(Hellooooo); // 在 Inner 组中输出日志 console.groupEnd(); // 结束当前组,小技 Inner console.groupEnd(); // 结束当前组, Outer console.log(Hi); // 在组外输出日志日志级别
除了 console.log() 之外，还有其他一些日志记录级别，小技例如 [console.debug()](https://developer.mozilla.org/en-US/docs/Web/API/Console /debug)、小技 console.info()、小技 console.warn()和 console.error()。
console.debug(Debug message); console.info(Useful information); console.warn(This is a warning); console.error(Something went wrong!);console.assert()
console.assert() 提供了一种简便的方法，仅在断言失败时将某些内容记录为错误(例如当第一个参数为 false 时)，否则完全跳过日志。云服务器提供商
const value = 10; console.assert(value === 10, Value is not 10!); // 不输出日志 console.assert(value === 20, Value is not 20!); // 输出日志："Value is not 20!"console.count()
可以用 console.count() 来统计一段代码执行了多少次。
Array.from({ length: 4 }).forEach( () => console.count(items) // 名为 items 的计数器 ); /* items: 1 items: 2 items: 3 items: 4 */ console.countReset(items); // 重置计数器console.time()
console.time() 提供了一种快速检查代码性能的方法，但是由于精度较低，不可用于真正的基准测试。
console.time(slow comp); console.timeLog(slow comp); console.timeEnd(slow comp);CSS
最后一个，还可以在 console.log() 中用 %c 字符串替换表达式将 CSS 应用于日志的各个部分。
console.log( CSS can make %cyour console logs%c %cawesome%c!, color: #fff; background: #1e90ff; padding: 4px, , color: #f00; font-weight: bold, );企商汇服务器租用亿华云源码下载IT技术网IT资讯网香港云服务器益华科技源码库益强IT技术网亿华科技技术快报益强智囊团益华科技益强资讯优选运维纵横全栈开发思维库益强编程堂益强科技亿华云计算亿华智慧云亿华灵动云站无忧益强数据堂科技前瞻亿华云码力社IT资讯网益强编程舍极客码头创站工坊益华科技益强前沿资讯益华IT技术论坛益强科技编程之道多维IT资讯亿华智造极客编程
- Copyright © 2025 Powered by JavaScript console.log() 小技巧,码上建站 滇ICP备2023006006号-47sitemap