Page Outliner ساختار کامل DOM هر صفحه وب را به صورت یک overlay درختی بصری رندر میکند — مستقیماً روی خود صفحه. هر عنصر HTML یک برچسب رنگی با نام تگ دریافت میکند و عمق تودرتو از طریق تورفتگی و خطوط اتصال آشکار میشود.
DevTools مرورگر DOM را به صورت یک درخت متنی در یک پانل جانبی، جدا از چیدمان بصری نشان میدهد. Page Outliner این شکاف را با پروجکت کردن ساختار DOM مستقیماً روی صفحه پر میکند. هر عنصر یک badge رنگی کوچک با نام تگ (div، section، nav، h1، p، button و غیره) دریافت میکند. این کار درک ساخت یک صفحه را در یک نگاه بسیار آسان میکند — بدون باز کردن DevTools یا خواندن کد منبع HTML خام.
هر عنصر مرئی در صفحه یک badge تگ رنگی دریافت میکند که نام تگ HTML آن را نشان میدهد. از بیرونیترین عناصر html و body تا spanها، لینکها و دکمههای جداگانه — هیچچیز پنهان نیست.
هر نوع عنصر رنگ پسزمینه مشخصی برای badge خود دریافت میکند. عناصر ساختاری آبی، ناوبری کهربایی، عناوین بنفش، پاراگرافها خاکستری، لینکها زرد، دکمهها فیروزهای.
روی هر badge تگ hover کنید تا عنصر مربوطه با یک overlay نیمهشفاف برجسته شود که ابعاد دقیق آن (عرض × ارتفاع به پیکسل) را نشان میدهد.
عناصر عمیقاً تودرتو از لبه چپ تورفتگی بیشتری دارند و روابط تودرتو را فوراً مرئی میکنند. در یک نگاه ببینید آیا صفحه wrapper div های بیش از حد دارد یا ساختار کمعمق تمیز.
Overlayها بهصورت مطلق قرار میگیرند و روی چیدمان صفحه، اسکرول یا رفتار JavaScript تأثیر نمیگذارند. برچسبهای badge کوچک و نیمهشفاف هستند.
روی badge هر عنصر container کلیک کنید تا فرزندانش جمع شوند. برای تمرکز روی یک بخش خاص بدون غرق شدن در کل درخت DOM صفحه مفید است.
به یک صفحه وب پیچیده رسیدهاید و نیاز دارید بفهمید چگونه ساخته شده؟ Page Outliner کل سلسلهمراتب DOM را در یک نگاه نشان میدهد.
تودرتوی بیش از حد div نوشتن CSS را سختتر و رندر صفحه را کندتر میکند. اگر 6+ سطح badge رنگی روی هم دور یک بلوک متن ساده میبینید، markup نیاز به سادهسازی دارد.
آیا صفحه از عناصر معنایی صحیح استفاده میکند؟ به دنبال badge های header، nav، main، article، section و footer باشید.
از هر وبسایت خوب ساختهشده بازدید کنید و Page Outliner را فعال کنید تا ببینید تیمهای frontend چگونه HTML خود را ساختار میدهند.
ابتدا از Page Outliner استفاده کنید تا شناسایی کنید کدام عناصر وجود دارند و کجا هستند، سپس به CSS Inspector یا Measure Distance بروید.
داک شناور DevSuite Pro را باز کنید و روی آیکون Page Outliner کلیک کنید. ابزار فوراً DOM صفحه را اسکن کرده و badge های تگ را روی هر عنصر مرئی رندر میکند.
Badge های رنگی در گوشه بالا-چپ هر عنصر ظاهر میشوند و نام تگ آن را نشان میدهند. ساختار تودرتو از طریق تورفتگی مرئی است.
موس را روی هر badge ببرید تا عنصر مربوطه برجسته شود. این نام تگ انتزاعی را به موقعیت بصری آن در صفحه متصل میکند.
روی badge container کلیک کنید تا badge های فرزندانش جمع شوند. این به شما اجازه میدهد روی مناطق خاص صفحه تمرکز کنید.
روی آیکون Page Outliner در داک کلیک کنید تا همه overlayها حذف شوند. هیچ اثری باقی نمیماند.
DevSuite Pro را به صورت رایگان نصب کنید و بیش از ۳۹ ابزار توسعه را برای مرورگر خود باز کنید.
