JS Beautifier

JS Beautifier Description

This little beautifier will reformat and re-indent bookmarklets, ugly JavaScript, unpack scripts packed by Dean Edward’s popular packer, as well as partly deobfuscate scripts processed by the npm package javascript-obfuscator.

It is used to improve the readability of JavaScript code.

Additionally, it supports improving the readability of CSS and HTML code.

Homepage: https://beautifier.io/

Homepage: https://github.com/beautify-web/js-beautify

Author: Einar Lielmanis

License: MIT

JS Beautifier Help

The JS Beautifier package includes three tools:

• js-beautify – the main tool that improves the readability of JavaScript code, available in all JS Beautifier variants.
• css-beautify – this program improves the readability of CSS code, available in Node.js JavaScript and Python versions
• html-beautify – improves the readability of HTML code, available only in Node.js JavaScript version

js-beautify Help

Usage:

jsbeautifier.py [OPTIONS] <INPUT FILE>

<INPUT FILE> can be “-”, which means standard input (stdin).

Options:

CLI Options:
  -f, --file       Input file(s) (Pass '-' for stdin)
  -r, --replace    Write output in-place, replacing input
  -o, --outfile    Write output to file (default stdout)
  --config         Path to config file
  --type           [js|css|html] ["js"]
  -q, --quiet      Suppress logging to stdout
  -h, --help       Show this help
  -v, --version    Show the version

