How to prettify javascript source code

Question

I have this code, and want to make it easier to read.

class Cell {
        constructor(_0x38c3bd, _0x1e05bc, _0x40273c, _0x44d2a4, _0x2f0227, _0x595ff5, _0x1467f8) {
            this['x'] = _0x38c3bd;
            this['y'] = _0x1e05bc;
            this['r'] = _0x40273c;
            this['skin'] = _0x2f0227;
            this['nick'] = _0x595ff5;
            this['color'] = _0x1467f8;
            this['type'] = _0x44d2a4;
            this['ownCell'] = ![];
            this['animTimeStamp'] = Date['now']();
            this['xA'] = _0x38c3bd;
            this['yA'] = _0x1e05bc;
            this['rA'] = _0x40273c;
            this['nickCache'] = null;
            this['massCache'] = null;
            if (_0x595ff5 && _0x595ff5['length']) this['setNickCache']();
        }['setNickCache']() {
            let _0x238c10 = _0x48eb3d['nickCache']['get'](this['nick']);
            if (_0x238c10 === undefined) {
                _0x48eb3d['nickCache']['set'](this['nick'], {
                    'data': [null, null, null, null, null, null, null],
                    'timeStamp': Date['now']()
                });
            }
            this['nickCache'] = _0x48eb3d['nickCache']['get'](this['nick']);
        }['cacheName']() {
            let _0x227d13 = ~~(this['rA'] / 0xfa);
            if (this['nickCache']['data'][_0x227d13] === null) {
                let _0x433291 = _0x57e7c0['createElement']('canvas');
                let _0x1dbbe2 = _0x433291['getContext']('2d');
                let _0x3d0e39 = _0x227d13 * 0xfa + 0x7d;
                let _0x2ed968 = ~~(_0x3d0e39 / 0x6);
                _0x433291['width'] = _0x3d0e39;
                _0x433291['height'] = _0x2ed968;
                _0x1dbbe2['textAlign'] = 'center';
                _0x1dbbe2['textBaseline'] = 'middle';
                _0x1dbbe2['fillStyle'] = '#fff';
                _0x1dbbe2['font'] = '600 ' + _0x2ed968 + 'px ubuntu';
                _0x1dbbe2['fillText'](this['nick'], _0x3d0e39 / 0x2, _0x2ed968 / 0x2);
                this['nickCache']['data'][_0x227d13] = _0x433291;
            }
            this['nickCache']['timeStamp'] = Date['now']();
        }['cacheMass']() {
            let _0x599558 = ~~(this['r'] * this['r'] / 0x64);
            if (_0x599558 > 0x3e7) _0x599558 = ~~(_0x599558 / 0x64) / 0xa + 'k';
            if (_0x48eb3d['massCache']['get'](_0x599558) === undefined) {
                _0x48eb3d['massCache']['set'](_0x599558, {
                    'data': _0x57e7c0['createElement']('canvas'),
                    'timeStamp': Date['now']()
                });
                this['massCache'] = _0x48eb3d['massCache']['get'](_0x599558);
                let _0x353992 = this['massCache']['data'];
                let _0x2e7830 = _0x353992['getContext']('2d');
                let _0x183f3e = this['r'] * 0x2;
                let _0x32f4d7 = ~~(_0x183f3e / 0x6);
                _0x353992['width'] = _0x183f3e;
                _0x353992['height'] = _0x32f4d7;
                _0x2e7830['textAlign'] = 'center';
                _0x2e7830['textBaseline'] = 'middle';
                _0x2e7830['fillStyle'] = '#fff';
                _0x2e7830['font'] = '600 ' + _0x32f4d7 + 'px ubuntu';
                _0x2e7830['fillText'](_0x599558, _0x183f3e / 0x2, _0x32f4d7 / 0x2);
            } else if (this['massCache'] === null) {
                this['massCache'] = _0x48eb3d['massCache']['get'](_0x599558);
            }
            this['massCache']['timeStamp'] = Date['now']();
        }
    }

How do I deobfuscate the code above? I tried using jsbeautifier & jsnice, but it will just show errors listed below:

