আসল কোড চলার সময় scope chain সত্যিই তৈরি হতে আর ভেঙে যেতে দেখুন — প্রতিটা variable-এর আসল value, temporal dead zone-এর আসল ReferenceError, আর একটা closure বাইরের function return করে যাওয়ার পরও ঠিক কী বাঁচিয়ে রাখে।
JavaScript পাঠ দেখুনError().stack যেভাবে একটা call stack দেখায়, সেভাবে কোনো JS API scope chain দেখায় না, তাই এই টুল preset-only, free-form কোড না — দেখানো scope structure (কোন বক্সে কোন variable আছে) হাতে বানানো, প্রতিটা preset-এর সাথে ঠিক মিলিয়ে। তবে বক্সের ভেতরের সবকিছু আসল: প্রতিটা value, প্রতিটা console line, আর প্রতিটা ReferenceError মেসেজ preset-এর কোড সত্যিই একটা sandboxed iframe-এ চলার সময় লাইভ ধরা।
snapshot(['global'], {});
if (true) {
var x = 1;
let y = 2;
console.log('inside the block, x =', x, 'y =', y);
snapshot(['global', 'if-block'], { x: x, y: y });
}
console.log('outside the block, x =', x);
console.log('y does not exist out here — it only ever lived inside the if-block');
snapshot(['global'], { x: x });Scope আর hoisting সোর্স কোডের নিজের বৈশিষ্ট্য, চলমান engine-এর না — call stack পড়ার জন্য যেমন একটা runtime API আছে, scope chain দেখানোর জন্য তেমন কিছু নেই, তাই Event Loop আর Recursion ভিজুয়ালাইজার যেভাবে যেকোনো কোড থেকে নিজে বের করে, এই টুল সেভাবে পারে না। প্রতিটা preset-এর scope বক্স তার আসল কোডের সাথে হাতে মেলানো। যা সম্পূর্ণ আসল থাকে: দেখানো প্রতিটা variable value, প্রতিটা console line, আর কোনো let/const-কে তার declaration-এর আগে access করলে JavaScript যে ঠিক ReferenceError দেয় ("temporal dead zone") — সবকিছু preset-এর নিজের আসল কোডের অর্থপূর্ণ জায়গায় বসানো একটা ছোট snapshot() helper দিয়ে লাইভ ধরা, একটা sandboxed iframe-এ সত্যিই চলার সময় — engine আসলে যা করত তার জায়গায় বানানো টেক্সট না।