હોમ » સોફ્ટવેર » ક્રોમ ડેવટૂલ્સ: ડેવલપર ટૂલ્સનો સૌથી વધુ લાભ મેળવવા માટેની સંપૂર્ણ માર્ગદર્શિકા
ક્રોમ ડેવટૂલ્સ: ડેવલપર ટૂલ્સનો સૌથી વધુ લાભ મેળવવા માટેની સંપૂર્ણ માર્ગદર્શિકા
ક્રોમ ડેવટૂલ્સ તમને બ્રાઉઝરમાંથી કોઈપણ વેબસાઇટનું ઊંડાણપૂર્વક વિશ્લેષણ અને ઑપ્ટિમાઇઝ કરવાની મંજૂરી આપે છે.
તેના તત્વો, નેટવર્ક, સ્ત્રોતો અને કન્સોલ પેનલ્સ વિઝ્યુઅલ ડિબગીંગ, પ્રદર્શન, સંસાધનો અને સ્ક્રિપ્ટ્સને આવરી લે છે.
લાઇટહાઉસ અને રેકોર્ડર ફંક્શન સાથે, તમે પ્રદર્શન, સુલભતા અને વાસ્તવિક વપરાશકર્તા અનુભવનું ઑડિટ કરી શકો છો.
ક્રોમ ડેવટૂલ્સ એ કોઈપણ વેબ ડેવલપર, ડિઝાઇનર અથવા SEO નિષ્ણાત માટે એક અનિવાર્ય સાથી બની ગયું છે જે વેબસાઇટના પ્રદર્શન, સુલભતા અને સર્ચ એન્જિન રેન્કિંગમાં સુધારો કરવા માંગે છે. ગૂગલ ક્રોમમાં સંકલિત આ ટૂલ્સ, વેબસાઇટ કાર્યક્ષમતા પર ઊંડાણપૂર્વકની આંતરદૃષ્ટિ અને નિયંત્રણ પ્રદાન કરે છે, જે HTML અને CSS નિરીક્ષણથી લઈને વ્યાપક નેટવર્ક પ્રવૃત્તિ વિશ્લેષણ, પ્રદર્શન પરીક્ષણ અને મોબાઇલ ઑપ્ટિમાઇઝેશન સુધીની દરેક વસ્તુને મંજૂરી આપે છે.
શું તમે Chrome DevTools માં નિપુણતા મેળવવા માંગો છો અને કોઈપણ વેબસાઇટ પર સમસ્યાઓનું ડિબગિંગ, ઑપ્ટિમાઇઝ અને નિદાન કરવા માટે તેની બધી સુવિધાઓનો ઉપયોગ કરવા માંગો છો? આ લેખમાં, અમે ઉદાહરણો અને ટિપ્સ સાથે, આ ટૂલ્સનો સૌથી વધુ લાભ મેળવવા માટે તમારે જે જાણવાની જરૂર છે તે બધું સ્પષ્ટપણે સમજાવીશું, જેમાં તેમને ઝડપથી કેવી રીતે ખોલવા, તમે દરેક પેનલ સાથે શું વિશ્લેષણ કરી શકો છો, દરેક ફંક્શન શું છે અને તેમને વિકાસ અને SEO બંનેમાં કેવી રીતે લાગુ કરવા તે શામેલ છે.
Chrome DevTools શું છે અને તે આટલા શક્તિશાળી કેમ છે?
ડેવલપર ટૂલ્સનો ક્રોમ ડેવટૂલ્સ સ્યુટ એ ગૂગલ ક્રોમમાં એક બિલ્ટ-ઇન પેનલ છે જે કોઈપણ વપરાશકર્તાને વધારાના પ્લગઇન્સ ઇન્સ્ટોલ કર્યા વિના કોઈપણ વેબસાઇટના કોડ અને પ્રદર્શનનું વિશ્લેષણ, ડીબગ અને ઑપ્ટિમાઇઝ કરવાની મંજૂરી આપવા માટે રચાયેલ છે . તેના અસંખ્ય ટેબ્સ અને સુવિધાઓ દ્વારા, તમે તત્વોનું નિરીક્ષણ કરી શકો છો, રીઅલ ટાઇમમાં શૈલીઓ સંશોધિત કરી શકો છો, નેટવર્ક પ્રવૃત્તિને ટ્રેક કરી શકો છો, સ્ક્રિપ્ટ્સ ડિબગ કરી શકો છો, પ્રદર્શનનું મૂલ્યાંકન કરી શકો છો અને મોબાઇલ ઉપકરણો પર વેબસાઇટ વર્તનનું અનુકરણ પણ કરી શકો છો . તેનો અવકાશ ફક્ત "સોર્સ કોડ જોવા" થી ઘણો આગળ વધે છે: તે તમને વેબસાઇટ કેવી રીતે ક્રિયાપ્રતિક્રિયા કરે છે, Google તેનું અર્થઘટન કેવી રીતે કરે છે અને વપરાશકર્તા તેને વિવિધ ઉપકરણો અથવા કનેક્શન્સથી કેવી રીતે નેવિગેટ કરે છે તે અનુભવવાની મંજૂરી આપે છે.
Chrome DevTools કેવી રીતે ઍક્સેસ કરવું: ઝડપી શોર્ટકટ્સ અને સંદર્ભ મેનૂ
Chrome DevTools ને ઍક્સેસ કરવું અતિ સરળ છે અને તમારી ઓપરેટિંગ સિસ્ટમ અને પસંદગીઓના આધારે તે કરવાની ઘણી રીતો છે:
તમે જે પૃષ્ઠનું વિશ્લેષણ કરવા માંગો છો તેના પર જમણું-ક્લિક કરો. અને "નિરીક્ષણ" પસંદ કરો. આ સૌથી દ્રશ્ય અને સામાન્ય રીતે ઉપયોગમાં લેવાતી પદ્ધતિ છે.
વાપરો કીબોર્ડ શોર્ટકટ્સ તમારા ઓપરેટિંગ સિસ્ટમ માટે વિશિષ્ટ: Windows / લિનક્સ: Ctrl + Shift + I મેક: સીએમડી + વિકલ્પ + આઇ
તમે Chrome મેનૂ (એડ્રેસ બારની જમણી બાજુના ત્રણ વર્ટિકલ બિંદુઓ) પર પણ જઈ શકો છો, અને વધુ ટૂલ્સ > ડેવલપર ટૂલ્સ પસંદ કરી શકો છો.
કીબોર્ડનો ઉપયોગ કરીને ચોક્કસ પેનલ્સ સીધા ખોલવા માટે:
એલિમેન્ટ્સ પેનલ (HTML/CSS): Ctrl + Shift + C (Windows/લિનક્સ) અથવા સીએમડી + વિકલ્પ + સી (મેક)
કન્સોલ: Ctrl + Shift + J (Windows/લિનક્સ) અથવા સીએમડી + વિકલ્પ + જે (મેક)
છેલ્લે વપરાયેલ પેનલ: F12 (મોટાભાગની સિસ્ટમો પર) અથવા Ctrl + Shift + I / Cmd + Option + I
દરેક નવા ટેબમાં DevTools આપમેળે ખોલો (જેઓ ડીબગીંગમાં સમય વિતાવે છે તેમના માટે ખૂબ જ ઉપયોગી): વિકલ્પ સાથે Chrome ચલાવો --auto-open-devtools-for-tabs આદેશ વાક્ય માંથી.
ભૂલશો નહીં: જ્યારે તમે DevTools ખોલો છો, ત્યારે તમે નક્કી કરી શકો છો કે તમે તેમને જમણી બાજુ, ડાબી બાજુ, વિન્ડોની નીચે, અથવા તો એક અલગ વિન્ડોમાં પિન કરવા માંગો છો - જો તમે બહુવિધ સ્ક્રીનો સાથે કામ કરો છો તો ખાસ કરીને ઉપયોગી વસ્તુ.
Chrome DevTools સાથે તમે શું કરી શકો છો? તેની મુખ્ય વિશેષતાઓ પર એક નજર
Chrome DevTools બહુવિધ પેનલમાં વિભાજિત છે. દરેક પેનલ વેબ વિશ્લેષણ અને ઑપ્ટિમાઇઝેશનના આવશ્યક પાસાને આવરી લે છે. અહીં સૌથી વધુ ઉપયોગમાં લેવાતા પેનલ્સ અને તેમના સૌથી સુસંગત કાર્યો છે:
એલિમેન્ટ્સ પેનલ: DOM અને CSS નું લાઇવ નિરીક્ષણ અને સંપાદન
આ પેનલ મોટાભાગના ડિબગીંગ અને વિઝ્યુઅલ વિશ્લેષણ કાર્યો માટે પ્રારંભિક બિંદુ છે. તે તમને આ કરવાની મંજૂરી આપે છે:
DOM (ડોક્યુમેન્ટ ઓબ્જેક્ટ મોડેલ) ની ચોક્કસ રચનાનું નિરીક્ષણ કરો. કે બ્રાઉઝર રેન્ડર કરી રહ્યું છે, એટલે કે, સ્ક્રિપ્ટો ચલાવ્યા પછી અને સ્ટાઇલ લોડ કર્યા પછી Google ખરેખર શું જુએ છે.
HTML અને CSS ને તરત જ સંશોધિત કરો, વેબસાઇટ પર ફેરફારો કેવા દેખાય છે તે તાત્કાલિક તપાસી રહ્યું છે (વાસ્તવિક સ્રોત કોડને અસર કર્યા વિના નવા શૈલી નિયમોના પ્રોટોટાઇપિંગ અથવા પરીક્ષણ માટે ઉત્તમ).
વર્ગો અને શૈલીઓનું સંચાલન કરો ઘટકોમાંથી: તમે નવા વર્ગોને સક્રિય, નિષ્ક્રિય અથવા પરીક્ષણ કરી શકો છો અને પ્રતિભાવશીલ ડિઝાઇન માટે દ્રશ્ય વિગતોને સંપાદિત કરી શકો છો.
ખાસ લક્ષણો જુઓ અને તેનું સંચાલન કરો (જેમ કે ડેટા-નોસ્નિપેટ), જે SEO માટે મૂળભૂત છે, કારણ કે તમે ચકાસી શકો છો કે Google ચોક્કસ સામગ્રીને ઇન્ડેક્સ કરી શકશે કે નહીં.
તપાસો કે શું એવા તત્વો અથવા બ્લોક્સ છે જે ફક્ત વપરાશકર્તાની ક્રિયા પછી જ દેખાય છે (ઉદાહરણ તરીકે, ટેબ્સ અથવા ડ્રોપડાઉન્સ જેને જાવાસ્ક્રિપ્ટ પ્રદર્શિત કરવાની જરૂર હોય છે).
કન્સોલ પર $0 તરીકે તપાસાયેલ વસ્તુની ઝડપી ઍક્સેસ, તમને જાવાસ્ક્રિપ્ટ દ્વારા સીધા જ તેને હેરફેર કરવાની મંજૂરી આપે છે.
ટિપ! તમે આ પેનલમાંથી વિવિધ સ્ક્રીન કદ અને મોબાઇલ ઉપકરણોનું અનુકરણ પણ કરી શકો છો, જેથી ખાતરી કરી શકાય કે તમારી વેબસાઇટ ખરેખર પ્રતિભાવશીલ છે.
નેટવર્ક પેનલ: સંસાધન લોડનું વિશ્લેષણ કરે છે, વિલંબનું નિદાન કરે છે અને ધીમા જોડાણોનું અનુકરણ કરે છે
પ્રદર્શન વિશ્લેષણ માટે આવશ્યક ડેશબોર્ડ્સમાંથી એક . અહીં તમે તેને કાલક્રમિક અને વિગતવાર જોઈ શકો છો:
તેઓ કયા ક્રમમાં ડાઉનલોડ થાય છે, લોડિંગ સમય અને કદ દરેક સંસાધનનું મહત્વ: અવરોધો અથવા બિનજરૂરી સંસાધનો ઓળખવાની ચાવી.
દરેક સંસાધન પર ક્લિક કરીને તમે ચકાસી શકો છો HTTP હેડર્સ, કેશીંગ નીતિઓ, પ્રતિભાવ સમય, અને જુઓ કે ત્યાં નાની ફાઇલો છે કે નહીં.
ધીમા જોડાણોનું સિમ્યુલેશન (3G, 4G, વગેરે), ફક્ત તમારા પોતાના કમ્પ્યુટર પર જ નહીં, પરંતુ તમારા વપરાશકર્તાઓના ઉપકરણો પર વાસ્તવિક પ્રદર્શન જોવા માટે.
માટે કાર્ય કેશ સાફ કરો અને ફરીથી લોડ કરો, નવા વપરાશકર્તાના અનુભવને ચકાસવા માટે ઉપયોગી.
વિનંતી અવરોધિત કરવી: ચોક્કસ સંસાધનોના વિતરણની અસરનું વિશ્લેષણ કરે છે (ઉદાહરણ તરીકે, main.css ને અક્ષમ કરવું અને પૃષ્ઠ કેવી રીતે ખોટી રીતે ગોઠવાય છે તે જોવું).
અદ્યતન ફિલ્ટરિંગ: ફાઇલ પ્રકાર, સ્રોત ડોમેન, નિયમિત અભિવ્યક્તિઓ અથવા ચોક્કસ વિશેષતાઓ દ્વારા શોધો, બાહ્ય ડાઉનલોડ્સનું ઑડિટ કરવા અથવા સુરક્ષાનું નિરીક્ષણ કરવા માટે આદર્શ.
સ્ક્રીનશોટ લેવા પેજ લોડ થવાના વિવિધ બિંદુઓ પર, તમને વપરાશકર્તાને શું બતાવવામાં આવી રહ્યું છે તે પગલું દ્વારા પગલું જોવાની મંજૂરી આપે છે.
ખાસ કરીને SEO અને WPO માટે: પહેલા શું લોડ થાય છે અને તે પ્રદર્શન અને વેબ વાઇટલ્સને કેવી રીતે અસર કરે છે તેનું વિશ્લેષણ કરો , Google અને તમારા મુલાકાતીઓ માટે અનુભવને કેવી રીતે ઑપ્ટિમાઇઝ કરવો તે સમજો.
કન્સોલ પેનલ: ડીબગ કરો, સ્ક્રિપ્ટો ચલાવો અને રીઅલ-ટાઇમ ચેતવણીઓ મેળવો
કન્સોલમાં તમે વેબસાઇટ દ્વારા જારી કરાયેલા લોગ, જાવાસ્ક્રિપ્ટ ભૂલો અને સુરક્ષા ચેતવણીઓ રીઅલ ટાઇમમાં જોઈ શકો છો. તમે આ પણ કરી શકો છો:
જાવાસ્ક્રિપ્ટ આદેશો સીધા ચલાવો ખુલ્લા પૃષ્ઠ પર, ઝડપી પરીક્ષણો અથવા ઓટોમેશન માટે આદર્શ.
ચલનો ઉપયોગ કરીને છેલ્લા નિરીક્ષણ કરેલ તત્વ સાથે ક્રિયાપ્રતિક્રિયા કરો. $0 (અને $1, $2, વગેરે), એડવાન્સ્ડ ડિબગીંગને ઝડપી બનાવવું.
વાંધાજનક JS ફાઇલની લાઇન પર સીધા જવા માટે ભૂલો અથવા ચેતવણીઓ પર ક્લિક કરો.
સ્ત્રોત પેનલ: સ્થિર ફાઇલો અને બાહ્ય સંસાધનો જુઓ અને ડીબગ કરો
આ વિભાગ વેબસાઇટ પર અપલોડ કરેલી ફાઇલોની રચના દર્શાવે છે : સ્ક્રિપ્ટ્સ, શૈલીઓ, છબીઓ, વગેરે, ડોમેન્સ દ્વારા ગોઠવાયેલ:
તમે Google ફોન્ટ્સ જેવા બાહ્ય સંસાધનોનો ઉપયોગ કરો છો કે નહીં તે શોધો.અને ગતિ મેળવવા માટે તેમને સ્થાનિક રીતે હોસ્ટ કરવાનું વિચારી રહી છે.
તે તમને પરીક્ષણ માટે સ્રોત ફાઇલો ખોલવા, સંપાદિત કરવા અને સાચવવાની મંજૂરી આપે છે.
મિનિફાઇડ સ્ક્રિપ્ટ્સનું વિશ્લેષણ કરો, વધુ વાંચનક્ષમતા માટે કોડ વિસ્તૃત કરો અને છુપાયેલા નિર્ભરતાઓ માટે તપાસો.
રેકોર્ડર: વપરાશકર્તાની યાત્રાનું અનુકરણ કરે છે અને તેમના વાસ્તવિક અનુભવને માપે છે
રેકોર્ડિંગ ફંક્શન તમને વપરાશકર્તાના વાસ્તવિક બ્રાઉઝિંગનું અનુકરણ કરવાની અને ચોક્કસ સમસ્યાઓ ઓળખવાની મંજૂરી આપે છે:
તમે નેવિગેશન ફ્લો રેકોર્ડ કરી શકો છો (દા.ત., મેનુ પર ક્લિક કરવું, ફોર્મ ભરવા, એક પેજથી બીજા પેજ પર જવું), વેબસાઇટ કેવી પ્રતિક્રિયા આપે છે તે તપાસો અને દરેક ક્રિયાના લોડિંગ સમયનું વિશ્લેષણ કરો.
રૂપાંતરણો અથવા UX માટે મહત્વપૂર્ણ પાથમાં અવરોધો શોધવા માટે આદર્શ.
લાઇટહાઉસ: કામગીરી, સુલભતા અને શ્રેષ્ઠ પ્રથાઓનું વ્યાપક ઓડિટ
લાઇટહાઉસ, જે Chrome DevTools માં સંકલિત છે અને પ્લગઇન તરીકે પણ ઉપલબ્ધ છે , તે એક સ્ટાર સુવિધા છે:
પરફોર્મ કરો ઓટોમેટિક ઓડિટ કામગીરી (WPO), સુલભતા, શ્રેષ્ઠ પ્રથાઓ, SEO અને PWA (પ્રગતિશીલ વેબ એપ્લિકેશન્સ).
પૂરી પાડે છે એ કુલ આંક અને દરેક વિભાગ માટે, પહેલાથી પ્રકાશિત અને વિકાસ હેઠળની વેબસાઇટ્સ બંને માટે, કાર્યક્ષમ ભલામણો.
તે તમને ડેસ્કટોપ અને મોબાઇલ મોડમાં વેબસાઇટનું વિશ્લેષણ કરવાની મંજૂરી આપે છે, જે તેને મોબાઇલ ફ્રેન્ડલી સમસ્યાઓ ઓળખવા માટે ખૂબ જ ઉપયોગી બનાવે છે.
વ્યવહારુ એપ્લિકેશનો: WPO અને SEO માટે DevTools નો ઉપયોગ કેવી રીતે કરવો
Chrome DevTools એ તમામ સ્તરે વેબસાઇટ ઑપ્ટિમાઇઝેશન માટે એક મૂળભૂત સાધન છે : પ્રારંભિક ડિઝાઇનથી લઈને જાહેરાત વિનંતી વિશ્લેષણ અને ઓન-પેજ SEO ઑડિટિંગ સુધી. કેટલાક મુખ્ય ઉપયોગોમાં શામેલ છે:
પ્રદર્શન ઑપ્ટિમાઇઝેશન (WPO)
છબીઓ અને મોટી ફાઇલો ઓળખે છે નેટવર્ક ટેબમાંથી અને તેના ઑપ્ટિમાઇઝેશન (કમ્પ્રેશન, નવા ફોર્મેટ, આળસુ લોડ) ને પ્રાથમિકતા આપો.
બાહ્ય સંસાધન ભારનું મૂલ્યાંકન કરોજો સમય લાંબો હોય, તો તેને તમારા પોતાના સર્વર પરથી ડાઉનલોડ કરવાનું વિચારો.
લોડિંગ પ્રાથમિકતા ફરીથી ગોઠવો જેથી મહત્વપૂર્ણ વસ્તુઓ પહેલા પીરસવામાં આવે (મુશ્કેલ રસ્તો).
નેટવર્ક પેનલમાંથી કેશ અક્ષમ કરો ફેરફારોનું વિશ્લેષણ કરતી વખતે, ખાતરી કરો કે માહિતી સ્થાનિક રીતે સંગ્રહિત નથી.
મોબાઇલ વપરાશકર્તા અનુભવ ચકાસવા માટે સ્લો કનેક્શન સિમ્યુલેટરનો ઉપયોગ કરો.
સંસાધન લઘુત્તમીકરણ (CSS અને JavaScript)
ફોન્ટ્સ ટેબમાં, મોટા કદના, અનમિનાઇફાઇડ, અથવા ડુપ્લિકેટ ફાઇલો શોધે છે.
વિનંતીઓ ઘટાડવા અને લોડ સમય સુધારવા માટે CSS અને JS ને એકીકૃત અને નાનું કરો.
માળખાકીય વિશ્લેષણ, સુલભતા અને SEO
હેડિંગ, એટ્રીબ્યુટ્સ અને HTML સિમેન્ટિક્સની રચનાની સમીક્ષા કરો.: ખાતરી કરો કે લોજિકલ સ્ટ્રક્ચર (h2, h3, ALT ટૅગ્સ, ભૂમિકાઓ) Google માટે શ્રેષ્ઠ છે.
લાઇટહાઉસ સાથે તપાસ કરો જરૂરી લેબલ અને ડેટાની હાજરી SEO, સુલભતા અને PWA માટે.
રેન્ડરિંગ પર JavaScript ની અસરનું વિશ્લેષણ કરો અને ધ્યાનમાં રાખો કે જો લોડ કરતી વખતે વપરાશકર્તાની ક્રિયાપ્રતિક્રિયા દેખાતી ન હોય તો Google તેના પર શું આધાર રાખે છે તેનું અર્થઘટન કરી શકશે નહીં.
કૂકીઝ, સ્થાનિક સ્ટોરેજ અને અન્ય બ્રાઉઝર સંસાધનોના ઉપયોગ પર નજર રાખે છે.
સ્ક્રેપિંગ અથવા નિકાસ માટે સામગ્રીનું નિષ્કર્ષણ અને હેરફેર
તમે મોટા કોષ્ટકો અથવા યાદીઓને સ્પ્રેડશીટ્સ અથવા કોડ એડિટર્સમાં સીધા નિકાસ કરવા માટે "એલિમેન્ટ કૉપિ કરો" નો ઉપયોગ કરી શકો છો.
ઓન-સ્ક્રીન સામગ્રીને કાર્યક્ષમ રીતે સંપાદિત કરવા, કેપ્ચર તૈયાર કરવા અથવા સંબંધિત માહિતી નિકાસ કરવા માટે કન્સોલ અને ડિઝાઇન મોડનો ઉપયોગ કરો.
રીઅલ-ટાઇમ કસ્ટમાઇઝેશન અને ડિબગીંગ
જાહેરાત બેનરો અથવા હેરાન કરનારા તત્વોને સીધા અરજી કરીને છુપાવો પ્રદર્શન: કોઈ નહીં નિરીક્ષક દ્વારા.
પસંદ કરેલા તત્વો પર આદેશો ચલાવવા માટે કન્સોલમાંથી JavaScript નો ઉપયોગ કરો અથવા પેજ એડિટ મોડને ચાલુ અને બંધ પણ કરો.
મોબાઇલ ઉપકરણો પર Chrome DevTools ની મર્યાદાઓ
"ઇન્સ્પેક્ટ એલિમેન્ટ" અને બધા ક્રોમ ડેવટૂલ્સ હંમેશા ડેસ્કટોપ વર્ઝન પર ઉપલબ્ધ હોવા છતાં, ડેવટૂલ્સ સ્માર્ટફોન અને ટેબ્લેટ પર સીધા જ ઍક્સેસિબલ નથી . આના બે કારણો છે: નાની સ્ક્રીન પર ઇન્ટરફેસ અવ્યવહારુ હશે, અને માઉસની ચોકસાઇ સાથે ચેડા કરવામાં આવશે. સદનસીબે, તમે તમારા ડેસ્કટોપ પરથી મોબાઇલ અનુભવનું અનુકરણ કરી શકો છો અથવા રીઅલ ટાઇમમાં સાઇટ્સ ડીબગ કરવા માટે તમારા કમ્પ્યુટર સાથે ભૌતિક ઉપકરણને પણ કનેક્ટ કરી શકો છો, જે ખાસ કરીને મોબાઇલ એપ્લિકેશન ડેવલપર્સ માટે મૂલ્યવાન છે. iOS ધરાવતા Mac પર, તમારે "સેટિંગ્સ > એડવાન્સ્ડ" માં અનુરૂપ વિકલ્પને સક્ષમ કરવાની અને બંને ઉપકરણો પર સમાન iCloud એકાઉન્ટનો ઉપયોગ કરવાની જરૂર પડશે.
અદ્યતન ઉપયોગના કિસ્સાઓ: ડીબગીંગથી લઈને સ્ક્રીનશોટ લેવા સુધી
SEO વિકાસ અને વિશ્લેષણમાં ક્લાસિક ઉપયોગો ઉપરાંત, Chrome DevTools ખૂબ જ વ્યવહારુ અદ્યતન સુવિધાઓ પ્રદાન કરે છે:
નેટવર્ક નિષ્ફળતાના દૃશ્યોનું અનુકરણ કરવા માટે ચોક્કસ ફાઇલો (ઉદાહરણ: main.css) લોડ થવાને અવરોધિત કરે છે. અને નિષ્ફળતાના કિસ્સામાં વેબસાઇટ કેવી રીતે વર્તે છે તે તપાસો.
નેટવર્ક પેનલમાં સ્ક્રીનશોટ ફંક્શનનો ઉપયોગ કરીને રેન્ડરિંગ પ્રક્રિયાને સ્ટેપ બાય સ્ટેપ જુઓ અને આ રીતે ચોક્કસ મુખ્ય ઘટકો કેવી રીતે અને ક્યારે દેખાય છે તે વધુ સારી રીતે સમજો.
ગ્લોબલ સર્ચ ફંક્શનનો ઉપયોગ કરીને ચોક્કસ HTTP હેડરો અથવા પ્રતિભાવો (દા.ત., કયા સંસાધનો શ્રેષ્ઠ કેશીંગ નીતિઓનો ઉપયોગ કરે છે તે શોધવા માટે) શોધો.
બાહ્ય ટ્રાફિક અથવા મહત્વપૂર્ણ સંસાધનોનું વિગતવાર વિશ્લેષણ કરવા માટે વિનંતીઓને પ્રકાર, ડોમેન અથવા પેટર્ન દ્વારા ફિલ્ટર કરો.
HTML અને CSS ફેરફારોના ઝડપી પ્રોટોટાઇપ બનાવો અને મૂળ સ્રોત ફાઇલોમાં ફેરફાર કર્યા વિના, તેને તમારી ટીમ સાથે સરળતાથી શેર કરો.
Chrome DevTools વેબ ડેવલપમેન્ટ અને એનાલિટિક્સનું સ્વિસ આર્મી નાઈફ બની ગયું છે, જે વ્યક્તિગત પ્રોજેક્ટ્સ અથવા મોટા પ્લેટફોર્મ અને વ્યાવસાયિક પ્રોજેક્ટ્સ માટે સમાન રીતે સારી રીતે કાર્ય કરે છે. ડિઝાઇન વિગતોનું ઝડપથી નિરીક્ષણ કરવાથી લઈને WPO, SEO અને ઍક્સેસિબિલિટી કાર્યો સહિત તમારી વેબસાઇટના તમામ સંસાધનોનું સંપૂર્ણ ઑડિટ કરવા સુધી, Lighthouse જેવા ટૂલ્સ સાથે તેનું એકીકરણ તેને ફક્ત Google માટે જ નહીં પરંતુ તમારા વપરાશકર્તાઓ માટે પણ તમારા પૃષ્ઠોને ઑપ્ટિમાઇઝ કરવા માટે એક આવશ્યક સંસાધન બનાવે છે.
