Much needed: well-highlighted JSON log viewer

Asked 18/1, 2014 at 14:32 Answered 19/10, 2021 at 8:47

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 treating logs as first-class data!

However, both Sublime and gedit (at least the versions of them I'm using on Ubuntu, sublime 2 and gedit 3.6.2), poorly highlight json - they use the same color for keys and values, making any log drilling quite painful and really impossible to go through in any remotely humane manner.

Existing chrome extensions for json highlighting aren't helpful here either - they can't handle a collection of json objects and thus fail displaying these log files unless I manually turn them into an array within a synthetic parent object first (thus turning them into a json object). This is tedious in the case of viewing a log file that is still being written to and in general......

Is there any tool that can both swallow json log files as is, and at the same time highlight keys in a different color than values, so that json logs are also friendly to man, not only to machine?? this is a real pain.

Thanks!

Curson answered 18/1, 2014 at 14:32 Comment(1)

why is not possible to choose the best answer? – Chemise 19/6, 2015 at 11:27

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.

JSON with Neon

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.

Oldline answered 19/1, 2014 at 4:9 Comment(6)

Thanks,this looks helpful, but I kind of like my current highlighting scheme for regular source files. Can it apply only to JSON and keep my other doc types highlighted as they already are?? – Curson 19/1, 2014 at 10:47

@matt - yes, you can. The .tmTheme file is pretty organized - just copy the highlighted lines from here (1055-1268) and put them in your own theme. – Oldline 19/1, 2014 at 18:48

Is there a way to use the same colors for each of the nested levels, but still have keys and values have different colors? – Linguistician 22/4, 2014 at 21:9

@Linguistician - I'm not sure what you're asking. Please open an issue and describe exactly what you'd like to see, with a screenshot if possible (you can use Word/OpenOffice with different colored text if you want). – Oldline 26/4, 2014 at 18:46

you can customize this theme here: link – Agrobiology 17/10, 2014 at 16:58

Check out the MonokaiJSON+ Theme I created, I think that is what a lot of people want: goo.gl/39ZBnA – Outrush 21/12, 2014 at 21:0

If you like the default Monkai Theme, check out MonokaiJSON+ Theme! It supports strings, dictionaries, arrays and all of these mixed as well!

https://github.com/ColibriApps/MonokaiJsonPlus

Monokai JSON+ Theme

Outrush answered 21/12, 2014 at 21:10 Comment(6)

Just installed it, Sublime 3, and nothing gets formatted nor highlighted for json documents (Sublime does say "JSON" on the right side of the bottom bar). – Curson 29/12, 2015 at 21:20

Hm, I am using Sublime 3 also 3083... Please try to set the type CMD+Shift+P -> "Set syntax JSON" – Outrush 2/1, 2016 at 10:49

After installing MonokaiJSON+, you need to change the color scheme: Sublime Text > Preferences > Color Scheme > MonokaiJSON+ – Espinoza 3/10, 2017 at 20:3

This isn't working for me. It appears MonokaiJSON+ is incompatible after 3.2? github.com/ColibriApps/MonokaiJsonPlus/issues/7 – Flabbergast 26/7, 2019 at 3:26

It's broken in Sublime 3.2. github.com/ColibriApps/MonokaiJsonPlus/issues/7 You can fix it by forum.sublimetext.com/t/… – Orcinol 23/8, 2019 at 9:39

BROKEN in subl 3 … package is 5 years old. – Electroencephalogram 23/5, 2020 at 19:42

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:

enter image description here

Pirn answered 11/2, 2015 at 23:27 Comment(0)

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.

Placido answered 18/12, 2014 at 9:46 Comment(2)

This highlights anything double quoted, not just the keys – Shaky 19/12, 2014 at 10:54

Actually I you want to highlight all Strings, Dictionaries, Arrays the same at each level, it gets quite complicated, check out MonokaiJSON+ Theme: goo.gl/39ZBnA – Outrush 21/12, 2014 at 21:3

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

Trichology answered 18/7, 2020 at 14:7 Comment(2)

Based on a description looks quite awesome, I should try that! – Preoccupy 18/7, 2020 at 14:42

Really appreciated if able to get feedback – Trichology 19/7, 2020 at 15:44

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>

Baranowski answered 18/1, 2014 at 20:59 Comment(2)

This works but only at the top level. Nested keys/values all get the same color. – Linguistician 22/4, 2014 at 17:34

Thanks for your answer, actually It is not so simple, that's why I created this new MonokaiJson+ Theme: goo.gl/39ZBnA – Outrush 21/12, 2014 at 21:1

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.

Caleb answered 27/9, 2019 at 19:50 Comment(1)

Linked tool is offline and no other information is provided to help track it down. – Reheat 20/8, 2023 at 6:46

If you want to visualize winston json log at console you can use munia-pretty-json

Your json data (app-log.json)

{"time":"2021-06-09T02:50:22Z","level":"info","message":"Log for pretty JSON","module":"init","hostip":"192.168.0.138","pid":123}
{"time":"2021-06-09T03:27:43Z","level":"warn","message":"Here is warning message","module":"send-message","hostip":"192.168.0.138","pid":123}

Run the command:

munia-pretty-json app-log.json

Here is readable output on console:

You can format the output with the template. The default template is '{time} {level -c} {message}'

Using template:

munia-pretty-json -t '{module -c} - {level} - {message}' app-log.json

Output:

Tilburg answered 19/10, 2021 at 8:47 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags