Pixel Ruler

ഏത് വെബ് പേജിലും പിക്സൽ അളക്കാൻ Pixel Ruler: എലമെന്റ് വലുപ്പത്തിനും അകലത്തിനും സ്ക്രീൻ റൂളർ.

Pixel Ruler സ്ക്രീനിൽ ഒരു റൂളർ വെക്കുന്നു, ബ്രൗസറിലുള്ള എന്തും അളക്കാൻ അനുവദിക്കുന്നു. ടൂൾബാർ ഐക്കണിൽ ക്ലിക്ക് ചെയ്യുക, ലേഔട്ടിന് കുറുകെ മൗസ് വലിച്ചിടുക, കൃത്യമായ ദൂരം CSS പിക്സലിൽ വായിക്കുക. ഒരു എലമെന്റിന് മുകളിൽ കഴ്സർ വെച്ചാൽ അതിന്റെ വീതി, ഉയരം, പാഡിംഗ്, ചുറ്റുമുള്ള ബ്ലോക്കുകളിലേക്കുള്ള അകലം എന്നിവ കിട്ടും. ബ്രൗസർ പേജ് വരയ്ക്കാൻ ഉപയോഗിക്കുന്ന അതേ CSS പിക്സലുകളാണ് ഈ എക്സ്റ്റൻഷൻ വായിക്കുന്നത്, അതുകൊണ്ട് സംഖ്യകൾ DevTools കാണിക്കുന്നതുമായി കൃത്യമായി ഒത്തുപോകും. തുറക്കാൻ പാനലില്ല, എക്സ്പോർട്ട് ചെയ്യാൻ സ്ക്രീൻഷോട്ടില്ല, കണക്കുകൂട്ടലുമില്ല. നിങ്ങൾ ഇപ്പോൾ നോക്കിക്കൊണ്ടിരിക്കുന്ന സൈറ്റിന് മുകളിൽ ഒരു സ്ക്രീൻ റൂളർ, അത്രമാത്രം. ഒരൊറ്റ ഓവർലേ, മാറിമാറി തുറക്കേണ്ടതൊന്നുമില്ല: 📏 അമർത്തിപ്പിടിച്ച് വലിച്ച് പേജിലെ ഏത് രണ്ട് ബിന്ദുക്കൾക്കിടയിലെയും ദൂരം അളക്കുക. 📏 ഒരു എലമെന്റിലേക്ക് ചൂണ്ടി അതിന്റെ വലുപ്പം, പാഡിംഗ്, അയൽ എലമെന്റുകളിൽ നിന്നുള്ള അകലം എന്നിവ കാണുക. 📏 ലംബവും തിരശ്ചീനവുമായ ഗൈഡുകൾ ഇട്ട് അവയ്ക്കൊപ്പം ബ്ലോക്കുകൾ വിന്യസിക്കുക. റഫറൻസിനായി റൂളർ എപ്പോഴും സ്ക്രീനിലുണ്ട്; ഒരു കീ അമർത്തിയാൽ കഴ്സറിന് താഴെയുള്ള എലമെന്റിന്റെ CSS സെലക്ടർ സഹിതം ഫലം ക്ലിപ്പ്ബോർഡിലേക്ക് പകർത്തും. മൂന്ന് ഘട്ടങ്ങളിൽ തുടങ്ങാം: 1. എക്സ്റ്റൻഷൻ ഇൻസ്റ്റാൾ ചെയ്ത് ടൂൾബാറിൽ പിൻ ചെയ്യുക. 2. നിങ്ങൾ ജോലി ചെയ്യുന്ന പേജ് തുറന്ന് ഐക്കണിൽ ക്ലിക്ക് ചെയ്യുക. 3. വലിക്കുക, ചൂണ്ടുക, അളക്കുക — കഴിഞ്ഞാൽ Esc രണ്ടുതവണ അമർത്തുക. ഫ്രണ്ട്-എൻഡ് ഡെവലപ്പർമാർ ലേഔട്ട് മോക്കപ്പുമായി ഒത്തുനോക്കാൻ ഇത് ഉപയോഗിക്കുന്നു. കൈമാറിക്കിട്ടിയ ഡിസൈൻ ഫയൽ പഴയതായിക്കഴിഞ്ഞാൽ ഡിസൈനർമാർ ഇത് പേജ് റൂളറായി ഉപയോഗിക്കുന്നു. "ബട്ടൺ അൽപ്പം താഴെയാണെന്ന് തോന്നുന്നു" എന്നതിന് പകരം QA എൻജിനീയർമാർ യഥാർത്ഥ സംഖ്യയോടെ ബഗ് രേഖപ്പെടുത്തുന്നു. ലൈവ് സൈറ്റിൽ വേഗത്തിൽ പിക്സൽ അളവ് വേണ്ട ആർക്കും രണ്ട് ക്ലിക്കിൽ അത് കിട്ടും. ഈ വെബ് റൂളർ നൽകുന്നത്: - ഏത് രണ്ട് ബിന്ദുക്കൾക്കിടയിലെയും ദൂരം, പിക്സലിൽ - പേജിലെ ഏത് എലമെന്റിന്റെയും വീതിയും ഉയരവും - പാഡിംഗ്, മാർജിൻ, അയൽ എലമെന്റുകൾക്കിടയിലെ വിടവ് - ഒരു എലമെന്റിൽ നിന്ന് ചുറ്റുമുള്ള ബ്ലോക്കുകളിലേക്കുള്ള അകലം - വിൻഡോയുടെ മുകൾ, ഇടത് അരികുകളിലെ സ്കെയിലുകൾ - അളന്ന എലമെന്റിന്റെ ടാഗ്, ക്ലാസുകൾ, CSS സെലക്ടർ - വിന്യാസം പരിശോധിക്കാൻ വീണ്ടും ഉപയോഗിക്കാവുന്ന ഗൈഡുകൾ കീബോർഡ് നിയന്ത്രണം കഴ്സർ ഇളകാതെ നിർത്തുന്നു: → Shift അളവ് തിരശ്ചീന അല്ലെങ്കിൽ ലംബ അക്ഷത്തിൽ ഉറപ്പിക്കുന്നു → ആരോ കീകൾ നിലവിലെ ബിന്ദുവിനെ കൃത്യം 1 px നീക്കുന്നു → Esc നിലവിലെ അളവ് മായ്ക്കുന്നു, രണ്ടാമത്തെ Esc പേജ് തിരികെ നൽകുന്നു → ഒരൊറ്റ ഷോർട്ട്കട്ട് ഫലം ക്ലിപ്പ്ബോർഡിലേക്ക് പകർത്തുന്നു ഒരിക്കൽ ഇൻസ്റ്റാൾ ചെയ്താൽ മതി — Windows, Linux, ChromeOS ഉപയോക്താക്കൾ ഉപയോഗിക്കുന്ന അതേ പിക്സൽ റൂളർ, Mac ഉപയോക്താക്കൾ ഉപയോഗിക്കുന്ന അതേ പിക്സൽ റൂളർ നിങ്ങൾക്കും കിട്ടും; കാരണം ഈ ഉപകരണം ഓപ്പറേറ്റിംഗ് സിസ്റ്റത്തിലല്ല, ബ്രൗസറിലാണ് ജീവിക്കുന്നത്. തിരഞ്ഞുനടക്കാൻ പിക്സൽ റൂളർ ഡൗൺലോഡില്ല, ഇൻസ്റ്റാളറില്ല, അഡ്മിൻ അനുമതിയും വേണ്ട: എക്സ്റ്റൻഷൻ Chrome Web Store-ൽ നിന്ന് ഒറ്റ ക്ലിക്കിൽ എത്തും. തുടക്കത്തിൽ ഇത് സൗജന്യ പിക്സൽ റൂളർ ആണ്, എല്ലാ സവിശേഷതകളും എല്ലാവർക്കും തുറന്നിരിക്കുന്നു. വേറൊരു വിൻഡോയിൽ തുറക്കുന്ന സ്ക്രീൻ റൂളർ ആപ്പ്, പേജ് സ്ക്രോൾ ചെയ്ത നിമിഷം തെറ്റായ ഭാഗമാണ് അളക്കുക. ഈ പിക്സൽ റൂളർ ആപ്പ് ടാബിനുള്ളിൽ തന്നെ വരയ്ക്കപ്പെടുന്നു, ഉള്ളടക്കത്തിനൊപ്പം സ്ക്രോൾ ചെയ്യുന്നു. ഇത് ഓൺലൈൻ പിക്സൽ റൂളർ ആണ്: ലൈവ് പേജിലും സ്റ്റേജിംഗ് സെർവറിലും ക്ലയന്റ് സൈറ്റിലും ലോഗിന്നിന് പിന്നിലും ഇത് പ്രവർത്തിക്കും. വിൻഡോയുടെ നിശ്ചല ചിത്രം അളക്കുന്ന ഡെസ്ക്ടോപ്പ് പിക്സൽ റൂളറിന് അത് സാധ്യമല്ല. ഒരു ചിത്രമോ ലോഗോയോ പരിശോധിക്കണോ? ചിത്രങ്ങൾക്കുള്ള പിക്സൽ റൂളറായി ഇത് ഉപയോഗിക്കുക — ചിത്രത്തിന് മുകളിൽ കഴ്സർ വെച്ച് അതിന്റെ റെൻഡർ ചെയ്ത വലുപ്പം വായിക്കുക; അത് പലപ്പോഴും സോഴ്സ് ഫയലിലെ വലുപ്പമായിരിക്കില്ല. ചോദ്യങ്ങളും ഉത്തരങ്ങളും ചോ: DevTools തുറക്കാതെ സ്ക്രീനിലെ പിക്സലുകൾ എങ്ങനെ അളക്കാം? ഉ: ഐക്കണിൽ ക്ലിക്ക് ചെയ്ത് വലിക്കുക. ഓവർലേ പേജിന് മുകളിലാണ് ഇരിക്കുന്നത്, അതിനാൽ നിങ്ങൾ ശരിക്കും കാണുന്നത് തന്നെ അളക്കുന്നു — പാനൽ ഫോക്കസ് എടുത്തുകളയുമ്പോൾ അപ്രത്യക്ഷമാകുന്ന ഹോവർ അവസ്ഥകൾ ഉൾപ്പെടെ. ചോ: സ്ക്രീൻ പിക്സൽ റൂളർ, പിക്സൽ അളവുകോൽ, px റൂളർ, screen ruler, px ruler, pixelruler — ഇതിൽ ഏതാണ് ഇത്? ഉ: എല്ലാം ഇത് തന്നെ. ഉപകരണം ഒന്നുതന്നെ, തിരയുന്ന വാക്ക് മാത്രം മാറുന്നു. ചോ: സെന്റിമീറ്ററിലോ ഇഞ്ചിലോ അളക്കാമോ? ഉ: ഇല്ല. ഇത് ഒരു പിക്സൽ റൂളർ ഉപകരണമാണ്, CSS പിക്സൽ മാത്രമേ കാണിക്കൂ — നിങ്ങൾ സ്റ്റൈൽഷീറ്റിൽ എഴുതുന്ന അതേ യൂണിറ്റ്. ചോ: ഇത് എല്ലായിടത്തും പ്രവർത്തിക്കുമോ? ഉ: സാധാരണ വെബ്സൈറ്റുകളിൽ പ്രവർത്തിക്കും. Chrome സിസ്റ്റം പേജുകൾ, ഉള്ളിൽ തന്നെയുള്ള PDF വ്യൂവർ, ക്രോസ്-ഒറിജിൻ iframe-ന്റെ ഉള്ളടക്കം എന്നിവ എല്ലാ എക്സ്റ്റൻഷനുകൾക്കും അടഞ്ഞതാണ്, ഇതിനും അങ്ങനെ തന്നെ. ചോ: ഇത് എന്ത് ഡാറ്റ ശേഖരിക്കുന്നു? ഉ: ഒന്നും ഇല്ല. പൂജ്യം നെറ്റ്‌വർക്ക് റിക്വസ്റ്റ്, അക്കൗണ്ടില്ല, സൈൻ-അപ്പില്ല. ഇൻസ്റ്റാൾ ചെയ്യുമ്പോൾ പേടിപ്പിക്കുന്ന അനുമതികളൊന്നും ചോദിക്കുന്നില്ല; നിങ്ങൾ ഐക്കണിൽ ക്ലിക്ക് ചെയ്തതിന് ശേഷം മാത്രമേ പേജിനെ തൊടൂ. പഴയ രീതികൾ പതുക്കെയും കൃത്യതക്കുറവുള്ളതുമാണ്: പ്ലാസ്റ്റിക് സ്കെയിൽ മോണിറ്ററിന്റെ ചില്ലിൽ ചേർത്തുപിടിക്കുക, അല്ലെങ്കിൽ സ്ക്രീൻഷോട്ടിൽ പിക്സൽ എണ്ണുക. കമ്പ്യൂട്ടർ സ്ക്രീനിലെ ജോലിക്കുള്ള റൂളർ ബ്രൗസറിനുള്ളിൽ തന്നെ ഉണ്ടാകണം, ലേഔട്ട് മാറുമ്പോൾ വീണ്ടും വരയ്ക്കണം, കോഡിന്റെ അതേ യൂണിറ്റിൽ സംസാരിക്കണം. ഈ സ്ക്രീൻ ഓവർലേ റൂളർ ചെയ്യുന്നത് അതാണ്; അതുകൊണ്ടാണ് വെബ്സൈറ്റ് പിക്സൽ റൂളർ, ഗ്രാഫിക്സ് എഡിറ്ററിൽ ഒട്ടിച്ച സ്ക്രീൻ ചിത്രത്തിന് മുകളിൽ വരയ്ക്കുന്ന വരയെക്കാൾ മികച്ചതാകുന്നത്. ഈ ലിസ്റ്റിംഗ് 52 ഭാഷകളിൽ ലഭ്യമാണ്, അതിനാൽ വെബ് പിക്സൽ റൂളർ നിങ്ങളുടെ ഭാഷയിലും ഒരൊറ്റ തിരച്ചിൽ അകലെയാണ്. ഇൻസ്റ്റാൾ ചെയ്യുക, അടുത്തതായി തുറക്കുന്ന പേജിൽ പിക്സൽ അളക്കുക, ബാക്കി ദിവസം മുഴുവൻ സ്ക്രീനിലെ റൂളർ ഒരു ക്ലിക്ക് അകലെ വെക്കുക.