§

Options

§

I-paste ang JavaScript

§

Beautified na JS

js

Sa mga developer sa Pilipinas — lalo na sa mga nasa Cebu IT Park, Ortigas, at BGC — ang beautifier ay madalas na ginagamit kapag nakakaharap ng bundled na production script na kailangang suriin. Buksan ang Sources panel sa Chrome DevTools, i-paste ang isang minified na vendor file dito, at makukuha mo ang isang bagay na magagamit sa code review. Ang mga team na gumagamit ng Prettier o ng Airbnb JavaScript Style Guide ay gumagamit ng parehong panuntunan sa indentation na inilalantad ng tool na ito, kaya ang output ay direktang nahuhulog sa isang repository na sinusuri ng ESLint. Nakakatulong din ito sa pag-audit ng isang third-party widget para sa SOC 2 review, o kapag ang isang GDPR data-mapping na ehersisyo ay nangangahulugang subaybayan kung ano talaga ang ginagawa ng isang analytics snippet bago ito maipadala.

// Mga Kaugnay na Tool

./js-minifier
JavaScript Minifier
Mag-minify ng JavaScript gamit ang buong Terser pipeline — mangle, compress, dead-code elimination.
→
./json-formatter
JSON Formatter
Mag-format, mag-validate, at mag-minify ng JSON sa iyong browser.
→
./css-minifier
CSS Minifier
Alisin ang whitespace at komento mula sa CSS sa iyong browser.
→
./
Lahat ng Tool
I-browse ang buong koleksyon ng mga online tool ng Ultim8Soft.
→

Paano gumagana ang JavaScript beautification

Binabasa ng beautifier ang iyong code nang isa-isang karakter, sinusubaybayan kung gaano kalalim ang naka-nest ang bawat statement, at inilalabas ito ulit nang may consistent na spacing. Hindi nito kailanman binabago ang ginagawa ng code — ang hitsura lamang nito.

  1. Mag-tokenize. Ina-scan ng library ang iyong input sa isang stream ng mga token: mga keyword, identifier, string, operator, at bantas. Ang mga string, template literal, at regular-expression literal ay kinikilala bilang mga solong unit, kaya ang isang brace sa loob ng isang string ay hindi kailanman mapagkakamalan sa isang block delimiter.
  2. Subaybayan ang nesting. Habang inililipat ang token stream, ang beautifier ay nagpapanatili ng kasalukuyang antas ng indent. Ang bawat bumubukas na brace, bracket, o parenthesis ay nagpapalalim ng antas; ang bawat nagsasarang ay nagpapababa nito. Ang lalim na iyon ang nagpapasya kung ilang indent unit ang nasa harap ng bawat linyang ibinalik.
  3. I-apply ang iyong mga opsyon. Ang iyong pagpili ng indent (2 espasyo, 4 na espasyo, o isang tab) ang nagtatakda ng lapad ng isang antas. Ang setting ng brace-style ang nagpapasya kung ang bumubukas na brace ay sumasakay sa statement na nauuna rito o bumabagsak sa sarili nitong linya. Ang limitasyon ng blangkong linya ay kino-collapse ang mahabang pagkakasunod ng mga walang laman na linya pababa sa limitasyong pipiliin mo.
  4. Mag-re-emit. Sa wakas, inilalabas ng formatter ang mga token nang may indentation at line break na napaghandaan nito, at opsyonal na idinaragdag ang mga semicolons na isasupply ng automatic semicolon insertion sa runtime. Ang resulta ay ang parehong programa, nakaayos para mabasa ng tao.

Bakit mag-beautify ng JavaScript

  • Basahin ang minified na code. Ang mga production bundle ay nakaship sa isang linya nang may mga single-letter na pangalan ng variable. Ang pag-beautify ay nagbabalik ng mga line break at indentation para talagang masubaybayan mo ang isang bug pabalik sa statement na nagdulot nito, kahit walang source map.
  • Ayusin ang mga hindi pare-parehong file. Ang code na hinawakan ng ilang tao ay nagdadrift sa mixed na indentation at brace style. Ang isang pass sa beautifier ay nino-normalize ang buong file sa iisang layout, na nagpapahintulot sa susunod na diff na magpakita ng tunay na mga pagbabago sa lohika at hindi whitespace noise.
  • Hindi nagbibigay ng abala ang tool na ito sa iyong page. Karamihang online na formatter ay naglo-load ng buong library nang sandaling buksan mo ang page. Ang isa ito ay lazy-load lang ng js-beautify kapag nag-click ka ng Beautify o na-switch on ang Live mode, kaya ang pagbubukas ng page ay nagkakahalaga ng ilang kilobyte sa halip na ilang daan, at ang paunang render ay nananatiling mabilis.
  • Wala itong umaalis sa iyong browser. Ang beautifier ay tumatakbo nang buo sa iyong device. Ang iyong code ay hindi kailanman ini-upload sa isang server, na mahalaga kapag ang script na iyong sinisuri ay pag-aari ng isang kliyente, naglalaman ng mga internal na API path, o nasa ilalim ng isang kasunduan sa pagkakumpidensyal.

