વેબ પેજ તત્વોની તપાસ કેવી રીતે કરવી?

કોઈપણ વેબ પૃષ્ઠના HTML અને CSS જુઓ

વેબસાઇટ કોડની લીટીઓ સાથે બનેલ છે, પરંતુ પરિણામ છબીઓ, વિડિઓ, ફોન્ટ્સ અને વધુના ચોક્કસ પૃષ્ઠ છે. તે ઘટકોમાંથી એકને બદલવા માટે અથવા તે શું બનેલું છે તે જોવા માટે, તમારે તેને નિયંત્રિત કરતી કોડની ચોક્કસ રેખા શોધી કાઢવી પડશે. તમે તત્વ નિરીક્ષણ સાધન સાથે તે કરી શકો છો.

મોટાભાગના વેબ બ્રાઉઝર્સ તમને નિરીક્ષણ સાધન ડાઉનલોડ કરવા અથવા ઍડ-ઑન ઇન્સ્ટોલ કરતું નથી. તેના બદલે, તેઓ તમને પૃષ્ઠ ઘટક પર જમણું-ક્લિક કરીને અને એલિમેન્ટની તપાસ અથવા નિરીક્ષણ કરવાનું પસંદ કરે છે. જો કે, આ પ્રક્રિયા તમારા બ્રાઉઝરમાં થોડી અલગ હોઈ શકે છે.

Chrome માં તત્વોનું નિરીક્ષણ કરો

Google Chrome ના સૌથી તાજેતરનાં સંસ્કરણો તમને પૃષ્ઠને કેટલીક રીતે તપાસવું જોઈએ, જે તેના તમામ બિલ્ટ-ઇન Chrome DevTools નો ઉપયોગ કરે છે:

• પૃષ્ઠ (અથવા ખાલી ક્ષેત્ર) પર કંઈક જમણું-ક્લિક કરો અને ઇન્સ્પેક પસંદ કરો
• Ctrl + Shift + I કીબોર્ડ શૉર્ટકટ દાખલ કરો
• વધુ સાધનો> વિકાસકર્તા સાધનો વિકલ્પને ઍક્સેસ કરવા માટે Chrome મેનૂનો ઉપયોગ કરો

Chrome DevTools તમને વસ્તુઓને સરળતાથી કૉપિ કરો અથવા સંપાદિત કરો HTML લીટીઓ અથવા ઘટકોને એકસાથે છૂપાવી અથવા કાઢી નાખો (પૃષ્ઠ ફરીથી લોડ થાય ત્યાં સુધી).

એકવાર DevTools પૃષ્ઠની બાજુ પર ખોલે છે, તમે તેને સ્થાનાંતરિત કરી શકો છો, પૃષ્ઠની બહાર પૉપ કરો, તમામ પૃષ્ઠની ફાઇલો માટે શોધ કરો, ચોક્કસ પરીક્ષા માટે પૃષ્ઠમાંથી ઘટકો પસંદ કરો, ફાઇલો અને URL કૉપિ કરો અને એક ટોળું કસ્ટમાઇઝ કરો. સેટિંગ્સ

ફાયરફોક્સમાં ઘટકોનું નિરીક્ષણ કરો

ક્રોમની જેમ, ફાયરફોક્સમાં ઈન્સ્પેક્ટર તરીકે ઓળખાતા તેના સાધનને ખોલવાના વિવિધ માર્ગો છે:

• પૃષ્ઠ પર ખાલી ક્ષેત્ર પર જમણું-ક્લિક કરો અથવા તત્વ પસંદ કરો , અને એલિમેન્ટ તપાસો પસંદ કરો
• કીબોર્ડ સાથે Ctrl + Shift + T અથવા Ctrl + Shift + I દાખલ કરો
• Firefox મેનૂમાંથી, Developer > Inspector પર ક્લિક કરો
• ટૂલ્સ મેનૂમાંથી, વેબ ડેવલપર> ઇન્સ્પેક્ટરને ક્લિક કરો

