เครื่องมือในการ Unminify / Decompress JavaScript [ปิด]


430

มีสคริปต์บรรทัดคำสั่งและ / หรือเครื่องมือออนไลน์ที่สามารถย้อนกลับผลกระทบของการลดขนาดได้คล้ายกับวิธีที่ Tidy สามารถล้าง HTML ที่น่ากลัวได้หรือไม่

(ฉันกำลังมองหาเฉพาะเพื่อยกเลิกการย่อขนาดไฟล์ JavaScript ที่เล็กที่สุดดังนั้นการเปลี่ยนชื่อตัวแปรอาจยังคงเป็นปัญหาอยู่)


4
สำหรับบรรดาของคุณที่อาจไม่ทราบ minification จะเปลี่ยนชื่อตัวแปรภายในเป็นตัวอักษรเดียวและลบความคิดเห็นของโค้ด การเลิกทำการเปลี่ยนแปลงเหล่านี้ไม่สามารถเป็นไปโดยอัตโนมัติ
แม่น้ำวิเวียน

@DanielAllenLangdon จุดที่ดี ฉันได้แก้ไขคำถามแล้วดังนั้นจึงไม่ได้หมายความว่าการลดขนาดจะไม่เปลี่ยนชื่อตัวแปร
Andy Ford

12
FWIW ... เพิ่งพบ JS NICE jsnice.org
Andy Ford

marcusjenkins.com/linux/…ทำงานได้ดีสำหรับฉัน
ychaouche

1
สำหรับ @DanielAllenLangdon: jsnice.org สามารถลดขนาดและยกเลิกการทำให้สับสนแม้กระทั่งรหัสขนาด 30k angularjs
Green

คำตอบ:


504

คุณสามารถใช้สิ่งนี้: http://jsbeautifier.org/ แต่มันขึ้นอยู่กับวิธีการลดขนาดที่คุณกำลังใช้อันนี้แค่ฟอร์แมตโค้ด แต่จะไม่เปลี่ยนชื่อตัวแปรหรือการเข้ารหัสฐานที่ไม่มีการบีบอัด

แก้ไข: ในความเป็นจริงมันสามารถแตกสคริปต์ "บรรจุ" (เต็มไปด้วยผู้บรรจุหีบห่อของ Dean Edward: http://dean.edwards.name/packer/ )


2
+1 - ฉันเคยใช้วิธีนี้มาก่อนและ jsbeautifier.org เป็นบริการที่ยอดเยี่ยม
Dan Lew

ขอบคุณ นี่คือสิ่งที่ฉันกำลังมองหา
Andy Ford

5
ไม่ฉันพูดว่า base 62: dean.edwards.name/packerและen.wikipedia.org/wiki/Base_62
Fabien Ménager

4
มีสิ่งเช่นนี้เป็นเครื่องมือที่ "เปลี่ยนชื่อตัวแปร" และยังคงตระหนักถึงไวยากรณ์ JS ที่จะไม่ทำลายรหัสหรือไม่
Jorge Vargas

3
จะเพิ่มขึ้น 10 เท่านี้ถ้าฉันทำได้ เพิ่งช่วยฉันจากวันที่สูญเปล่า!
benlumley

154

เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome มีคุณลักษณะนี้ในตัว เปิดเครื่องมือนักพัฒนาซอฟต์แวร์ขึ้นมา (การกด F12 เป็นวิธีหนึ่ง) ในแท็บแหล่งที่มาแถบด้านล่างซ้ายมีชุดไอคอน ไอคอน "{}" คือ "สั่งพิมพ์สวย" และทำการแปลงตามความต้องการ

อัปเดต: IE9 "เครื่องมือสำหรับนักพัฒนา F12" มีคุณสมบัติ "ฟอร์แมต JavaScript" ในแท็บสคริปต์ภายใต้ไอคอนเครื่องมือที่นั่น ( ดูเคล็ดลับ # 4 ในF12 ความลับในการแก้ไขจุดบกพร่องบนเว็บที่ดีที่สุด )

ป้อนคำอธิบายรูปภาพที่นี่


1
สำหรับ. js เฉพาะที่ฉันพยายามจะยกเลิกการย่อขนาดวิธีนี้ใช้งานได้ดีที่สุด
Igneosaur

1
นี่คือตอนนี้ในแท็บ "แหล่งที่มา" ไม่ใช่แท็บสคริปต์
mhenry1384

@ mhenry1384: ใช่ Chrome เปลี่ยนชื่อแท็บแล้ว ฉันปรับปรุงคำตอบตามนั้น
Jon Adams

ใช่!! (แอพของเราไม่มีโหมด debug / dev สำหรับ js ที่ฉันรู้ - เราต้องไม่ย่อ / แปลงชื่อตัวแปร)
Steven Lu

2
แค่หัวขึ้น: บางครั้ง Chrome ก็ทำให้โค้ด JavaScript ยุ่งเหยิง ตัวอย่างเช่นif (a) /regex/.match(foo);พิมพ์สวยif (a)\n / /regex/ .\nmatch(foo);ซึ่งเป็นข้อผิดพลาดทางไวยากรณ์
แอมเฟตามาจิ

56

เข้าใจแล้ว! JSBeautifierทำสิ่งนี้อย่างแน่นอนและคุณยังมีตัวเลือกสำหรับการจัดรูปแบบอัตโนมัติ


5
stackoverflow-then-google แทนที่จะเป็น google-then-stackoverflow :))))
dfa

