https://www.debugbear.com/cdn/chunk-beautify-js-tool.df0c9ec2395e8adbb0d7.js

1"use strict";(("undefined"==typeof window?self:window).webpackChunkdebugbear_gae=("undefined"==typeof window?self:window).webpackChunkdebugbear_gae||[]).push([[1075],{97095(e,t,r){r.r(t),r.d(t,{BeautifyJsTool:()=>f});var a=r(87195),n=r(5283),i=r(76745),s=r(68463),l=r(74848),o={};r.r(o),r.d(o,{default:()=>n.A,parsers:()=>n.T});var c={};async function u(e){return s.GP(e,{parser:"babel",plugins:[o,c]})}r.r(c),r.d(c,{default:()=>i.Ay,languages:()=>i.eo,options:()=>i.fF,printers:()=>i.CW});const d=[{title:"What is JavaScript beautification?",text:"JavaScript beautification means reformatting code to make it more readable by adding indentation and line breaks. It's particularly useful for understanding minified scripts from production websites."},{title:"Why beautify JavaScript code?",text:"Beautified code is easier to read and understand. During development, automated code formatters are also used to ensure consistent style across a codebase without requiring additional effort."},{title:"How does the JavaScript code formatter work?",text:"This tool uses [Prettier](https://prettier.io/) to parse your JavaScript into an abstract syntax tree (AST), then reprints it with consistent formatting rules."}];function f(){return(0,l.jsx)(a.E,{title:"Online JavaScript Beautifier: Format JS Code",description:"Paste your JavaScript code below and click 'Beautify' to format it with proper indentation and spacing.",inputLabel:"Input JavaScript",outputLabel:"Formatted Output",ctaTitle:"Beautify",breadcrumbTitle:"Beautify JavaScript",breadcrumbHref:"/tool/beautify-js",transform:u,faqItems:d,language:"javascript",sampleCode:'function greet(name){const message="Hello, "+name+"!";console.log(message);return message}const users=["Alice","Bob"];users.forEach(u=>greet(u));'})}},87195(e,t,r){r.d(t,{E:()=>w}),r(25440),r(62953);var a=r(94430),n=r(52300),i=r(11178),s=r(41802),l=r(96540),o=r(45230),c=r(99827),u=r(25959),d=r(40256),f=r(15874),h=r(63427),m=r(6585),b=r(36898),p=r(74848);const g=b.EditorView.theme({"&":{fontSize:"14px",border:"1px solid #dee2e6",borderRadius:"0.375rem",height:"100%"},"&.cm-focused":{outline:"none",borderColor:"#86b7fe",boxShadow:"0 0 0 0.25rem rgba(13, 110, 253, 0.25)"},".cm-scroller":{fontFamily:"monospace",overflow:"auto"},".cm-content":{padding:"8px 0"},".cm-gutters":{backgroundColor:"#f8f9fa",borderRight:"1px solid #dee2e6",borderRadius:"0.375rem 0 0 0.375rem"}}),y=b.EditorView.theme({"&":{backgroundColor:"#f8f9fa"},".cm-content":{backgroundColor:"#f8f9fa"}});function x(e){switch(e){case"javascript":return(0,d.Q2)();case"html":return(0,u.html)();case"css":return(0,c.AH)()}}function v(e){let t=e.value,r=e.onChange,a=e.language,n=e.readOnly,i=void 0!==n&&n,s=e.height,c=void 0===s?"300px":s;const u=l.useRef(null),d=l.useRef(null);return l.useEffect(()=>{if(!u.current)return;const e=[(0,b.lineNumbers)(),b.EditorView.lineWrapping,(0,f.syntaxHighlighting)(f.defaultHighlightStyle,{fallback:!0}),x(a),(0,h.highlightSelectionMatches)(),(0,o.history)(),b.keymap.of([...o.defaultKeymap,...h.searchKeymap,...o.historyKeymap]),g];i?(e.push(m.EditorState.readOnly.of(!0)),e.push(y)):r&&e.push(b.EditorView.updateListener.of(e=>{e.docChanged&&r(e.state.doc.toString())}));const n=m.EditorState.create({doc:t,extensions:e}),s=new b.EditorView({state:n,parent:u.current});return d.current=s,()=>{s.destroy()}},[a,i]),l.useEffect(()=>{d.current&&t!==d.current.state.doc.toString()&&d.current.dispatch({changes:{from:0,to:d.current.state.doc.length,insert:t}})},[t]),(0,p.jsx)("div",{ref:u,style:{height:c}})}function j(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var a,n,i,s,l=[],o=!0,c=!1;try{if(i=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;o=!1}else for(;!(o=(a=i.call(r)).done)&&(l.push(a.value),l.length!==t);o=!0);}catch(e){c=!0,n=e}finally{try{if(!o&&null!=r.return&&(s=r.return(),Object(s)!==s))return}finally{if(c)throw n}}return l}}(e,t)||function(e,t){if(e){if("string"==typeof e)return S(e,t);var r={}.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?S(e,t):void 0}}

1(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function S(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,a=Array(t);r<t;r++)a[r]=e[r];return a}function w(e){let t=e.title,r=e.description,o=e.inputLabel,c=e.outputLabel,u=e.ctaTitle,d=e.breadcrumbTitle,f=e.breadcrumbHref,h=e.transform,m=e.faqItems,b=e.language,g=e.sampleCode;const y=j(l.useState(""),2),x=y[0],S=y[1],w=j(l.useState(""),2),N=w[0],k=w[1],T=j(l.useState(null),2),E=T[0],J=T[1],O=j(l.useState(!1),2),A=O[0],B=O[1],H=x.length>0&&N.length>0?Math.round(100*(1-N.length/x.length)):null;return(0,p.jsx)(i.K7,{isFullWidthWithoutSidebar:!0,header:(0,p.jsx)(a.V,{breadcrumbs:[{title:"Free Tools",href:"/tools"},{title:d,href:f}]}),children:(0,p.jsxs)("div",{className:"",children:[(0,p.jsx)("h1",{className:"mb-2",style:{fontWeight:500},children:t}),(0,p.jsx)("p",{className:"mb-4 color-coldGrey2",children:r}),(0,p.jsxs)("div",{className:"mb-3",children:[(0,p.jsxs)("div",{className:"d-flex justify-content-between align-items-center mb-1",children:[(0,p.jsx)("label",{className:"form-label fw-bold mb-0",children:o}),(0,p.jsxs)("button",{type:"button",className:"btn btn-link btn-sm p-0",onClick:async()=>{S(g),B(!0),J(null);try{const e=await h(g);k(e)}catch(e){J(e instanceof Error?e.message:"Transformation failed"),k("")}finally{B(!1)}},children:["Try sample ",o.replace("Input ","")]})]}),(0,p.jsx)(v,{value:x,onChange:S,language:b,height:"300px"})]}),(0,p.jsx)("button",{className:"btn btn-primary mb-3 btn-block btn-lg",onClick:async function(){if(!x.trim())return J("Please enter some code"),void k("");B(!0),J(null);try{const e=await h(x);k(e)}catch(e){J(e instanceof Error?e.message:"Transformation failed"),k("")}finally{B(!1)}},disabled:A,children:A?"Processing...":u}),E&&(0,p.jsx)("div",{className:"alert alert-danger mb-3",role:"alert",children:E}),N&&(0,p.jsxs)("div",{className:"mb-3",children:[(0,p.jsxs)("div",{className:"d-flex justify-content-between align-items-center",children:[(0,p.jsx)("label",{htmlFor:"code-output",className:"form-label fw-bold mb-0",children:c}),null!==H&&H>0&&(0,p.jsxs)("span",{children:[(0,s.z3)(x.length)," ➔ ",(0,s.z3)(N.length)," | ",(0,p.jsxs)("strong",{children:["-",(0,s.z3)(x.length-N.length)," – ",H,"% smaller"]})]})]}),(0,p.jsx)("div",{className:"mt-1",children:(0,p.jsx)(v,{value:N,language:b,readOnly:!0,height:"400px"})})]}),m&&(0,p.jsx)(n.$,{items:m}),(0,p.jsx)(C,{currentPath:f})]})})}const N=[{href:"/tool/minify-js",title:"JavaScript Minifier"},{href:"/tool/minify-html",title:"HTML Minifier"},{href:"/tool/minify-css",title:"CSS Minifier"},{href:"/tool/minify-json",title:"JSON Minifier"},{href:"/tool/beautify-js",title:"JavaScript Beautifier"},{href:"/tool/beautify-html",title:"HTML Beautifier"},{href:"/tool/beautify-css",title:"CSS Beautifier"},{href:"/tool/beautify-json",title:"JSON Beautifier"}];function C(e){let t=e.currentPath;const r=N.filter(e=>e.href!==t);return(0,p.jsxs)("div",{className:"mt-5",children:[(0,p.jsx)("h2",{className:"h5 mb-3",children:"Try Our Other Code Formatting Tools"}),(0,p.jsx)("div",{className:"d-flex flex-wrap gap-2",children:r.map(e=>(0,p.jsx)("a",{href:e.href,className:"btn btn-link mr-2 mb-2",style:{border:"1px solid #eee"},children:e.title},e.href))})]})}},52300(e,t,r){r.d(t,{$:()=>i});var a=r(29262),n=r(74848);function i(e){let t=e.items;return t&&0!==t.length?(0,n.jsx)("div",{className:"mt-5",style:{maxWidth:1e3},children:t.map((e,t)=>(0,n.jsxs)("div",{className:"mb-4",children:[(0,n.jsx)("h2",{className:"h5",children:e.title}),(0,n.jsx)(a.UP,{text:e.text})]},t))}):null}}}]);