CSS መርማሪ

የአቀማመጥ ችግርን በምታስተካክልበት ጊዜ፣ የምታደንቀውን ዲዛይን በሪቨርስ-ኢንጂነሪንግ በምታጠናበት ጊዜ፣ ወይም የስፔሲንግ እና የታይፖግራፊ ዋጋዎችን በፍጥነት በምታረጋግጥበት ጊዜ፣ CSS መርማሪ የሚያስፈልግህን ሁሉ በንጹህ፣ ተንሳፋፊ ፓነል ውስጥ ይሰጥሃል። ከብራውዘር DevTools በተለየ፣ መንገድህን አይዘጋም — የተቆለፉ ፓነሎች የሉም፣ የቪውፖርት መጠን መቀየር የለም። ጠቋሚህን ማንቀሳቀስ፣ መጫን እና መመርመር ብቻ ነው። መሳሪያው የተሰሉ ስታይሎችን (ብራውዘሩ በትክክል የሚያሳየውን) ያሳያል፣ የተጻፈውን CSS ብቻ አይደለም። ይህ ማለት ውርስ፣ ስፔሲፊሲቲ እና ካስኬዲንግ ከተፈቱ በኋላ ያሉትን ትክክለኛ ዋጋዎች ታያለህ — ተጠቃሚዎች በስክሪናቸው ላይ የሚያዩትን የሚነኩ ተመሳሳይ ዋጋዎች።

የኤለመንት ምርመራ የገጹን reflow ወይም repaint በጭራሽ አያስከትልም፣ ስለዚህ የስክሮል ቦታን፣ አኒሜሽኖችን ወይም የJavaScript ሁኔታን ሳታውክ በነጻነት መመርመር ትችላለህ። እንደ ::before እና ::after ያሉ pseudo-elements ጭምር ይደገፋሉ — በወላጅ ኤለመንት ላይ ጠቋሚህን ስታንቀሳቅስ ፓነሉ የተፈጠረውን ይዘት ስታይሎች ከራሱ ኤለመንት ስታይሎች ተለይተው ያሳያል። የCSS custom properties (ተለዋዋጮች) ወደ መጨረሻ የተሰላ ዋጋቸው ይፈታሉ፣ ነገር ግን ፓነሉ ያንን ዋጋ ያመነጨውን የተለዋዋጭ ስም ጭምር ያሳይሃል፣ ስለዚህ አንድን ቀለም ወይም ስፔሲንግ ዋጋ ወደ ዲዛይን-ቶክን ምንጩ መከታተል ትችላለህ፣ ጥሬ የፒክሰል ቁጥር ብቻ ከማየት ይልቅ።

በዕለት ተዕለት አጠቃቀም፣ አብዛኞቹ ገንቢዎች በአንድ ክፍለ ጊዜ ውስጥ CSS መርማሪን ደርዘኖች ጊዜ ይጠቀማሉ — ለምን margin እንደወደቀ ለማረጋገጥ፣ ወደ ስታይልሺት ከመቅዳቱ በፊት የhex ኮድ ለማረጋገጥ፣ ወይም አንድ media query breakpoint ማድረግ የነበረበትን ስታይሎች በትክክል መተግበሩን ለማረጋገጥ። ተንሳፋፊ ፓነል እንጂ የብራውዘር-አቀፍ ሁነታ ስላልሆነ፣ ታብን በመቀየር የራስህን ኮድ አርታኢ ወይም የዲዛይን ፋይል ስታረጋግጥ ክፍት አድርገህ ልታቆየው ትችላለህ፣ ከዚያም ቦታህን ሳታጣ ወደ ተመሳሳዩ ኤለመንት ላይ በቀጥታ መመለስ ትችላለህ።