Pixel Ruler

કોઈપણ વેબ પેજ પર પિક્સેલ માપવા માટે Pixel Ruler: એલિમેન્ટના કદ અને અંતર માટે સ્ક્રીન રૂલર.

Pixel Ruler સ્ક્રીન પર રૂલર મૂકી દે છે અને બ્રાઉઝરમાં કંઈ પણ માપવા દે છે. ટૂલબારના આઇકન પર ક્લિક કરો, લેઆઉટ પર માઉસ ખેંચો અને ચોક્કસ અંતર CSS પિક્સેલમાં વાંચો. કોઈ એલિમેન્ટ પર પોઇન્ટર લઈ જાઓ એટલે તેની પહોળાઈ, ઊંચાઈ, પેડિંગ અને આસપાસના બ્લોક સુધીનું અંતર મળી જાય છે. આંકડા DevTools સાથે મળતા આવે છે, કારણ કે એક્સ્ટેન્શન એ જ CSS પિક્સેલ વાંચે છે જેનાથી બ્રાઉઝર પેજ દોરે છે. ન કોઈ પેનલ ખોલવાની, ન સ્ક્રીનશોટ એક્સપોર્ટ કરવાનો, ન કોઈ ગણતરી. જે સાઇટ તમે પહેલેથી જોઈ રહ્યા છો તેની ઉપર જ એક પિક્સેલ રૂલર. એક જ ઓવરલે, વચ્ચે કશું બદલવાનું નહીં: 📏 દબાવીને ખેંચો અને પેજ પરનાં કોઈ પણ બે બિંદુ વચ્ચેનું અંતર માપો. 📏 કોઈ એલિમેન્ટ પર પોઇન્ટર રાખો અને તેનું માપ, પેડિંગ અને પડોશી બ્લોક સુધીનાં અંતર જુઓ. 📏 ઊભી અને આડી ગાઇડ મૂકો અને તેની સામે બ્લોક ગોઠવો. સંદર્ભ માટે રૂલર હંમેશાં સ્ક્રીન પર રહે છે, અને એક જ કી પરિણામને પોઇન્ટર નીચેના એલિમેન્ટના CSS સિલેક્ટર સાથે ક્લિપબોર્ડ પર કૉપી કરી દે છે. શરૂઆત કેવી રીતે કરવી, ત્રણ પગલાંમાં: 1. એક્સ્ટેન્શન ઇન્સ્ટોલ કરો અને તેને ટૂલબાર પર પિન કરો. 2. જે પેજ પર કામ કરો છો તે ખોલો અને આઇકન પર ક્લિક કરો. 3. ખેંચો, પોઇન્ટર ફેરવો, માપો — કામ પૂરું થાય એટલે બે વાર Esc દબાવો. ફ્રન્ટ-એન્ડ ડેવલપર તેનાથી લેઆઉટને મોકઅપ સામે ચકાસે છે. ડિઝાઇનર તેને પેજ રૂલર તરીકે વાપરે છે, જ્યારે હેન્ડઓફ ફાઇલ જૂની થઈ ચૂકી હોય. QA એન્જિનિયર "બટન થોડું નીચે લાગે છે" ને બદલે સાચા આંકડા સાથે બગ નોંધાવે છે. લાઇવ સાઇટ પર ઝડપી પિક્સેલ માપ જોઈતું હોય તેને બે ક્લિકમાં મળી જાય છે. આ વેબ રૂલર તમને શું આપે છે: - કોઈ પણ બે બિંદુ વચ્ચેનું અંતર, પિક્સેલમાં - પેજના કોઈ પણ એલિમેન્ટની પહોળાઈ અને ઊંચાઈ - પેડિંગ, માર્જિન અને પડોશી એલિમેન્ટ વચ્ચેની જગ્યા - એક એલિમેન્ટથી આસપાસના બ્લોક સુધીનાં અંતર - વિન્ડોની ઉપરની અને ડાબી કિનારી પરના માપપટ્ટા - માપેલા એલિમેન્ટનો ટૅગ, ક્લાસ અને CSS સિલેક્ટર - અલાઇનમેન્ટ ચકાસવા માટે ફરીથી વાપરી શકાય તેવી ગાઇડ કીબોર્ડ પોઇન્ટરને સ્થિર રાખે છે: → Shift માપને આડી કે ઊભી ધરી પર લૉક કરે છે → ઍરો કી વર્તમાન બિંદુને બરાબર 1 px ખસેડે છે → Esc વર્તમાન માપ ભૂંસે છે, બીજું Esc પેજ પાછું સોંપી દે છે → એક શૉર્ટકટ પરિણામ ક્લિપબોર્ડ પર કૉપી કરે છે એક વાર ઇન્સ્ટોલ કરો અને તમારી પાસે એ જ પિક્સેલ રૂલર હશે જે Windows, Linux અને ChromeOS વાપરનારા ચલાવે છે, અને એ જ પિક્સેલ રૂલર જે Mac વાપરનારા ચલાવે છે, કારણ કે આ ટૂલ બ્રાઉઝરમાં રહે છે, ઓપરેટિંગ સિસ્ટમમાં નહીં. કોઈ ડાઉનલોડ શોધવાની જરૂર નથી, ન ઇન્સ્ટોલર, ન એડમિન અધિકાર: એક્સ્ટેન્શન એક ક્લિકમાં Chrome Web Store પરથી આવી જાય છે. લૉન્ચ વખતે તે મફત પિક્સેલ રૂલર છે અને દરેક ફીચર બધા માટે ખુલ્લું છે. અલગ વિન્ડોમાં ખૂલતી સ્ક્રીન રૂલર એપ પેજ સ્ક્રોલ થતાં જ ખોટી વસ્તુ માપવા લાગે છે. આ પિક્સેલ રૂલર ટૅબની અંદર જ દોરાય છે અને કન્ટેન્ટ સાથે સ્ક્રોલ થાય છે. આ ઓનલાઇન પિક્સેલ રૂલર છે: તે લાઇવ પેજ પર ચાલે છે, સ્ટેજિંગ સર્વર પર, ક્લાયન્ટની સાઇટ પર, લૉગિનની પાછળ પણ. વિન્ડોની સ્થિર તસવીર માપતું ડેસ્કટોપ રૂલર એ કરી શકતું નથી. કોઈ ચિત્ર કે લોગો ચકાસવો છે? તેને ઇમેજ માપવા માટે વાપરો — તસવીર પર પોઇન્ટર લઈ જાઓ અને તેનું રેન્ડર થયેલું માપ વાંચો, જે ઘણી વાર સોર્સ ફાઇલના માપ કરતાં જુદું હોય છે. પ્રશ્નો અને જવાબો પ્ર: DevTools ખોલ્યા વગર સ્ક્રીન પર પિક્સેલ કેવી રીતે માપવા? જ: આઇકન પર ક્લિક કરો અને ખેંચો. ઓવરલે પેજની ઉપર બેસે છે, એટલે ખરેખર જે દેખાય છે તે જ તમે માપો છો — એ હોવર સ્ટેટ પણ, જે કોઈ પેનલ ફોકસ લઈ લે ત્યારે ગાયબ થઈ જાય છે. પ્ર: સ્ક્રીન પિક્સેલ રૂલર, પિક્સેલ માપપટ્ટી, px રૂલર, screen pixel ruler, pixelruler — આમાંથી આ કયું છે? જ: આ બધાં જ. ટૂલ એક જ છે, ફક્ત સર્ચનો શબ્દ બદલાય છે. પ્ર: શું તે સેન્ટિમીટર કે ઇંચમાં માપી શકે? જ: ના. આ પિક્સેલ રૂલર ટૂલ છે અને ફક્ત CSS પિક્સેલ જ જણાવે છે — એ જ એકમ જે તમે સ્ટાઇલશીટમાં લખો છો. પ્ર: શું તે બધે કામ કરે છે? જ: સામાન્ય વેબસાઇટ પર, હા. Chrome ના સિસ્ટમ પેજ, બિલ્ટ-ઇન PDF વ્યૂઅર અને બીજા ઓરિજિનના iframe ની અંદરનો ભાગ દરેક એક્સ્ટેન્શન માટે બંધ છે, આ પણ તેમાં આવી ગયું. પ્ર: તે કયો ડેટા ભેગો કરે છે? જ: કશો નહીં. શૂન્ય નેટવર્ક રિક્વેસ્ટ, ન એકાઉન્ટ, ન સાઇન-અપ. ઇન્સ્ટોલ વખતે કોઈ ડરામણી પરવાનગી માગતું નથી અને પેજને ત્યારે જ અડે છે જ્યારે તમે આઇકન પર ક્લિક કરો. જૂની ટેવો ધીમી અને ઓછી ચોક્કસ છે: કમ્પ્યુટર સ્ક્રીનના કાચ પર પ્લાસ્ટિકની પટ્ટી ટેકવવી, અથવા સ્ક્રીનશોટમાં પિક્સેલ ગણવા. કમ્પ્યુટર સ્ક્રીન માટેનું રૂલર બ્રાઉઝરની અંદર જ રહેવું જોઈએ, લેઆઉટ બદલાય ત્યારે ફરી દોરાવું જોઈએ અને કોડ જેવા જ એકમમાં વાત કરવી જોઈએ. આ સ્ક્રીન ઓવરલે એ જ કરે છે, અને એટલે જ વેબસાઇટનું પિક્સેલ રૂલર ગ્રાફિક્સ એડિટરમાં ચોંટાડેલી ઇમેજ પર મૂકેલી પટ્ટી કરતાં ચઢિયાતું છે. આ લિસ્ટિંગ 52 ભાષાઓમાં ઉપલબ્ધ છે, એટલે તમારી ભાષામાં વેબ પિક્સેલ રૂલર માત્ર એક સર્ચ દૂર છે. તેને ઇન્સ્ટોલ કરો, હવે પછી જે પેજ ખોલો તેના પર પિક્સેલ માપો, અને બાકીનો આખો દિવસ ઓન-સ્ક્રીન રૂલર એક ક્લિકના અંતરે રાખો.