જેમ જેમ તમે ફાયરફોક્સમાં વિવિધ ઘટકો પર તમારું માઉસ ખસેડી શકો છો, ઇન્સ્પેક્ટર ટૂલ આપમેળે તત્વની સ્રોત કોડ માહિતી શોધે છે. એક ઘટક પર ક્લિક કરો અને "ઑન-ધ ફ્લાય શોધ" બંધ થઈ જશે અને તમે ઈન્સ્પેક્ટર વિંડોમાંથી એલિમેન્ટને ચકાસી શકો છો.

તમામ સપોર્ટેડ નિયંત્રણો શોધવા માટે એક ઘટકને રાઇટ-ક્લિક કરો તમે પૃષ્ઠને HTML તરીકે સંપાદિત કરો, આંતરિક અથવા બાહ્ય HTML કોડને કૉપિ કરો અથવા પેસ્ટ કરો, ડોમ પ્રોપર્ટીઝ, સ્ક્રીનશોટ બતાવો અથવા નોડ કાઢી નાખો, સરળતાથી નવા લક્ષણોને લાગુ કરો, પૃષ્ઠના તમામ CSS અને વધુ જુઓ.

ઓપેરામાં તત્વોનું નિરીક્ષણ કરો

ઓપેરા ઘટકોનું પણ નિરીક્ષણ કરી શકે છે, જેમાં તે DOM ઇન્સ્પેક્ટર સાધન છે જે Chrome ની સમાન છે. અહીં તે કેવી રીતે મેળવવું તે અહીં છે:

• કીબોર્ડ શૉર્ટકટ Ctrl + Shift + I નો ઉપયોગ કરો
• મેનુ પર જાઓ > વધુ સાધનો> વિકાસકર્તા મેનૂ બતાવો , અને પછી મેનુ> વિકાસકર્તા> વિકાસકર્તા સાધનો દ્વારા મેનૂ ખોલો
• પૃષ્ઠ પર કોઈપણ ઘટક પર જમણું-ક્લિક મેનૂથી, નિરીક્ષણ ઘટક પસંદ કરો

ઈન્ટરનેટ એક્સપ્લોરરમાં એલિમેન્ટ્સનું નિરીક્ષણ કરો

સમાન નિરીક્ષણ તત્વ ટૂલ, જે વિકાસકર્તા સાધનો કહેવાય છે, તે ઇન્ટરનેટ એક્સ્પ્લોરરમાં ઉપલબ્ધ છે:

• કીબોર્ડ પર F12 દબાવો
• Tools> F12 વિકાસકર્તા મેનૂ વિકલ્પનો ઉપયોગ કરો ( Alt + X દબાવો જો તમે ટૂલ્સ મેનુ ન જુઓ તો)
• પૃષ્ઠ પર રાઇટ-ક્લિક કરો અને એલિમેન્ટની તપાસ કરો

IE માં આ નવો મેનૂમાં એક પસંદ તત્વ ટૂલ છે જે તમને તેના HTML અને CSS વિગતો જોવા માટે કોઈપણ પૃષ્ઠ ઘટક પર ક્લિક કરી શકે છે. જ્યારે તમે DOM એક્સપ્લોરર ટેબ દ્વારા બ્રાઉઝ કરી રહ્યાં હોવ ત્યારે તત્વને હાયલાઇટ કરવામાં સક્ષમ / અક્ષમ કરી શકો છો.

ઉપરોક્ત બ્રાઉઝર્સમાં અન્ય તત્વ નિરીક્ષક સાધનોની જેમ, ઇન્ટરનેટ એક્સપ્લોરર તમને એલિમેન્ટ્સને કાપી, કૉપિ અને પેસ્ટ કરવા સાથે સાથે HTML સંપાદિત કરવા, વિશેષતાઓ ઉમેરવા, જોડાયેલ શૈલીઓ સાથે તત્વોને કૉપિ કરે છે અને વધુ.