عارض شجرة JSON

ما هو عارض شجرة JSON؟#

يحلّل عارض شجرة JSON مستندًا من JSON ويرسمه كـ مخطط قابل للطي، تمامًا كما يعرض مستكشف الملفات شجرة مجلدات. فبدلًا من قراءة جدار طويل من النص المُزاح ومعدّ الأقواس لمعرفة ما المتداخل داخل ما، ترى البنية بنظرة واحدة: الكائنات والمصفوفات فروع يمكنك النقر عليها لتفتحها أو تغلقها، والقيم الورقية — السلاسل والأرقام والقيم المنطقية وnull — تجلس في الأطراف.

هذا يهم أكثر ما يهم حين يكون المستند عميقًا أو غير مألوف. فاستجابة واجهة برمجية واحدة قد تبلغ بسهولة مئات الأسطر؛ وقد يحتوي ملف إعداد على خصائص متداخلة أربع أو خمس مستويات تحت أسماء متشابهة. في منسِّق مسطّح تُمرِّر وتفقد مكانك. في الشجرة تطوي كل شيء ما عدا الفرع الذي يهمّك، ويتوقف الباقي عن منافسة انتباهك.

تحلّل هذه الصفحة JSON في المتصفح وتعرض شجرة قابلة للطي عقدةً عقدة، باستخدام محتوى نصي عادي بدلًا من تفسير المدخلات كـ HTML — لذا حتى المستند الذي يحتوي على وسوم <script> أو سلاسل تشبه HTML يُعرض خاملًا، لا مُنفَّذًا.

كيفية الاستخدام#

1. الصق JSON في لوحة الإدخال على اليسار. يتم التحليل أثناء كتابتك.
2. تظهر الشجرة على اليمين. يُظهر كل كائن أو مصفوفة مفتاح تبديل ▼، وقوسه الافتتاحي ({ أو [)، وعدد المدخلات بداخله، وقوسه الإغلاقي. انقر المفتاح — أو الأقواس أنفسها — لطيّ ذلك الفرع أو فرده.
3. استخدم توسيع الكل لفتح كل فرع وصولًا إلى أوراقه، وطي الكل لتقليص المستند كله إلى الجذر فقط. الطيّ هو كيف تحصل على نظرة عامة بسطر واحد على حمولة منتشرة قبل التعمّق.
4. يُظهر الترويسة على اليمين عدد مدخلات الجذر ذات المستوى الأعلى (مثلًا 5 عناصر)، فتعرف بنظرة حجم المستند.
5. يحمِّل مثال مستندًا تجريبيًا متداخلًا؛ ويُفرغ مسح كلتا اللوحتين.

الميزات الرئيسية#

• طي أي فرع بشكل مستقل. كل حاوية تُفتح وتُغلق بمفردها، فيمكنك إبقاء كائن فرعي واحد مفتوحًا كمرجع بينما الباقي مطوي.
• أدلة العمق. تُزاح الأبناء تحت خط دليل عمودي، فيصبح من الواضح أي قوس تنتمي إليه مدخلةٌ ما حتى في المستندات الكثيفة.
• عرض آمن من XSS. تُكتب كل تسمية وقيمة كمحتوى نصي عادي — لا تُحلَّل المدخلات أبدًا كـ HTML. السلسلة ذات المظهر الخبيث تُعرض ببساطة كنص.
• قيم ورقية أمينة. تحتفظ السلاسل بعلامات الاقتباس المحيطة بها وتُعرض الأرقام تمامًا كما يكتبها JSON.stringify، فيبقى true (المنطقي) مميَّزًا بصريًا عن "true" (السلسلة).
• عدّ حي. تُبلِّغ الترويسة بعدد المدخلات التي يحويها الجذر، مُحدَّثًا أثناء التحرير.

مثال عملي#

حمِّل مثال فتُظهر الشجرة المُحلَّلة كائن جذر بخمس مدخلات ذات مستوى أعلى:

▼ { 5
    "name": "ArpGate DevTools"
    "version": 1
    "active": true
  ▼ "tags": [ 3 ]
  ▼ "features": { 2 }

مدخلتان من تلك المدخلات هما نفسهما حاويتان. يُظهر فرد tags المصفوفة ذات العناصر الثلاثة ("json"، "encoding"، "crypto")، ويكشف فرد features أن static يساوي true بينما backend يساوي null — تمييزٌ تُبرزه الشجرة صراحةً بدلًا من تركك تخمّن من تفريغ مسطّح.

إن كنت تهتم فقط بالكائن الفرعي features، انقر كل ▼ أخرى على المستوى الأعلى لطيّها بعيدًا. يبقى العدد 5 على الجذر دقيقًا، ويجعل دليل العمق واضحًا أن static وbackend ينتميان إلى features، لا إلى الجذر.

الأسئلة الشائعة#

هل تُعدِّل هذه الأداة JSON أو تعيد تنسيقه؟#

لا. الشجرة عرض للقراءة فقط للقيمة المُحلَّلة. لا تُعاد كتابة نص مدخلاتك أبدًا، ولا تُزاح، ولا تُصدَر. إن أردت تنسيق المستند للطباعة الجميلة كنص، استخدم المنسِّق بدلًا من ذلك؛ فهذه الأداة للتنقّل لا لل تطبيع.

لماذا لا تزال السلاسل تحمل علامات الاقتباس في الشجرة؟#

لأن هذا كيف يميِّز JSON نفسه بين سلسلة وكلمة مفتاحية مجردة. دون علامات الاقتباس، سيبدو true و"true" متطابقين، وكذلك null والسلسلة "null". الإبقاء على علامات الاقتباس (تمامًا كما يُنتجها JSON.stringify) يحافظ على ذلك التمييز بنظرة.

كيف يتعامل مع المستندات الكبيرة جدًا؟#

يتم التحليل والعرض بالكامل في متصفحك، فلا رفع ولا دورة خادم. للإعدادات واستجابات الواجهات البرمجية النموذجية يكون فوريًّا. أما لمستند بحجم عدة ميغابايت فيتعين على الشجرة إنشاء عقدة لكل قيمة، مما قد يصير بطيئًا — فروعَ لا تحتاجها لتبقى العقد الظاهرة في عدد يمكن التحكم به.

هل ستُعرَض السلسلة التي تحتوي على HTML كـ HTML؟#

أبدًا. تكتب الأداة كل قيمة كمحتوى نصي، يعامله المتصفح كمحارف خاملة. السلسلة التي تحتوي صدفةً على <script> أو <img onerror=...> تُعرض حرفيًّا كنص — لا تُحلَّل كترميز ولا يمكنها العمل.