Beautifier Options:
  -s, --indent-size                 Indentation size [4]
  -c, --indent-char                 Indentation character [" "]
  -t, --indent-with-tabs            Indent with tabs, overrides -s and -c
  -e, --eol                         Character(s) to use as line terminators.
                                    [first newline in file, otherwise "\n]
  -n, --end-with-newline            End output with newline
  --indent-empty-lines              Keep indentation on empty lines
  --templating                      List of templating languages (auto,none,django,erb,handlebars,php,smarty) ["auto"] auto = none in JavaScript, all in html
  --editorconfig                    Use EditorConfig to set up the options
  -l, --indent-level                Initial indentation level [0]
  -p, --preserve-newlines           Preserve line-breaks (--no-preserve-newlines disables)
  -m, --max-preserve-newlines       Number of line-breaks to be preserved in one chunk [10]
  -P, --space-in-paren              Add padding spaces within paren, ie. f( a, b )
  -E, --space-in-empty-paren        Add a single space inside empty paren, ie. f( )
  -j, --jslint-happy                Enable jslint-stricter mode
  -a, --space-after-anon-function   Add a space before an anonymous function's parens, ie. function ()
  --space_after_named_function      Add a space before a named function's parens, ie. function example ()
  -b, --brace-style                 [collapse|expand|end-expand|none][,preserve-inline] [collapse,preserve-inline]
  -u, --unindent-chained-methods    Don't indent chained method calls
  -B, --break-chained-methods       Break chained method calls across subsequent lines
  -k, --keep-array-indentation      Preserve array indentation
  -x, --unescape-strings            Decode printable characters encoded in xNN notation
  -w, --wrap-line-length            Wrap lines that exceed N characters [0]
  -X, --e4x                         Pass E4X xml literals through untouched
  --good-stuff                      Warm the cockles of Crockford's heart
  -C, --comma-first                 Put commas at the beginning of new line instead of end
  -O, --operator-position           Set operator position (before-newline|after-newline|preserve-newline) [before-newline]

css-beautify Help

Usage:

css-beautify.py [OPTIONS] <INPUT FILE>

Options:

CLI Options:
  -f, --file       Input file(s) (Pass '-' for stdin)
  -r, --replace    Write output in-place, replacing input
  -o, --outfile    Write output to file (default stdout)
  --config         Path to config file
  --type           [js|css|html] ["js"]
  -q, --quiet      Suppress logging to stdout
  -h, --help       Show this help
  -v, --version    Show the version

Beautifier Options:
  -s, --indent-size                 Indentation size [4]
  -c, --indent-char                 Indentation character [" "]
  -t, --indent-with-tabs            Indent with tabs, overrides -s and -c
  -e, --eol                         Character(s) to use as line terminators.
                                    [first newline in file, otherwise "\n]
  -n, --end-with-newline            End output with newline
  --indent-empty-lines              Keep indentation on empty lines
  --templating                      List of templating languages (auto,none,django,erb,handlebars,php,smarty) ["auto"] auto = none in JavaScript, all in html
  --editorconfig                    Use EditorConfig to set up the options
  -b, --brace-style                       [collapse|expand] ["collapse"]
  -L, --selector-separator-newline        Add a newline between multiple selectors.
  -N, --newline-between-rules             Add a newline between CSS rules.

html-beautify Help

Usage:

html-beautify [OPTIONS] <INPUT FILE>

Options:

CLI Options:
  -f, --file       Input file(s) (Pass '-' for stdin)
  -r, --replace    Write output in-place, replacing input
  -o, --outfile    Write output to file (default stdout)
  --config         Path to config file
  --type           [js|css|html] ["js"]
  -q, --quiet      Suppress logging to stdout
  -h, --help       Show this help
  -v, --version    Show the version

Beautifier Options:
  -s, --indent-size                 Indentation size [4]
  -c, --indent-char                 Indentation character [" "]
  -t, --indent-with-tabs            Indent with tabs, overrides -s and -c
  -e, --eol                         Character(s) to use as line terminators.
                                    [first newline in file, otherwise "\n]
  -n, --end-with-newline            End output with newline
  --indent-empty-lines              Keep indentation on empty lines
  --templating                      List of templating languages (auto,none,django,erb,handlebars,php,smarty) ["auto"] auto = none in JavaScript, all in html
  --editorconfig                    Use EditorConfig to set up the options
  -b, --brace-style                 [collapse|expand|end-expand] ["collapse"]
  -I, --indent-inner-html           Indent body and head sections. Default is false.
  -H, --indent-handlebars           Indent handlebars. Default is false.
  -S, --indent-scripts              [keep|separate|normal] ["normal"]
  -w, --wrap-line-length            Wrap lines that exceed N characters [0]
  -A, --wrap-attributes             Wrap html tag attributes to new lines [auto|force|force-aligned|force-expand-multiline|aligned-multiple|preserve|preserve-aligned] ["auto"]
  -i, --wrap-attributes-indent-size Indent wrapped tags to after N characters [indent-level]
  -p, --preserve-newlines           Preserve line-breaks (--no-preserve-newlines disables)
  -m, --max-preserve-newlines       Number of line-breaks to be preserved in one chunk [10]
  -U, --unformatted                 List of tags (defaults to inline) that should not be reformatted
  -T, --content_unformatted         List of tags (defaults to pre) whose content should not be reformatted
  -E, --extra_liners                List of tags (defaults to [head,body,/html] that should have an extra newline
  --unformatted_content_delimiter    Keep text content together between this string [""]

JS Beautifier Usage Example

Let's view file content:

cat /var/www/html/dvwa/vulnerabilities/javascript/source/medium.js

Output:

function do_something(e){for(var t="",n=e.length-1;n>=0;n--)t+=e[n];return t}setTimeout(function(){do_elsesomething("XX")},300);function do_elsesomething(e){document.getElementById("token").value=do_something(e+document.getElementById("phrase").value+"XX")}

Let's improve the readability of JavaScript code:

js-beautify -f /var/www/html/dvwa/vulnerabilities/javascript/source/medium.js

Output:

function do_something(e) {
    for (var t = "", n = e.length - 1; n >= 0; n--) t += e[n];
    return t
}
setTimeout(function() {
    do_elsesomething("XX")
}, 300);

function do_elsesomething(e) {
    document.getElementById("token").value = do_something(e + document.getElementById("phrase").value + "XX")

How to install JS Beautifier

Installation on Kali Linux

sudo apt install npm
sudo npm -g install js-beautify
js-beautify -h

Installation on Debian, Linux Mint, Ubuntu

sudo apt install npm
sudo npm -g install js-beautify
js-beautify -h

Installation on BlackArch

The program is pre-installed on BlackArch.

sudo pacman -S python-jsbeautifier

A Python version is available in the BlackArch repositories, its peculiarities are that html-beautify is absent at all, and css-beautify is not installed due to an error. There are some other differences as well. If you want to install Node.js JavaScript version, then run the following commands:

sudo pacman -R python-jsbeautifier
sudo pacman -S npm
sudo npm -g install js-beautify
js-beautify -h

Another installation option is installation from AUR. This is the recommended way to install JS Beautifier because it gives you the full version of the program with automatic updates when new versions are released. To install JS Beautifier from AUR, first install pikaur and then run the following command:

pikaur -S js-beautify

Installation on Windows

Start by installing Python at How to install Python and PIP on Windows 10.

After installing Python and PIP, run the commands:

sudo pip3 install jsbeautifier
sudo pip3 install cssbeautifier
js-beautify -h

JS Beautifier online service

It is not necessary to install the program on a computer, the author has created a page that can beautify JavaScript code: https://beautifier.io/

JS Beautifier Screenshots

JS Beautifier Tutorials

• How to deobfuscate JavaScript code
• How to see JavaScript code written using unprintable characters