一、痛点

日常开发中，在F12控制台里查看大段JSON实在憋屈。找了个在线格式化JSON的网站，打开一看全是广告，可操作区域太小，无法大快朵颐

二、尝试解决

准备把他代码扒下来，去掉广告，仅保留编辑器部分。实际可太难了，他们代码都混淆了，可读性没有，更别说改了

1万多行压缩代码，实在是搞不动

三、柳暗花明

既然国内找不到，就用英文搜下：Format JSON Online，发现靠前的网站用的都是 JSONEditor 这个编辑器

开源免费、API友好。且界面简洁、美观，功能还很强大。画个页面，把编辑器嵌进来试试

<!DOCTYPE html>
<html lang="en">

<head>
    <title>test page</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <link rel="stylesheet" type="text/css" href="dist/jsoneditor.min.css">
    <script type="text/javascript" src="dist/jsoneditor.min.js"></script>
    <style type="text/css">
        #container {
            width: 500px;
            height: 600px;
        }
    </style>
</head>

<body>
    <div id="container"></div>

    <script type="text/javascript">
        var container = document.getElementById('container');
        var options = {
            mode: 'code',
            onError: function (err) {
                alert(err.toString());
            }
        };
        var editor = new JSONEditor(container, options);
    </script>
</body>

</html>

看看效果

这个编辑器自带：JSON格式化、压缩和转义功能，无需自己实现。看右边还有空间，就加了几个功能：清除、复制、粘贴、下载。并且多new了几个编辑器

最多支持几个编辑器同时使用，是根据显示器分辨率来的

function getMaxBoxCount() {
    var screenWidth = $(window).width();

    var maxBoxCount = 0;
    if (screenWidth < 1024) {
        maxBoxCount = 1;
    }
    else if (screenWidth >= 1024 && screenWidth < 1920) {
        maxBoxCount = 2;
    }
    else if (screenWidth >= 1920 && screenWidth < 2560) {//1080p
        maxBoxCount = 3;
    }
    else if (screenWidth >= 2560 && screenWidth < 3840) {//2k
        maxBoxCount = 4;
    }
    else if (screenWidth >= 3840 && screenWidth < 5120) {//4k
        maxBoxCount = 5;
    }
    else if (screenWidth >= 5120) {//5k
        maxBoxCount = 6;
    }
    return maxBoxCount;
}