Visualization tool for Memory



  • I write a Memory analyzer. Based on Echarts, Memory visualization tool

    0_1619015689937_67c2f638-dc77-45a0-9735-a83c14cbca13-image.png 0_1619016618465_92a692af-96bb-4b56-b5fe-33d781c66452-image.png



  • <html style="height: 100%">
        <head>
            <meta charset="utf-8">
        </head>
        <body style="height: 100%; margin: 0">
    	
    Memory: <input type="text" name="fname" id="jsonStr" />
    <button type="submit" id="btn">分析</button> 使用方法:控制台运行【JSON.stringify(Memory)】然后复制输出到这里点击分析就可以了
    
            <div id="container" style="height: 100%"></div>
            <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
            <script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    
    var option;
    
    let json = "{}"
    
    myChart.showLoading();
    myChart.hideLoading();
    
    let oriData = JSON.parse(json)
    console.log(oriData)
    
    let diskData = []
    
    function getType(obj){
     return "" + Object.prototype.toString.call(obj).replace("[object ","")+"";
    }
    
    		
    function getChildrens(data,name,len){
    	let out = {
              name: name,
    		  value: len,
    		  datas:name+":"+data,
              children: []
    	}
    	let da = JSON.parse(data);
    	let obj = "[" + Object.prototype.toString.call(da).replace("[object ","")+"";
    	//Object.prototype.toString.call(da)
    	//out.name+=obj;
    	if(typeof(da)=='object'){
    		for(let k in da){
    			//if(!da[k])continue;
    			let subJson = JSON.stringify(da[k]);
    			//console.log(k,typeof(subJson),da)
    			let keyLen = obj != "[Array]"? (""+k).length : 0; //  如果是数组不用key
    			keyLen += getType(k) == "Number"?0:2 // 不是数字要加双引号
    			let namet = obj == "[Array]"? "["+k+"]":k // 数组 [ 0 ]
    			if(da[k]==undefined)out.children.push({name:namet,value:keyLen})
    			else out.children.push(getChildrens(subJson,namet,keyLen+(subJson?subJson.length:0)))
    		}
    	}else{
    		out.name+=":"+data
    	}
    	if(out.children.length==0) delete out.children;
    	return out;
    }
    diskData = getChildrens(json,"Memoey",json.length).children
    //console.log(diskData)
    
    function colorMappingChange(value) {
    	var levelOption = getLevelOption(value);
    	chart.setOption({
    		series: [{
    			levels: levelOption
    		}]
    	});
    }
    
    var formatUtil = echarts.format;
    
    
    function getLevelOption() {
    	return [
                {
                    itemStyle: {
                        borderColor: '#777',
                        borderWidth: 0,
                        gapWidth: 1
                    },
                    upperLabel: {
                        show: false
                    }
                },
                {
                    itemStyle: {
                        borderColor: '#555',
                        borderWidth: 5,
                        gapWidth: 1
                    },
                    emphasis: {
                        itemStyle: {
                            borderColor: '#ddd'
                        }
                    }
                },
                {
                    colorSaturation: [0.35, 0.5],
                    itemStyle: {
                        borderWidth: 5,
                        gapWidth: 1,
                        borderColorSaturation: 0.7
                    }
                }
            ].concat(([...Array(12).keys()]).map(e=>{
    			return {
    				colorSaturation: [0.35, 0.5],
    				itemStyle: {
    					borderWidth: 5,
    					gapWidth: 1,
    					borderColorSaturation: 0.75-e*0.05
    				}
    			}
    		}));
    }
    
    console.log(getLevelOption())
    
    
    function transform(datas){
    	if(datas.length>2500/2){
    		datas=datas.substr(0,2500/2-4)+"..."
    	}
    	out = ""
    	for(let i = 0;i<datas.length;i+=50){
    		
    		out+='<div class="tooltip-title">' + datas.substr(i,50) + '</div>'
    	}
    	
    	return out;
    }
    
    
    function update(json){
    
    	diskData = getChildrens(""+json,"Memoey",json.length).children
    	
    	
    	myChart.setOption(option = {
    
    
    		tooltip: {
    			formatter: function (info) {
    				var value = info.value;
    				var datas = info.data.datas;
    				var treePathInfo = info.treePathInfo;
    				var treePath = [];
    				//if(datas.length>50)datas=datas.substr(0,50)+"..."
    				datas=transform(datas)
    
    				for (var i = 1; i < treePathInfo.length; i++) {
    					treePath.push(treePathInfo[i].name);
    				}
    
    				return [
    					'<div class="tooltip-title">' + (formatUtil.encodeHTML(treePath.join('.')).replace(".[","[").replace(".[","[").replace(".[","[").replace(".[","[")) + '</div>',
    					'<div class="tooltip-title">' + datas + '</div>',
    					'Memory Usage: ' + formatUtil.addCommas(value) + ' 字符占用',
    				].join('');
    			}
    		},
    	   // visualMap: [{
    				//type: 'continuous',//连续型
    				//dimension: 2,//对应的数组维度
    				//show: false,//颜色范围选择的小工具不显示
    				//color: ['#1710c0', '#0b9df0', '#00fea8', '#00ff0d', '#f5f811', '#f09a09', '#fe0300'].reverse(),//颜色过渡,可自选
    			  //}],
    		series: [
    			{
    				name: 'Memory',
    				type: 'treemap',
    				visibleMin: 5000,
    				label: {
    					show: true,
    					formatter: '{b}'
    				},
    				upperLabel: {
    					show: true,
    					height: 30,
    				},
    				itemStyle: {
    					borderColor: '#fff'
    				},
    				levels: getLevelOption(),
    				data: diskData
    			}
    		]
    	});
    
    	if (option && typeof option === 'object') {
    		myChart.setOption(option);
    	}
    
    	
    }
    //update(json);
    
    
    document.getElementById('btn').addEventListener('click', function(){
    try{
    update(document.getElementById('jsonStr').value)
    }catch(e){
    	//alert("代码错误,如果不是JSON问题,请联系6g3y")
    	console.log(e)
    }
    try{
    update(document.getElementById('jsonStr').value)
    }catch(e){
    	alert("代码错误,如果不是JSON问题,请联系6g3y")
    	console.log(e)
    	console.log(document.getElementById('jsonStr').value)
    }
    });
            </script>
        </body>
    </html>
    


  • Run JSON.stringify(Memory)

    And Copy all to HTML , Click Button

    I think this tool can check for memory leaks. And analyze which memory can be placed in the global. This will be useful.

    I hope I can share it with everyone, and hope everyone can make some suggestions



  • very good to use. thanks a lot!