Mga karaniwang gamit

Ang JavaScript beautification ay lumalabas sa tuwing may isang taong kailangang basahin ang code na hindi isinulat para basahin.

  • Pag-debug ng produksyon: i-paste ang isang minified na bundle na hinila mula sa tab na Network para mahanap ang function sa likod ng isang error stack na hindi mo kayang i-decode kung hindi.
  • Paghahanda ng code review: i-reformat ang file ng isang contributor na hindi pare-parehong na-indent bago buksan ang pull request para ang mga reviewer ay makakita ng lohika, hindi kagulong layout.
  • Mga audit sa seguridad at pagsunod: palawakin ang isang third-party na analytics o ad snippet para kumpirmahin kung ano talaga ang ginagawa nito bago ito maging live.

Isang natapos na halimbawa

Kumuha ng isang minified na one-liner: function f(a){if(a){return a*2}else{return 0}}. I-paste ito sa itaas na ang indentation ay nakatakda sa 2 espasyo at ang brace style na Collapse, pagkatapos ay i-click ang Beautify. Makakakuha ka ng isang nababasang bloke: function f(a) {, pagkatapos ay isang indented na if (a) {, ang return a * 2; statement na naka-nest nang isang antas nang mas malalim, at ang mga katugmang brace na nakahanay sa ibaba. Palitan ang brace style sa Expand at ang bawat bumubukas na brace ay bumabagsak sa sarili nitong linya. Baguhin ang indentation sa Mga tab at ang bawat antas ay lilipat mula sa dalawang espasyo patungo sa isang tab character. Ang istruktura ay magkatulad; ang layout lamang ang nagbabago.

FAQ

Tumatakbo ba ito sa aking browser?

Oo. Ang js-beautify library ay lazy-loaded sa unang pagkakataon na mag-click ka ng Beautify o mag-enable ng Live mode, pagkatapos ay ni-cache. Ang iyong code ay hindi kailanman umaalis sa page — walang server round-trip at walang upload.

Pareho ba ang beautifying at un-minifying?

Ibinabalik nito ang nababasang pag-format — indentation, line break, at spacing — ngunit hindi nito maibabalik ang mga orihinal na pangalan ng variable o mga komento na tinanggal ng minification. Kung may source map, ang DevTools ng iyong browser ay maaaring makabawi ng mga orihinal na pangalan; ang beautifier na mag-isa ay gumagana lamang sa kung ano ang nasa file.

Binabago ba ng beautifying ang gawi ng aking code?

Hindi. Ang beautification ay nagdaragdag at nagtatanggal lamang ng whitespace at line break; tumatakbo nang katulad ang programa. Ang tanging opsyon na humahawak ng mga token ay ang "Dagdagan ang nawawalang semicolon," na naglalagay ng mga statement terminator na isasupply ng automatic semicolon insertion sa runtime naman, na ginagawang ligtas ang code para ma-minify sa susunod.

Ano ang ibig sabihin ng mga opsyon sa brace style?

Ang Collapse ay nagpapanatili ng isang bumubukas na brace sa parehong linya ng statement (if (x) {), na siyang karaniwang JavaScript convention. Ang Expand ay nagbabagsak ng bawat bumubukas na brace sa sarili nitong linya (ang Allman style). Ang End-expand ay nagpapanatili ng bumubukas na brace na nakakapit ngunit naglalagay ng else at catch sa isang sariwang linya pagkatapos ng nagsasarang brace.

Ang browser-side JavaScript beautification ay nagbibigay sa iyo ng nababasang code nang walang build step o upload. Mag-paste ng minified o magulo na script, piliin ang iyong indentation at brace style, pagkatapos ay kopyahin o i-download ang resulta. Wala itong umaalis sa iyong device, walang account, at ang library ay naglo-load lamang kapag hinilingin mo ito — kaya ang pagbubukas ng page na ito ay nagkakahalaga ng ilang kilobyte, hindi isang megabyte.