2.1 提升用户的开发体验

框架好不好用，很大程度取决于出错时它能不能把问题说清楚：友好的警告信息与可读的调试输出，能大幅降低用户的排错成本。

一、开发体验是框架的衡量标准

• 衡量一个框架是否足够优秀的指标之一，就是看它的开发体验如何。
• 同样的错误，友好的提示能让人几秒定位问题；只有一句「出错了」，用户就只能翻源码。
• 框架设计和开发过程中，提供友好的警告信息至关重要：它不只是「报告错误」，还要说清错在哪、和谁有关。

二、友好的警告信息

以挂载失败为例，警告应把关键上下文（选择器表达式）一并输出：

if (__DEV__ && !res) {
  warn(
    `Failed to mount app: mount target selector "${container}" returned null.`
  )
}

警告只在开发环境保留，生产环境不会为它付出体积代价，机制见 2.2 控制框架代码的体积。

除了错误本身，Vue.js 的警告还会附带组件调用栈，便于定位是哪个组件触发的：

[Vue warn]: Failed to mount app: mount target selector "#app" returned null.
  at <MyComponent>

三、自定义 formatter：让控制台输出可读

Vue.js 在开发环境下调用 initCustomFormatter 初始化自定义 formatter，改变响应式对象在控制台中的展示方式：

• reactive 对象带 Reactive 标记，ref 显示为 Ref<number> 之类，而不是展开一大坨内部结构。
• 该函数只在开发环境调用，且需要浏览器支持自定义 formatter 才有效果。

Chrome 中开启方式：DevTools → 设置（Settings）→ Console → 勾选 Enable custom formatters。

不开这个选项，initCustomFormatter 相当于空跑；它的价值在于「调试响应式数据时一眼看懂」，而不是必备功能。

相关

• 2.2 控制框架代码的体积：友好的警告代码如何在生产环境被完整剔除。