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

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

Related tools

Recommended for you:

Comments are Closed

Рейтинг@Mail.ru