乱花渐欲迷人眼 - 让 Open UI5 应用的日志输出不再素面朝天

我们平时调试 Open UI5 应用时，Chrome 开发者工具 Console 面板输出的日志，看起来很朴素。

有没有想过，让这些枯燥的日志，用五彩缤纷的方式打印出来？比如看图2的效果。

其实不难。Open UI5 应用的日志内容，分为不同的 Severity，按照严重程度从高到低，依次是：FATAL，ERROR，WARNING，INFO，DEBUG 和 TRACE，分别使用 console 的 error，warn，info，log，debug 和 trace 方法来打印输出。

而 Open UI5 框架的日志实现，在 Log.js 文件里，对于 console 提供的这些方法，只传递了消息内容到方法的第一个输入参数去。而这些方法还支持第二个输入参数，能够设置消息打印的格式，比如字体，颜色，渐变效果，阴影效果等等。

因此我们可以使用 Ctrl+Alt+Shift+P，将 Open UI5 应用切换到调试模式，然后在应用启动的时候，设置一个断点，让启动过程停下来，然后将下列这段代码，粘贴到 Chrome 开发者工具 Console 面板里执行。这段代码的思路是，我们重新编写了一个增强的 info 和 debug 方法，覆盖了 console 对象里的同名方法。这些增强的版本，启用了方法的第二个参数，指定了打印消息的彩虹输出效果。

具体在 Open UI5 框架源代码的什么地方设置断点让启动过程停下来呢？方法有很多。我选择在 ui5loader-autoconfig.js 里图中这行代码设置断点。这段代码正是用户在使用组合键 Ctrl+Alt+Shift+P 之后，Open UI5 框架准备加载调试版本的 Open-ui-core.js 文件的入口所在。

console 对象方法第二个参数看起来复杂，实际就是一些 css 规则，用 Angular 和 Vue 做前端开发的朋友们应该不会陌生。

本文提到的覆盖 console 标准方法的代码如下：

let _info = console.info;
console.info = function() {
_info.call(console, '%c' + [].slice.call(arguments).join(' '), "background: rgba(252,234,187,1);background: -moz-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%,rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: -webkit-gradient(left top, right top, color-stop(0%, rgba(252,234,187,1)), color-stop(12%, rgba(175,250,77,1)), color-stop(28%, rgba(0,247,49,1)), color-stop(39%, rgba(0,210,247,1)), color-stop(51%, rgba(0,189,247,1)), color-stop(64%, rgba(133,108,217,1)), color-stop(78%, rgba(177,0,247,1)), color-stop(87%, rgba(247,0,189,1)), color-stop(100%, rgba(245,22,52,1)));background: -webkit-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: -o-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: -ms-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: linear-gradient(to right, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#f51634', GradientType=1 );font-size:5em'");
};

let _debug = console.debug;
console.debug = function() {
_info.call(console, '%c' + [].slice.call(arguments).join(' '), "background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em'");
};