Page Outliner የማንኛውንም ድረ-ገጽ የተሟላ የDOM መዋቅር በቀጥታ በገጹ ላይ እንደ ተደራራቢ የዛፍ ቅርጽ ያሳያል። እያንዳንዱ የHTML ኤለመንት የትግ (tag) ስሙን የሚያሳይ ባለቀለም ባጅ ያገኛል፣ እና የውስጥ አወቃቀሩ (nesting) በዝቅታ እና ተያያዥ መስመሮች አማካኝነት በግልጽ ይታያል። ይህ ልክ የአሳሹን DevTools "Elements" ፓነል በራሱ በገጹ ላይ እንደ ማየት ነው።
የአሳሽ DevTools የDOM መዋቅርን ከእይታ ሌይአውቱ ተለይቶ በጎን ፓነል ውስጥ እንደ ጽሁፍ ያሳያሉ። Page Outliner ይህንን ልዩነት በማስወገድ የDOM መዋቅርን በቀጥታ በገጹ ላይ ያሳያል። እያንዳንዱ ኤለመንት (div, section, nav, h1, p, button, ወዘተ) በኤለመንቱ የላይኛው ግራ ጥግ ላይ ባለቀለም ባጅ ያገኛል። በውስጥ የተቀመጡ ኤለመንቶች በምስል ዝቅ ብለው ይታያሉ፣ ይህም የዛፍ ቅርጽ አወቃቀሩን ወዲያውኑ ግልጽ ያደርገዋል። ይህ አንድ ገጽ እንዴት እንደተገነባ በሰከንዶች ውስጥ ለመረዳት ያስችላል—ለምሳሌ ሄደሩ አምስት ሊንኮችን የያዘ ናቪጌሽን እንዳለው፣ ዋናው ይዘት ደግሞ ሶስት ሰክሽኖችን እንደያዘ ሁሉንም ያለ DevTools ወይም ጥሬ የHTML ኮድ ሳይመለከቱ ማየት ይችላሉ።
በገጹ ላይ የሚታይ እያንዳንዱ ኤለመንት የHTML ተግ ስሙን የያዘ ባለቀለም ባጅ ያገኛል። ከውጫዊው html እና body ኤለመንቶች ጀምሮ እስከ ትናንሽ ስፓኖች፣ ሊንኮች እና ቁልፎች ድረስ ምንም የሚደበቅ ነገር የለም። ይህ ተደራራቢ እይታ አጠቃላይ የኤለመንት ተዋረድን እንደ ካርታ ያሳያል።
እያንዳንዱ የኤለመንት አይነት ለባጁ የተለየ የጀርባ ቀለም አለው። መዋቅራዊ ኤለመንቶች (header, main, footer) በሰማያዊ፣ ናቪጌሽን በቢጫ፣ አርዕስቶች በሐምራዊ፣ አንቀጾች በግራጫ፣ ሊንኮች በወርቃማ፣ ቁልፎች በሲያን፣ እና ምስሎች በሮዝ። ጽሁፉን ሳያነቡ ቀለሙን በማየት ብቻ የኤለመንቱን አይነት መለየት ይችላሉ።
በማንኛውም ባጅ ላይ ሲያንዣብቡ ተጓዳኙ ኤለመንት መጠኑን (ወርድ እና ቁመት በፒክሰል) በሚያሳይ ግልጽ ተደራራቢ ጎልቶ ይታያል። የኤለመንቱ ድንበር ይገለጻል እና ባጁ በግልጽ ይታያል—ይህም የትኛው ባጅ ለማንኛው ኤለመንት እንደሆነ ለማወቅ ቀላል ያደርገዋል።
በጣም ወደ ውስጥ የገቡ ኤለመንቶች ከግራ ጠርዝ ዝቅ ብለው ይታያሉ፣ ይህም የውስጥ ዝምድናቸውን ወዲያውኑ ግልጽ ያደርገዋል። አንድ ገጽ በጣም ብዙ የውስጥ divs (ከ5 በላይ ደረጃዎች) እንዳሉት ወይም ንጹህ እና ቀጥተኛ መዋቅር እንዳለው በጨረፍታ ይመልከቱ። ተያያዥ መስመሮች የላቀ-ታች ዝምድናን ያሳያሉ።
ተደራራቢዎቹ ባጆች በገጹ ሌይአውት፣ አሸበሻብ (scrolling) ወይም በJavaScript ባህሪ ላይ ምንም ተጽዕኖ አይኖራቸውም። የባጅ ምልክቶቹ ትናንሽ እና በከፊል ግልጽ በመሆናቸው የገጹን ይዘት ማየት ይችላሉ። በማንኛውም ጊዜ በማጥፋት ወደ መደበኛው ገጽ መመለስ ይቻላል።
የውስጥ ኤለመንቶችን ለመደበቅ የአንድን ኮንቴይነር ባጅ ይጫኑ። ይህ አጠቃላይ የገጹ DOM ዛፍ በጣም እንዳይበዛብዎ በተወሰነ ክፍል ላይ ብቻ እንዲያተኩሩ ይረዳል። ለመዘርጋት እንደገና ይጫኑ።
ለጥ መዋቅር ላይ ሲደርሱ እና እንዴት እንደተገነባ ለማወቅ ሲፈልጉ፣ Page Outliner አጠቃላይ የDOM ተዋረድን ያሳየዎታል—የትኞቹ ክፍሎች ምን ይዘት እንደያዙ፣ ናቪጌሽኑ እንዴት እንደተገነባ እና ዋናው ይዘት የት እንደሚጀምር እና እንደሚጨርስ።
በጣም ብዙ የውስጥ divs የCSS አጻጻፍን አስቸጋሪ እና የገጽ አፈጻጸምን ዝቅተኛ ያደርገሉ። ለአንድ ቀላል የጽሁፍ ክፍል ብዙ የተደረረቡ ባለቀለም ባጆች ካዩ፣ መዋቅሩ መቅለል እንዳለበት ያውቃሉ።
ገጹ ትክክለኛ የሴማንቲክ ኤለመንቶችን መጠቀሙን ያረጋግጡ። እንደ header, nav, main, article, section, እና footer ያሉ ባጆችን ይፈልጉ። ሁሉም ነገር div ብቻ ከሆነ ገጹ የሴማንቲክ መዋቅር ይጎድለዋል ማለት ነው—ይህም SEOን እና ተደራሽነትን ይጎዳል።
ስመ-ጥሩ ድረ-ገጾችን (እንደ Stripe, Linear, Vercel ያሉ) ይጎብኙ እና የኮምፒውቲንግ ክፍሎቻቸው ዌብ ገንቢዎች HTML ን እንዴት እንደሚያዋቅሩ ይመልከቱ። በእውነተኛ ገጾች ላይ የሌይአውት ጥበቦችን ይማሩ።
ተመሳሳይ የሆኑ የገጽ ክፍሎች ተመሳሳይ የHTML መዋቅር እና ክፍሎች (classes) መጠቀማቸውን ያረጋግጡ። በገጹ ላይ ያሉትን አለመጣጣሞች በDOM ደረጃ ለመለየት ይረዳል።
የDevSuite Pro ተንሳፋፊ ዶክን ይክፈቱ እና የPage Outliner አዶን ይጫኑ። መሣሪያው ወዲያውኑ የገጹን DOM ይቃኛል እና በሚታዩ ኤለመንቶች ላይ የባጅ ምልክቶችን ያሳያል።
በእያንዳንዱ ኤለመንት የላይኛው ግራ ጥግ ላይ ባለቀለም ባጆች (div, section, h1, p, ወዘተ) ይታያሉ። የውስጥ አወቃቀሩ በባጆቹ አቀማመጥ እና ዝቅታ (indentation) ይታያል።
በማንኛውም ባጅ ላይ አይጥዎን ያንቀሳቅሱ። ተጓዳኙ ኤለመንት ጎልቶ ይታያል እና መጠኖቹ ይገለጻሉ። ይህ በባጁ ላይ ያለውን ስም በገጹ ላይ ካለው ትክክለኛ ቦታ ጋር ያገናኘዋል።
የውስጥ ኤለመንቶችን ባጅ ለመደበቅ የአንድን ኮንቴይነር ባጅ ይጫኑ። ይህ የገጹን መዋቅር በከፍተኛ ደረጃ ብቻ ለማየት እና ምስላዊ መጠባበቅን ለመቀነስ ይረዳል።
ሁሉንም ተደራራቢ ምልክቶች ለማስወገድ በዶክ ላይ ያለውን የPage Outliner አዶን እንደገና ይጫኑ። ገጹ ወደ ቀድሞ ሁኔታው ይመለሳል።
DevSuite Pro ን በነፃ ይጫኑ እና 39+ የገንቢ መሳሪያዎችን ለአሳሽዎ ይክፈቱ።
