前端Debug日志增强框架源代码分析

Debug是一个NodeJS和浏览器的Log增强工具，功能比较单一，提供彩色的日志信息输出。Github库地址是：https://github.com/visionmedia/debug

使用很简单，官方提供的使用例子如下图所示：

整个源代码代码没多少行。四个文件indx.js, browser.js,node.js和common.js.

Debug应用起来也很简单，统一了浏览器和NodeJS的调用方式。首先通过判断运行环境来检测是加载node.js(后端环境),或者加载browser.js(前端环境)，并通过一些检测，检查下是否支持彩色文本输出，并封装了运行环境自带的log函数，文本上色逻辑，最后传递给common.js做统一封装，加入namespace，做进一步的颜色分组区分，输出到用户代码，让用户代码进行调用。

Debug的核心设计思想，就是利用现有的前后端环境中，支持着色的一些功能，让帮用户自动的加一些文本着色的功能。

后端，就是Nodejs环境，一般最终都会用终端来输出日志，而终端往往是支持颜色输出的，不管是windows还是linux，最少限度的，也是支持基本的一些颜色输出的。Debug利用这一点，把log重新定向到stderr，然后写入一些带颜色符号的文字。最终就有颜色输出了。

前端环境，包含了浏览器和Electron，是利用 console.log的%c格式化功能。也就是在log中加入一些简单的CSS样式来凸显文本颜色，背景色等等。但这个功能不是所有的浏览器支持，相对nodejs而言，需要具体的检测下前端的浏览器情况，来确定是否可以使用console.log的%c格式化功能。

比如这样的代码

"console.log('%c a colorful message', 'background: green; color: white; display: block;');" 就是加入了CSS的log输出。从console结果来看，自然是有彩色信息出现。

所以，整体而言，Debug的一个环境判断和封装的过程如下

判断是否存在process和process.type这两个obj用来识别是那种运行环境。Electron则做了特殊处理。

NodeJS环境：

浏览器环境：

用户调用debug()函数的时候，Debug的内部运行过程如下

结束语

这类功能单一的小框架代码，是很适合用来学习的。

第一代码不多，很好阅读。

第二，支持多环境（node和浏览器），可以看下多环境下，JS代码该怎么设计。

第三，学习封装思维，不同的运行环境，如何统一用户的调用接口，并在内部封装过程中保持结构的统一。

第四，学习扩展性，Debug这种设计模式，如果需要增加一个运行环境，也是相当的简单的，只是按现有的结构，增加一个xxx.js，和node.js和browser.js并处同一层级就可以了。扩展性也是很好的。