ክፍል ፈላጊ አንድ ድረ-ገጽ የትኛውን frontend framework እንደሚጠቀም ራስ-ሰር ይለያል እና ሙሉ ክፍል ዛፉን ያሳያል። የ React፣ Vue፣ Angular እና Svelte ክፍሎች ስሞቻቸውን፣ props/state ዋጋዎቻቸውን እና የውቅር ተዋረድን ይመልከቱ — ሁሉም ከአንድ ምርመራ ፓነል።
አንድ ድረ-ገጽ በየትኛው framework እንደተገነባ ገምተህ ታውቃለህ? ወይም ውስብስብ የሆነ UI ወደ ኮምፖነንቶች እንዴት እንደሚከፋፈል ማየት ፈልገህ ታውቃለህ? Component Detector ሁለቱንም ጥያቄዎች ወዲያውኑ ይመልስልሃል። ገጹን ለframework-ተኮር ምልክቶች (React fiber nodes፣ Vue component instances፣ Angular zone markers፣ Svelte component metadata) ይቃኛል፣ framework-ውን፣ ስሪቱን እና ሙሉውን የኮምፖነንት ዛፍ ይለያል። ለReact እና Vue፣ ከዚህ በላይ ይሄዳል — የኮምፖነንት props እና state ዋጋዎችን ያሳያል፣ ስለዚህ የትኛው ዳታ እያንዳንዱን የUI ክፍል እንደሚነዳ መረዳት ትችላለህ።
በዛፉ ውስጥ ማንኛውንም ኮምፖነንት ተጫን፣ በገጹ ላይ ያለውን ተመሳሳይ DOM ኤለመንት ለማብራት፣ ወይም በገጹ ላይ ያለ ኤለመንትን ተጫን፣ በዛፉ ውስጥ ያለውን ኮምፖነንት ለማግኘት። እንደ React DevTools ወይም Vue DevTools ነው፣ ነገር ግን በምትመለከተው በእያንዳንዱ ፕሮጀክት ላይ የተለየ framework-ተኮር extension መጫን ሳያስፈልግ በቀላል ተንሳፋፊ ፓነል መልክ በገጽህ ውስጥ የተገነባ ነው።
ማወቂያው የኮምፖነንት እና የተለዋዋጭ ስሞች በተዘበራረቁበት minified፣ production-bundled ድረ-ገጾች ላይ እንኳን ይሰራል — መሳሪያው መነበብ በሚችል ምንጭ ላይ ከመተማመን ይልቅ structural ምልክቶችን ይፈልጋል፣ ለዚህም ነው source map ፈጽሞ ባልላከባቸው ድረ-ገጾች ላይ መስራቱን የሚቀጥለው። ከአራቱ ዋና ዋና frameworks ባሻገር፣ እንደ Next.js እና Nuxt ያሉ በላያቸው ላይ የተደረደሩ meta-frameworks ጭምር ይለያል፣ ከመሠረታዊው React ወይም Vue runtime እንደ ተለየ ንብርብር አድርጎ ያሳውቃል። ይህ ወደማታውቀው codebase ወይም ተፎካካሪ ድረ-ገጽ በምትደርስበት ጊዜ፣ ጠለቅ ብለህ ከመግባትህ በፊት የምታየውን ለመረዳት ፈጣን የመጀመሪያ እርምጃ ያደርገዋል።
React (Next.js፣ Gatsby፣ Remix ጨምሮ)፣ Vue (Nuxt ጨምሮ)፣ Angular፣ Svelte (SvelteKit ጨምሮ)፣ Preact፣ Solid እና ሌሎች frameworks ራስ-ሰር ይለያል። የ framework ስም፣ ትክክለኛ ስሪት ቁጥር እና rendering ሁነታ ያሳያል።
ሙሉ ክፍል ተዋረድ በተደባለቅ ዛፍ እይታ ያሳያል። ከፍተኛ-ደረጃ App ክፍል Navbar፣ NavLinks፣ የግል Link ክፍሎችን እንዴት እንደያዘ ይመልከቱ።
ለ React እና Vue ክፍሎች ለእያንዳንዱ ክፍል የተላለፉ አሁኑ props እና state ዋጋዎችን ይመልከቱ። Dashboard ክፍል title="Overview"፣ loading=false እና columns=2 እንደተቀበለ ይመልከቱ።
በዛፍ ውስጥ ማንኛውንም ክፍል ጠቅ ያድርጉ ተዛማጅ DOM ኤለመንቱን በገጹ ላይ ለማድመቅ። ወይም በገጹ ላይ ኤለመንት ጠቅ ያድርጉ ክፍሉን በዛፍ ውስጥ ለማግኘት።
በገጹ ላይ የተሰጡ ጠቅላላ ክፍሎች ብዛት፣ ስንት ልዩ ናቸው ከተደገሙ ግልባጮች ጋር፣ እና የትኞቹ ክፍሎች ብዙ ጊዜ እንደሚታዩ ይመልከቱ።
በ minified ምርት builds ላይ frameworks ይለያል። የ React fiber ዛፍ፣ Vue __vue__ ምልክቶች እና Angular ng ባህሪያት በምርት ሁነታ ይቆያሉ።
ማንኛውንም ድረ-ገጽ ይጎብኙ እና React፣ Vue፣ Angular ወይም Svelte የተገነባ መሆኑን ወዲያውኑ ይወቁ — ትክክለኛ ስሪት ጨምሮ።
ምርት አፕሊኬሽኖች UIቸውን ወደ ክፍሎች እንዴት እንደሚቀንሱ ያጥኑ።
ክፍል በትክክል አይሰጥም? ምን ውሂብ እንደተቀበለ ለማየት props እና state ይፈትሹ።
ለ frontend ቃለ-መጠይቅ ይዘጋጃሉ? ስለ ገሃድ ክፍል ቅጦች ለማየት ምርት ጣቢያዎችን ያሰሱ።
በተለያዩ frameworks የተገነቡ ተመሳሳይ ምርቶችን ይጎብኙ እና ክፍል መዋቅሮቻቸውን ያወዳድሩ።
የ DevSuite Pro ተንሳፋፊ ዶክ ይክፈቱ እና ክፍል ፈላጊ አዶን ጠቅ ያድርጉ። መሳሪያው ገጹ DOM ለ framework-ተኮር ምልክቶች ይቃኛል።
ፓነል ራስጌ የተገኘውን framework፣ ስሪቱን እና rendering ሁነታን ያሳያል። ምንም framework ካልተገኘ ገጹን vanilla HTML/CSS/JS ሪፖርት ያደርጋል።
ተዋረድ ለመፈተሽ ክፍሎችን በዛፍ ውስጥ ያስፋፉ እና ይደብቁ። ክፍል ስሞች ከማስገቢያ ጥልቀት ጋር ይታያሉ።
ከታች ባለው ዝርዝር ክፍል ውስጥ አሁኑ props እና state ዋጋዎችን ለማየት ማንኛውንም ክፍል ጠቅ ያድርጉ።
ተዛማጅ DOM ኤለመንቱን ቀለም ያለው ድንበር ለማድመቅ ማንኛውንም ክፍል ጠቅ ያድርጉ።
DevSuite Pro ን በነፃ ይጫኑ እና 64+ የገንቢ መሳሪያዎችን ለአሳሽዎ ይክፈቱ።