ฉันทำ google สำหรับ "javascript formatter online"
cgp

1
ปลั๊กอิน FireFox นี้ใช้ JSBeautifier เพื่อยกเลิกการลดขนาดจาวาสคริปต์เพื่อให้คุณสามารถกำหนดจุดพักบนบรรทัดในดีบักเกอร์ js ของ FireBug !!: addons.mozilla.org/en-US/firefox/addon/javascript-deminifier
BT

16

คุณไม่สามารถใช้ฟอร์แมต javascript ( http://javascript.about.com/library/blformat.htm ) ได้หรือไม่?


+1 สำหรับคำตอบที่ใช้งานได้ fabien เพิ่งจะตอบกลับก่อน
Andy Ford

นี่ตอบเฉพาะส่วน "คลาย" ของคำถาม
Jorge Vargas

ไม่นี่มันใช้งานไม่ได้ มันทำลายรหัส ... :(
Ramesh

14

ใน Firefox, SpiderMonkey และ Rhino คุณสามารถใส่โค้ดใด ๆ ลงในฟังก์ชั่นที่ไม่ระบุชื่อและเรียกtoSourceวิธีการของมันซึ่งจะทำให้คุณมีแหล่งที่มาของรูปแบบการทำงานที่ดี

toSource แถบความคิดเห็น

เช่น.:

(function () { /* Say hello. */ var x = 'Hello!'; print(x); }).toSource()

จะถูกแปลงเป็นสตริง:

function () {
    var x = "Hello!";
    print(x);
}

PS : มันไม่ได้เป็น "เครื่องมือออนไลน์" แต่คำถามทั้งหมดเกี่ยวกับเทคนิคการตกแต่งที่สวยงามโดยทั่วไปจะถูกปิดเหมือนการทำซ้ำของคำถามนี้


น่าสนใจ ฉันถามคำถาม 2.5 ปีที่แล้วดังนั้นฉันจึงรู้สึกว่ามันสายเกินไปที่จะแก้ไขชื่อ แต่ฉันยังคงเห็นตัวเลือกทั้งแบบออนไลน์และออฟไลน์ ขอบคุณสำหรับการตีด้วย +1
Andy Ford

10

หากคุณมี Mac และ TextMate - ทางเลือกที่ง่ายสำหรับการจัดรูปแบบ Javascript คือ:

  1. เปิดไฟล์ด้วย Textmate
  2. คลิกที่> การรวมกลุ่ม> JavaScript> จัดรูปแบบเอกสาร
  3. แตกเปิดเบียร์

2
เบียร์เสิร์ฟตอนนี้ :)
dgilperez

6

IDEs ส่วนใหญ่มีคุณสมบัติการจัดรูปแบบอัตโนมัติ ยกตัวอย่างเช่นใน NetBeans เพียงกด CTRL + K


5

เป็นทางเลือก (ตั้งแต่ฉันไม่รู้ jsbeautifier.org จนถึงตอนนี้) ฉันได้ใช้ bookmarklet ที่เปิดใช้งานปุ่มถอดรหัสอีกครั้งใน Dean Edward's Packer

ผมพบว่าคำแนะนำและ bookmarklet ที่นี่

นี่คือ bookmarklet (ในกรณีที่ไซต์ไม่ทำงาน)

javascript:for%20(i=0;i<document.forms.length;++i)%20{for(j=0;j<document.forms[i].elements.length;++j){document.forms[i].elements[j].removeAttribute(%22readonly%22);document.forms[i].elements[j].removeAttribute(%22disabled%22);}}

5

ฉันไม่แน่ใจว่าคุณต้องการซอร์สโค้ดหรือไม่ มีออนไลน์ฟรี JavaScript จัดรูปแบบที่http://www.blackbeltcoder.com/Resources/JSFormatter.aspx




5

คล้ายกับคำตอบของStoneแต่สำหรับนักพัฒนา Windows / .NET:

หากคุณมี Visual Studio และ ReSharper - ทางเลือกที่ง่ายสำหรับการจัดรูปแบบ Javascript คือ:

  • เปิดไฟล์ด้วย Visual Studio
  • คลิกที่ ReSharper> เครื่องมือ> รหัสการล้างข้อมูล (Ctrl + E, C);
  • เลือก "Default: Reformat code" แล้วคลิก OK;
  • แตกเปิดเบียร์

4

แม้จะมีอินเทอร์เฟซที่ห่างออกไปจากระยะไกล แต่JSPrettyเป็นเครื่องมือที่ดีฟรีและออนไลน์สำหรับการสร้างซอร์สโค้ดจาวาสคริปต์ที่มนุษย์สามารถอ่านได้ คุณสามารถบังคับใช้การเยื้องประเภทที่คุณต้องการและสามารถตรวจจับความสับสน



3

Pretty Diffจะทำให้สวยงาม (พิมพ์สวย) JavaScript ในลักษณะที่สอดคล้องกับอัลกอริทึมพื้นที่สีขาว JSLintและ JSHint


มันเป็นเรื่องน่าขันที่เว็บไซต์ดูไม่สวย แต่นี่เป็นเครื่องมือที่ยอดเยี่ยม
Andy Ford


โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.