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

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

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

其实不难。

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

而 SAP UI5 框架的日志实现，在 Log.js 文件里，对于 console 提供的这些方法，只传递了消息内容到方法的第一个输入参数去。

这些方法还支持第二个输入参数，能够设置消息打印的格式，比如字体，颜色，渐变效果，阴影效果等等。

因此我们可以使用 Ctrl+Alt+Shift+P，将 SAP UI5 应用切换到调试模式，然后在应用启动的时候，设置一个断点，让启动过程停下来，然后将下列这段代码，粘贴到 Chrome 开发者工具 Console 面板里执行。

这段代码的思路是，我们重新编写了一个增强的 info 和 debug 方法，覆盖了 console 对象里的同名方法。

这些增强的版本，启用了方法的第二个参数，指定了打印消息的彩虹输出效果。

具体在 SAP UI5 框架源代码的什么地方设置断点让启动过程停下来呢？方法有很多。

我选择在 ui5loader-autoconfig.js 里图中这行代码设置断点。

这段代码正是用户在使用组合键 Ctrl+Alt+Shift+P 之后，SAP UI5 框架准备加载调试版本的 sap-ui-core.js 文件的入口所在。

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

本文提到的覆盖 console 标准方法的代码，从下面这个链接获得。