Line 1: Parse error. missing ; before statement
Line 2: Parse error. missing ; before statement
Line 18: Parse error. syntax error
Line 27: Parse error. syntax error
Line 30: Parse error. missing ; before statement
Line 31: Parse error. missing ; before statement
Line 32: Parse error. missing ; before statement
Line 33: Parse error. missing ; before statement
Line 44: Parse error. syntax error
Line 53: Parse error. missing ; before statement
Line 54: Parse error. missing ; before statement
Line 55: Parse error. missing ; before statement
Line 56: Parse error. missing ; before statement
Line 68: Parse error. syntax error

I would want to rename all the variables _0x38c3bd , _0x1e05bc , etc. at least. And I have 1000s of lines of code like this.

Answer 1

If you are okay with just using find & replace, you could try this online tool for multiple find & replaces (otherwise you can just manually do it 7 times in your text editor of choice).

You can see a sample here where I replaced 3 variables.

Answer 2

class Cell {
    constructor(x, y, r, type, skin, nick, color) {
        this.x = x;
        this.y = y;
        this.r = r;

        this.skin = skin;
        this.nick = nick;
        this.color = color;
        this.type = type;

        this.ownCell = ![];
        this.animTimeStamp = Date.now();

        this.xA = x;
        this.yA = y;
        this.rA = r;

        this.nickCache = null;
        this.massCache = null;

        if (nick && nick.length)
          this.setNickCache();

    }

    setNickCache() {
        // Please note that `_0x48eb3d` is not defined in this scope.

        let nick = _0x48eb3d.nickCache.get(this.nick);
        if (nick === undefined) {
            _0x48eb3d.nickCache.set(this.nick, {
                'data': [null, null, null, null, null, null, null],
                'timeStamp': Date.now()
            });
        }
        this.nickCache = _0x48eb3d.nickCache.get(this.nick);
    }

    cacheName() {
        // Please note that `_0x57e7c0` is not defined in this scope.

        let rounded_ra = Math.floor(this.rA / 250);

        if (this.nickCache.data[rounded_ra] === null) {
            let canvas = _0x57e7c0.createElement('canvas');
            let canvas2d = canvas.getContext('2d');
            let canvas_width = rounded_ra * 250 + 125;
            let canvas_height = Math.floor(canvas_width / 6);
            canvas.width = canvas_width;
            canvas.height = canvas_height;
            canvas2d.textAlign = 'center';
            canvas2d.textBaseline = 'middle';
            canvas2d.fillStyle = '#fff';
            canvas2d.font = '600 ' + canvas_height + 'px ubuntu';
            canvas2d.fillText(this.nick, canvas_width / 0x2, canvas_height / 0x2);
            this.nickCache.data[rounded_ra] = canvas;
        }
        this.nickCache.timeStamp = Date.now();
    }

    cacheMass() {
        // Please note that `_0x48eb3d` is not defined in this scope.

        let r_quad = Math.floor(this.r * this.r / 100);

        if (r_quad > 999) r_quad = ~~(r_quad / 100) / 10 + 'k';
        if (_0x48eb3d.massCache.get(r_quad) === undefined) {
            _0x48eb3d.massCache.set(r_quad, {
                'data': _0x57e7c0.createElement('canvas'),
                'timeStamp': Date.now()
            });
            this.massCache = _0x48eb3d.massCache.get(r_quad);
            let mass_cache_data = this.massCache.data;
            let mass_cache_data_2d = mass_cache_data.getContext('2d');
            let r_double = this.r * 2;
            let r_double_sixth = Math.floor(r_double / 6);
            mass_cache_data.width = r_double;
            mass_cache_data.height = r_double_sixth;
            mass_cache_data_2d.textAlign = 'center';
            mass_cache_data_2d.textBaseline = 'middle';
            mass_cache_data_2d.fillStyle = '#fff';
            mass_cache_data_2d.font = '600 ' + r_double_sixth + 'px ubuntu';
            mass_cache_data_2d.fillText(r_quad, r_double / 2, r_double_sixth / 2);
        }
        else if (this.massCache === null) {
            this.massCache = _0x48eb3d.massCache.get(r_quad);
        }
        this.massCache.timeStamp = Date.now();
    }
}

Just do it manually. Read the context, rename common variables with human names, replace hexadecimal integers with decimal integers, and replace those this['attribute']= ... accessors with this.attribute = .

Answer 3

The problem with JSNice was that your code contains class syntax which was introduced in JavaScript ES6 standard. There is a new version of JSNice.org released in March 2018 that finally supports ES6 standard.