Much needed: well-highlighted JSON log viewer

Question

Using winston for node.js logging, I get json log files. A log file in this vein is simply a sequence of (newline delimited) json objects. This is great for log querying and tre

Answer 1

I modified original twilight theme to add rules for prettier json. It's a modified version of @MattDMo 's answer, and has the similar different key colors for different levels. You can get it from here

https://github.com/shaunakv1/twilight-tmTheme-better-json-highlight

Here's how JSON looks:

Answer 2

Check out the Neon Color Scheme, available via Package Control and Github for Sublime Text. Keys and values are highlighted in different colors, and there are different key colors for different levels.

Full disclosure: I'm the maintainer for this project, but I really think it'll help you out - it certainly helps me when working with multi-leveled JSON files like the one shown above.

Answer 3

You'll find that https://jsonlog.io/ is a solution that provides great visibility into your application's structured data IO. I'm the developer behind this, but it's a free resource I built to solve this exact issue in my own workflow.

Here's an example of one of the log formats that might help:

JSONLog Pretty Log View

And since it's a live logging-type platform the data displays live as they are sent from your application. It's a great way to get insight into your live/dev application IO.

Answer 4

looking at a json file in SublimeText, I realised keys and values have different scopes. so it should be very trivial to customize your color scheme and add different color for keys and values.

keys have scope of source.json meta.structure.dictionary.json string.quoted.double.json while values have source.json meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json

so if you add this snippet at the bottom of you color scheme rules you should see them in different colors:

    <dict>
        <key>name</key>
        <string>Json Keys</string>
        <key>scope</key>
        <string>source.json meta.structure.dictionary.json string.quoted.double.json</string>
        <key>settings</key>
        <dict>
            <key>foreground</key>
            <string>#FF0000</string> <!-- your keys color -->
        </dict>
    </dict>
    <dict>
        <key>name</key>
        <string>JSON Values</string>
        <key>scope</key>
        <string>source.json meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json</string>
        <key>settings</key>
        <dict>
            <key>foreground</key>
            <string>#00FF00</string> <!-- your custom color -->
        </dict>
    </dict>

Answer 5

Mixing Allen Bargui's and MattDMo's answers, you can change the color of the nested keys/values by simply adding more dicts specifying the depth of the code by adding a meta after the source.json word.

Locate the theme file by going to Preferences > Browse Packages and then inside the Color Scheme - Default folder. Edit it by adding these lines:

<dict>
    <key>name</key>
    <string>Json Keys - 1 deep</string>
    <key>scope</key>
    <string>source.json meta meta.structure.dictionary.json string.quoted.double.json</string>
    <key>settings</key>
    <dict>
        <key>foreground</key>
        <string>#FF0000</string> <!-- your keys color -->
    </dict>
</dict>

<dict>
    <key>name</key>
    <string>JSON Values - 1 deep</string>
    <key>scope</key>
    <string>source.json meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json</string>
    <key>settings</key>
    <dict>
        <key>foreground</key>
        <string>#00FF00</string> <!-- your custom color -->
    </dict>
</dict>

<dict>
    <key>name</key>
    <string>Json Keys</string>
    <key>scope</key>
    <string>source.json meta.structure.dictionary.json string.quoted.double.json</string>
    <key>settings</key>
    <dict>
        <key>foreground</key>
        <string>#FF0000</string> <!-- your keys color -->
    </dict>
</dict>

<dict>
    <key>name</key>
    <string>JSON Values</string>
    <key>scope</key>
    <string>source.json meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json</string>
    <key>settings</key>
    <dict>
        <key>foreground</key>
        <string>#00FF00</string> <!-- your custom color -->
    </dict>
</dict>

It's important to add the deeper ones BEFORE the rest, as Sublime will select the first matching occurrence. I guessed adding more meta would work for further depths but it actually didn't... But it did the trick for depth 1 at least.

Answer 6

I developed a command line tool to view json log (see https://github.com/qiangyt/jog). It is just like 'tail -f log-file' but it's for json log.

It's written using GO so it's cross-platform. The binaries are downloadable via https://github.com/qiangyt/jog/releases.

Not document how to configure it very well, but it works properly by default,and I'm happy to get issue report or new feature request