วิธี Debug Obfuscated JavaScript Code

โค้ด JavaScript ที่ถูก Obfuscate (ทำให้อ่านยาก) ต้องใช้ JavaScript Formatter/Beautifier เพื่อจัดรูปแบบให้อ่านง่ายก่อน Debug

ขั้นตอน

1. ไปที่ Online Beautifier เช่น:
   • beautifier.io (Popular)
   • prettier.io/playground
   • jsnice.org (AI Deobfuscation)
2. วางโค้ด Obfuscated ในช่องซ้าย
3. กด Beautify / Format
4. โค้ดที่จัดรูปแบบแล้วจะอยู่ช่องขวา

ตัวอย่าง (Conceptual)

(รูปภาพต้นฉบับแสดง UI ของ Beautifier: ซ้าย = Obfuscated, ขวา = Beautified)

// Obfuscated (หนึ่งบรรทัด, ตัวแปรสั้น, ไม่มี Space)
var a=1,b=2,c=function(d){return d*a+b};console.log(c(3));

// Beautified
var a = 1;
var b = 2;
var c = function(d) {
  return d * a + b;
};
console.log(c(3));

Debug ใน DevTools หลัง Beautify

1. Copy Beautified Code
2. ใน Chrome DevTools → Sources Tab → Snippets → New Snippet → Paste
3. Run Snippet (Ctrl+Enter) หรือ Set Breakpoints
4. หรือ Override ไฟล์จริง: Sources → Page → Right-click file → Save for overrides → Edit → Save → Reload

เครื่องมือขั้นสูง (Deobfuscation)

• JSNice: ใช้ ML ทายชื่อตัวแปร/ประเภท
• de4js: Deobfuscator สำหรับ Packer แบบต่างๆ
• AST Explorer: วิเคราะห์ Abstract Syntax Tree
• Node.js: require('vm').runInNewContext(code) รันใน Sandbox

ข้อควรระวัง: Beautify ช่วยอ่านง่าย แต่ Logic/Variable Names อาจยังคง Obfuscated (minified names) ต้องอ่านเข้าใจ Logic ก่อน