#优质博文 #前端 #css #javascript #debug
What a diff'rence a semicolon makes

AI 摘要：本文通过作者在调试 JavaScript 代码时遇到的一个由分号 (semicolon) 缺失引发的 TypeError: console.log(...) is not a function 问题，强调了分号在 JS 语法中的关键作用。作者通过简短实例和社区讨论，剖析了分号自动插入机制导致的意外行为，并分享了这一微小失误引发长时间调试的经历，提醒开发者关注代码细节。

1. 问题背景与经历
• 作者在调试时随意插入了 console.log('here') 语句并未加分号，位置恰好出现在 IIFE（立即执行函数）之前。
• 缺少分号导致 JavaScript 引擎将后续的 function 代码当作 console.log 的参数，最终抛出 TypeError。

2. 原因分析
• StackOverflow 社区成员 Sebastian Simon 解释了该错误机制：没有分号时，代码被解析为 console.log()(function(){})，而 console.log() 的返回值是 undefined，无法作为函数调用。
• 提供了最小可复现实例代码来说明问题本质。

3. 社区互动与反思
• 在 Mastodon 社区，Andre 提醒作者 Chris Coyier 的 Web Development Merit Badges（网页开发徽章）。
• 作者幽默地调侃自己，为“因为一个字符小失误花了一小时调试”自豪地领取了徽章，凸显开发中对细节的重视与共鸣。

author Thomas Steiner

Tomayac

What a diff'rence a semicolon makes

The personal blog of Thomas Steiner

#优质博文 #前端 #debug #javascript
专业前端都这么使用console?

AI 摘要：本文主要介绍了 JavaScript 中 console 对象的高级用法，以提高前端开发调试效率。首先，介绍了 console.time() 和 console.timeEnd() 用于计算代码块的执行时间。接着，通过 console.profile() 和 console.profileEnd() 分析复杂逻辑的性能瓶颈。此外， console.count() 用于追踪特定代码块或函数的执行次数，而 console.trace() 帮助开发者理解代码执行流程，通过输出调用堆栈。 console.table() 则以表格形式清晰展示对象或数组数据。 console.group() 和 console.groupEnd() 允许开发者将输出信息进行分组，以便更好地组织和理解。最后，文中还讨论了 console.log() 的进阶用法，如支持自定义CSS样式输出和格式化输出内容，这些占位符的使用能使输出信息更加结构化和清晰。这些高级用法不仅仅限于调试，还可以在性能分析和代码优化中发挥重要作用。

via 微信公众号 JS每日一题

微信公众平台

专业前端都这么使用console?

console对于前端人员来讲肯定都不陌生，相信大部分开发者都会使用console来进行调试，但它能做的绝不