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

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

• 清屏不方便

• 回看歷史不方便

• 日志過(guò)濾不方便

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

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

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

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

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

另外，chrome控制臺(tái)還自帶許多特性：

• 支持清屏

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

• 支持類似日志自動(dòng)分組

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

• 支持不同日志級(jí)別的樣式

• 支持日志分組

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

• 支持自定義樣式

• 支持輸出為表格

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

架構(gòu)

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

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

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

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

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

序列化日志

要實(shí)現(xiàn)這個(gè)日志框架，第一步就是要將日志信息序列化成json格式，以Serilog為例，由于Serilog框架本身就提供了日志的結(jié)構(gòu)化信息，實(shí)現(xiàn)起來(lái)是非常方便的。參照serilog文檔自定義一個(gè)Sink即可，如下是一個(gè)簡(jiǎn)單的實(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ù)，可以通過(guò)LogEvent對(duì)象獲取到結(jié)構(gòu)化的信息，這里需要將它序列化成一個(gè)json對(duì)象，從而能被chrome js腳本解析。

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

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

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

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

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

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來(lái)實(shí)現(xiàn)，一個(gè)簡(jiǎ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); 

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

到此這篇關(guān)于使用chrome控制臺(tái)查看.Net日志的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。