很多時候，我們需要查看日志的實(shí)時輸出，這個時候往往只能選擇控制臺。我這里的日志框架是serilog，它有一個好處是控制臺輸出時可以高亮的形式顯示其參數(shù)結(jié)構(gòu)信息，如下圖所示

但也存在許多不方便的地方：

• 清屏不方便

• 回看歷史不方便

• 日志過濾不方便

• 消息不便復(fù)制出來保持

• 復(fù)雜的消息不便查看

因此我也一直在找一個更理想的日志查看器，找了許多現(xiàn)成的日志查看器，都不甚理想。要是自己寫一個的話，結(jié)構(gòu)化日志的輸出也是比較麻煩的，工作量太大。

最后將目標(biāo)選定在了Chrome控制臺上，找了一下chrome 控制臺的語法，發(fā)現(xiàn)其可以高亮顯示結(jié)構(gòu)化數(shù)據(jù)。

并且還能展開，查看十分方便

另外，chrome控制臺還自帶許多特性：

• 支持清屏

• 支持顯示時間（不需要日志信息中攜帶）

• 支持類似日志自動分組

在輸出樣式上也是異常強(qiáng)大

• 支持不同日志級別的樣式

• 支持日志分組

• 支持對象結(jié)構(gòu)化輸出

• 支持自定義樣式

• 支持輸出為表格

簡直是日志輸出利器，因此就打算使用Chrome console作為實(shí)時日志查看器了。

架構(gòu)

既然打算將chrome console作為日志輸出，就得考慮實(shí)現(xiàn)方式了，一個簡單的架構(gòu)如下：

• 程序輸出日志時，將日志序列化為json格式，通過websocket發(fā)送到日志服務(wù)器（web服務(wù)器）

• 查看日志時，通過瀏覽器打開日志服務(wù)器提供日志的查看頁面。

• 客戶端打開頁面時，通過js腳本訂閱日志服務(wù)器的日志，并解析日志，調(diào)用想用的指令輸出到控制臺

由于有了日志服務(wù)器，日志的輸出成了訂閱式的了，也可以非常方便的做日志過濾輸出了。

序列化日志

要實(shí)現(xiàn)這個日志框架，第一步就是要將日志信息序列化成json格式，以Serilog為例，由于Serilog框架本身就提供了日志的結(jié)構(gòu)化信息，實(shí)現(xiàn)起來是非常方便的。參照serilog文檔自定義一個Sink即可，如下是一個簡單的實(shí)現(xiàn)

public class JsonSink : ILogEventSink
{
    private readonly IFormatProvider _formatProvider;

    public JsonSink(IFormatProvider formatProvider)
    {
        _formatProvider = formatProvider;
    }

    public void Emit(LogEvent logEvent)
    {
        var tokens   = logEvent.MessageTemplate.Tokens.Select(getFormat);
        var template = string.Join("", tokens);

        var paras = logEvent.Properties.Values.Select(getPara).ToArray();

        var level = logEvent.Level.ToString();
        var log = new
        {
            level,
            template,
            paras,
        };

        var text = JsonConvert.SerializeObject(log, Formatting.Indented);
        File.WriteAllText(@"r:\log.json", text);

        string getFormat(object token)
        {
            if (token is PropertyToken p)
                return "%o";
            else
                return token.ToString();
        }

        object getPara(LogEventPropertyValue v)
        {
            return JsonConvert.DeserializeObject(v.ToString());
        }
    }
}

這里需要實(shí)現(xiàn)的是Emit函數(shù)，可以通過LogEvent對象獲取到結(jié)構(gòu)化的信息，這里需要將它序列化成一個json對象，從而能被chrome js腳本解析。

一般來說，對于一個結(jié)構(gòu)化的日志，主要需要包括如下幾個參數(shù)： 告警級別、時間、消息模板、參數(shù)。這里簡化起見，就沒有加入時間了。另外，為了方便chrome console輸出，將其模板轉(zhuǎn)換了一下，轉(zhuǎn)成了chrome console可以直接支持的消息模板。

需要注意的是，由于chrome console的輸出模板和seriallog的消息模板不完全一致，我這里的算法還比較簡陋，喪失了參數(shù)的名稱信息，因此對輸入還是有些限制的，那就是：

• 參數(shù)只能使用一次

• 參數(shù)的順序必須和模板的順序一致

由于大部分的日志是遵循這個限制的，以后再優(yōu)化算法。對于如下日志記錄。

var position  = new { Latitude = 25, Longitude = 134 };
var elapsedMs = 34;

Log.Information("Processed {@Position} in {Elapsed} ms.", position, elapsedMs);

輸出的json如下（這里我是將其保存到文件了，實(shí)際實(shí)現(xiàn)應(yīng)該是發(fā)送到日志服務(wù)器）：

{
    "level": "Information",
    "template": "Processed %o in %o ms.",
    "paras": [
        {
            "Latitude": 25,
            "Longitude": 134
        },
        34
    ]
}

Chrome中輸出

由于篇幅所限，這里不考慮數(shù)據(jù)如何發(fā)布和訂閱的，僅僅介紹下chrome console中輸出相關(guān)功能。

在chrome中輸出需要靠js來實(shí)現(xiàn)，一個簡單的實(shí)現(xiàn)如下：

var log = {
    "level": "Information",
    "template": "Processed %o in %o ms.",
    "paras": [{
        "Latitude": 25,
        "Longitude": 134
    }, 34]
};

var fn = console.log;
var logPara = [log.template].concat(log.paras);

fn.apply(this, logPara); 

這里日志信息中攜帶了級別、消息模板、參數(shù)三部分信息，需要和控制臺api相對應(yīng)。主要的難點(diǎn)在于由于參數(shù)是動態(tài)的，需要js函數(shù)動態(tài)參數(shù)的調(diào)用。代碼比較簡單，除掉上面的日志消息，就三行代碼，就不多介紹了。