如何在Firefox控制台中显示Firebase的DocumentReference

好问题！我之前调试Firebase项目时也碰到过这个差异——Chrome控制台会贴心地把DocumentReference对象明确标注出来，还展示完整结构，但Firefox默认只显示平淡的Object，确实有点影响调试效率。下面分享几个实用的解决办法：

方法1：调用对象内置的toString()方法 #

DocumentReference本身自带了toString()方法，会返回完整的文档引用路径，在Firefox里打印这个结果能直接明确它的类型和指向：

console.log(firestore.doc('your-collection/your-document').toString());

输出会类似：DocumentReference(your-collection/your-document)，一眼就能看出这是个文档引用实例。

方法2：用Firefox控制台格式化指令强制展示完整结构 #

Firefox控制台支持格式化占位符，用%O可以强制展开对象的完整原型链和属性，这样就能看到它的DocumentReference原型标识了：

console.log("%O", firestore.doc('your-collection/your-document'));

执行后控制台会展开对象，你能在原型链里找到DocumentReference的标注，和Chrome显示的结构基本一致。

方法3：改用console.dir()打印对象 #

console.dir()专门用于展示对象的详细属性结构，在Firefox里它会比普通的console.log()更深入地解析DocumentReference的内部信息，包括原型类型：

console.dir(firestore.doc('your-collection/your-document'));

为什么会有这个差异？ #

Chrome的V8引擎控制台对自定义类实例的识别和展示更友好，会直接标注对象的构造函数名称（也就是DocumentReference）；而Firefox的SpiderMonkey引擎默认只显示顶级的Object，但通过上面的方法可以让它输出更有用的调试信息。

补充对比截图：

• Firefox控制台效果：
• Chrome控制台效果：

内容的提问来源于stack exchange，提问作者user10586830