વેબ બ્રાઉઝર ડેવલોપર ટૂલ્સ કેવી રીતે વાપરવી

વેબ ડિઝાઇનર્સ, ડેવલપર્સ અને ટેસ્ટર્સ માટે સંકલિત સાધનો

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

ગોન તે દિવસો છે જ્યાં એક બ્રાઉઝરમાં મળતી એકમાત્ર પ્રોગ્રામિંગ અને પરીક્ષણ સાધનો તમને પૃષ્ઠના સ્રોત કોડ અને વધુ કંઇ જોવાની મંજૂરી આપે છે. આજેના બ્રાઉઝર્સ તમને જાવાસ્ક્રિપ્ટ સ્નિપેટ્સને એક્ઝિક્યુટ કરવા અને ડીબગ કરવા જેવી વસ્તુઓ કરી, ડોમ ઘટકોનું નિરિક્ષણ અને સંપાદન કરવા, વાસ્તવિક એપ્લિકેશનના ટ્રાફિકને તમારી એપ્લિકેશન અથવા પૉડેલ લોડિંગને અવરોધે છે, સીએસએસ પ્રભાવને વિશ્લેષિત કરવા, તમારી કોડ ખૂબ મેમરી અથવા ઘણા CPU ચક્રનો ઉપયોગ કરતા નથી, અને વધુ. એક પરીક્ષણ પરિપ્રેક્ષ્યથી, તમે પ્રસ્તાવિત કરી શકો છો કે કેવી રીતે એપ્લિકેશન અથવા વેબ પૃષ્ઠ વિવિધ બ્રાઉઝર્સમાં તેમજ વિવિધ ઉપકરણો અને પ્લેટફોર્મ્સ પર પ્રતિભાવ ડિઝાઇનના જાદુ અને બિલ્ટ-ઇન સ્ટિમ્યુલેટર્સ દ્વારા પ્રસ્તુત કરશે. શ્રેષ્ઠ ભાગ એ છે કે તમે તમારા બ્રાઉઝરને છોડ્યા વગર આ બધું કરી શકો છો!

નીચેના ટ્યુટોરિયલ્સ તમને કેટલાક લોકપ્રિય વેબ બ્રાઉઝરોમાં આ ડેવલપર ટૂલ્સને કેવી રીતે ઍક્સેસ કરવા તે વિશે લઈ જવામાં આવે છે.

ગૂગલ ક્રોમ

ક્રોમના ડેવલપર સાધનો તમને કોડને સંપાદિત કરવા અને ડિબગ કરવા દે છે, પ્રભાવ ઘટકોને છતી કરવા માટે વ્યક્તિગત ઘટકોનું ઑડિટ કરો, Android અથવા iOS ચલાવતા સહિત વિવિધ ઉપકરણ સ્ક્રીનોનું અનુકરણ કરો અને અન્ય ઉપયોગી કાર્યો કરો.

1. ક્રોમનાં મુખ્ય મેનૂ બટન પર ક્લિક કરો, જે ત્રણ આડી રેખાઓ સાથે ચિહ્નિત થયેલ છે અને બ્રાઉઝરનાં જમણા ખૂણામાં સ્થિત છે.
2. જ્યારે ડ્રોપ-ડાઉન મેનૂ દેખાય, ત્યારે વધુ ટૂલ્સ વિકલ્પ પર તમારું માઉસ કર્સર હૉવર કરો.
3. ઉપ-મેનૂ હવે દેખાશે. વિકાસકર્તા સાધનો લેબલ કરેલું વિકલ્પ પસંદ કરો. તમે આ મેનુ આઇટમની જગ્યાએ નીચેની કીબોર્ડ શૉર્ટકટનો ઉપયોગ કરી શકો છો: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPTION) + COMMAND + I )
4. આ ઉદાહરણ સ્ક્રીનશોટમાં બતાવ્યા પ્રમાણે, હવે Chrome વિકાસકર્તા સાધનો ઇન્ટરફેસ પ્રદર્શિત થવું જોઈએ. તમારા Chrome ના સંસ્કરણ પર આધારીત, તમે જે પ્રારંભિક લેઆઉટ જુઓ છો તે અહીં પ્રસ્તુત કરેલા એકથી થોડું અલગ હોઈ શકે છે. ડેવલપર ટૂલ્સનો મુખ્ય કેન્દ્ર, જે સામાન્ય રીતે સ્ક્રીનની નીચે અથવા જમણા બાજુ પર સ્થિત છે, તેમાં નીચેના ટેબ્સનો સમાવેશ થાય છે.
   એલિમેન્ટ્સ: વાસ્તવિક સમયમાં તમારા ફેરફારોની અસરોને જોતાં, CSS અને HTML કોડની તપાસ કરવાની તેમજ સી.એસ.એસ. ધ ફ્લાય પર ફેરફાર કરવાની ક્ષમતા પ્રદાન કરે છે.
   કન્સોલ: ક્રોમનું જાવાસ્ક્રિપ્ટ કન્સોલ સીધા આદેશ એન્ટ્રી તેમજ ડાયગ્નોસ્ટિક ડિબગીંગ માટે પરવાનગી આપે છે.
   સ્ત્રોતો: તમને શક્તિશાળી ગ્રાફિકલ ઇન્ટરફેસ દ્વારા JavaScript કોડ ડિબગ કરે છે.
   નેટવર્ક: સંપૂર્ણ અરજી અને પ્રતિસાદ હેડર સહિત અદ્યતન સમય મેટ્રિક્સ સહિત સક્રિય એપ્લિકેશન અથવા પૃષ્ઠ પર દરેક સંબંધિત કામગીરી વિશે વિગતવાર માહિતીને વર્ગીકૃત કરે છે અને પ્રદર્શિત કરે છે.
   ટાઈમલાઈન: એક પૃષ્ઠ અથવા એપ્લિકેશન લોડ વિનંતિની શરૂઆત કરવામાં આવે ત્યારે જ બ્રાઉઝરમાં થતી દરેક પ્રવૃત્તિનું ઊંડાણપૂર્વક વિશ્લેષણ કરવાની મંજૂરી આપે છે.
5. આ વિભાગો ઉપરાંત, તમે ટાઈમલાઈન ટેબના જમણા ખૂણામાં સ્થિત, >> ચિહ્ન દ્વારા નીચેના સાધનોને પણ ઍક્સેસ કરી શકો છો.
   પ્રોફાઇલ: CPU પ્રોફાઇલર અને હીપ પ્રોફાઇલર વિભાગોમાં તૂટી, સક્રિય એપ્લિકેશન અથવા પૃષ્ઠનો સર્વગ્રાહી મેમરી વપરાશ અને એકંદર એક્ઝેક્યુશન સમય પૂરો પાડે છે.
   સુરક્ષા: સક્રિય પૃષ્ઠ અથવા એપ્લિકેશન સાથે પ્રમાણપત્ર સમસ્યાઓ અને અન્ય સુરક્ષા-સંબંધિત સમસ્યાઓ હાઈલાઇટ કરે છે.
   સંસાધનો: આ તે છે જ્યાં તમે કૂકીઝ, સ્થાનિક સ્ટોરેજ, એપ્લિકેશન કેશ અને વર્તમાન વેબ પૃષ્ઠ અથવા એપ્લિકેશન દ્વારા ઉપયોગમાં લેવાતા અન્ય સ્થાનિક ડેટા સ્ત્રોતોનું નિરીક્ષણ કરી શકો છો.
   ઓડિટીઝ: કોઈ પૃષ્ઠ અથવા એપ્લિકેશનના લોડ સમય અને સામાન્ય કામગીરીને ઑપ્ટિમાઇઝ કરવાનાં રીતો ઑફર કરે છે.
6. ડિવાઇસ મોડ તમને એક સિમ્યુલેટરમાં સક્રિય પૃષ્ઠને જોવા દે છે જે લગભગ બરાબર તે પ્રમાણે રેન્ડર કરે છે કારણ કે તે ડઝનથી વધુ ઉપકરણો પૈકી એક પર દેખાશે, જેમાં આઇપેડ, આઈફોન અને સેમસંગ ગેલેક્સી જેવા કેટલાક જાણીતા Android અને iOS મોડલ્સનો સમાવેશ થાય છે. તમને તમારા ચોક્કસ વિકાસ અથવા પરીક્ષણ જરૂરિયાતોને ફિટ કરવા માટે કસ્ટમ સ્ક્રીન રીઝોલ્યુશનને અનુકરણ કરવાની ક્ષમતા પણ આપવામાં આવે છે. ઉપકરણ મોડને ચાલુ અને બંધ કરવા માટે, એલિમેન્ટ્સ ટેબની ડાબી બાજુએ સીધી સ્થિત મોબાઇલ ફોન આયકન પસંદ કરો.
7. તમે તમારા ડેવલપર ટૂલ્સની દેખાવ અને લાગણીને કસ્ટમાઇઝ કરી શકો છો, જે પહેલા મેનૂ બટન પર ક્લિક કરે છે જે ત્રણ ઊભી સ્થિરીકૃત બિંદુઓથી રજૂ થાય છે અને ઉપરોક્ત ટૅબ્સની ડાબી તરફની બાજુમાં સ્થિત છે. આ ડ્રોપ-ડાઉન મેનૂમાંથી, તમે ડોકને ફરી બદલી શકો છો, વિવિધ સાધનોને બતાવી શકો છો અથવા છુપાવો તેમજ વધુ વિગતવાર વસ્તુઓ જેમ કે ઉપકરણ નિરીક્ષક લોન્ચ કરી શકો છો. તમે શોધી શકશો કે આ વિભાગમાં મળેલી સેટિંગ્સ દ્વારા ડિવાઇન ટુલ્સ ઇન્ટરફેસ પોતે અત્યંત વૈવિધ્યપૂર્ણ બનાવી શકાય છે.

મોઝીલા ફાયરફોક્સ

ફાયરફોક્સના વેબ ડેવલપર વિભાગમાં ડિઝાઇનર્સ, ડેવલપર્સ અને ટેસ્ટર્સ જેવા સાધનોનો સમાવેશ થાય છે, જેમ કે સ્ટાઇલ એડિટર અને પિક્સેલ-ટાર્ગેટિંગ આઈડ્રોપર.

ભલામણ વાંચન: ટોચના 25 Greasemonkey અને Tampermonkey વપરાશકર્તા સ્ક્રિપ્ટો

1. ફાયરફોક્સના મુખ્ય મેનૂ બટન પર ક્લિક કરો, જે ત્રણ આડી રેખાઓ દ્વારા રજૂ થાય છે અને બ્રાઉઝર વિંડોની જમણા ખૂણામાં સ્થિત છે.
2. ડ્રોપ-ડાઉન મેનૂ દેખાય ત્યારે, વિકાસકર્તા લેબલ ચિહ્ન પસંદ કરો. વેબ ડેવલોપર મેનૂ હવે પ્રદર્શિત થવું જોઈએ, જેમાં નીચેના વિકલ્પો હશે. તમે જોશો કે મોટાભાગની મેનૂ આઇટમ પાસે તેમની સાથે સંકળાયેલ કીબોર્ડ શૉર્ટકટ્સ છે.
   સાધનો ટૉગલ કરો: વિકાસકર્તા સાધનોના ઇન્ટરફેસને પ્રદર્શિત કરે છે અથવા છુપાવે છે, સામાન્ય રીતે બ્રાઉઝર વિંડોના તળિયે સ્થિત. કીબોર્ડ શૉર્ટકટ: મેક ઓએસ એક્સ ( ALT (ઓપ્શન) + COMMAND + I ), વિન્ડોઝ ( CTRL + SHIFT + I )
   ઇન્સ્પેક્ટર: તમને ડિજૉગિંગ દ્વારા સક્રિય પૃષ્ઠ પર તેમજ પોર્ટેબલ ડિવાઇસ પર CSS અને HTML કોડનું નિરીક્ષણ અને / અથવા ઝટકો કરવાની મંજૂરી આપે છે. કીબોર્ડ શોર્ટકટ: મેક ઓએસ એક્સ ( ALT (વિકલ્પ) + COMMAND + C ), વિન્ડોઝ ( CTRL + SHIFT + C )
   વેબ કન્સોલ: તમને સક્રિય પૃષ્ઠની અંદર JavaScript સમીકરણો એક્ઝેક્યુટ કરવા તેમજ સુરક્ષા ચેતવણીઓ, નેટવર્ક વિનંતીઓ, CSS સંદેશા અને વધુ સહિત લૉગ ડેટાના વિવિધ સેટની સમીક્ષા કરવાની મંજૂરી આપે છે. કીબોર્ડ શૉર્ટકટ: મેક ઓએસ એક્સ ( ALT (ઓપ્શન) + COMMAND + K ), વિન્ડોઝ ( CTRL + SHIFT + K )
   ડીબગર: જાવાસ્ક્રિપ્ટ ડિબગર તમને બ્રેકપોઇન્સ સેટ કરીને, ડોમ નોડ્સનું નિરીક્ષણ, કાળા બોક્સિંગ બાહ્ય સ્રોતો, અને ઘણું બધુ નિર્ધારિત કરીને ખામીને નિર્ધારિત અને સુધારી શકે છે. જેમ ઇન્સ્પેક્ટર સાથે કેસ છે, આ લક્ષણ પણ દૂરસ્થ ડિબગીંગને સપોર્ટ કરે છે. કીબોર્ડ શૉર્ટકટ: મેક ઓએસ એક્સ ( ALT (વિકલ્પ) + COMMAND + S ), વિન્ડોઝ ( CTRL + SHIFT + S)
   પ્રકાર એડિટર: તમને નવા સ્ટાઈલશીટો બનાવવાની અને સક્રિય વેબ પેજ સાથે સમાવિષ્ઠ કરવાની પરવાનગી આપે છે, અથવા વર્તમાન શીટ્સને સંપાદિત કરો અને પરીક્ષણ કરો કે તમારા ફેરફારો બ્રાઉઝરમાં ફક્ત એક ક્લિકથી રેન્ડર કરે છે. કીબોર્ડ શોર્ટકટ: મેક ઓએસ એક્સ, વિન્ડોઝ ( SHIFT + F7 )
   પર્ફોર્મન્સ: સક્રિય પૃષ્ઠના નેટવર્ક પ્રદર્શન, ફ્રેમ દર ડેટા, જાવાસ્ક્રિપ્ટ એક્ઝેક્યુશન ટાઇમ અને સ્ટેટ, પેઇન્ટ ફ્લિકિંગ, અને ઘણું બધુ વિગતવાર વિરામ પાડે છે. કીબોર્ડ શોર્ટકટ: મેક ઓએસ એક્સ, વિન્ડોઝ ( SHIFT + F5 )
   નેટવર્ક: સંલગ્ન પદ્ધતિ, મૂળ ડોમેન, પ્રકાર, કદ અને સમય વીતેલા સમય સાથે બ્રાઉઝર દ્વારા શરૂ કરવામાં આવેલી દરેક નેટવર્ક વિનંતીની સૂચિ આપે છે. કીબોર્ડ શૉર્ટકટ: મેક ઓએસ એક્સ ( ALT (OPTION) + COMMAND + Q ), વિન્ડોઝ ( CTRL + SHIFT + Q )
   વિકાસકર્તા ટૂલબાર: ઇન્ટરેક્ટિવ કમાંડ લાઈન દુભાષિયો ખોલે છે બધા ઉપલબ્ધ આદેશો અને તેમના યોગ્ય વાક્યરચનાની યાદી માટે દુભાષિયામાં મદદ દાખલ કરો. કીબોર્ડ શોર્ટકટ: મેક ઓએસ એક્સ, વિન્ડોઝ ( SHIFT + F2 )
   WebIDE: ફાયરફોક્સ ઓએસ ચલાવતા વાસ્તવિક ઉપકરણ અથવા ફાયરફોક્સ ઓએસ સિમ્યુલેટર દ્વારા વેબ એપ્લિકેશન્સ બનાવવા અને ચલાવવાની ક્ષમતા પ્રદાન કરે છે. કીબોર્ડ શોર્ટકટ: મેક ઓએસ એક્સ, વિન્ડોઝ ( SHIFT + F8 )
   બ્રાઉઝર કન્સોલ: વેબ કન્સોલ (ઉપર જુઓ) જેવી જ વિધેય પૂરા પાડે છે. જો કે, બધા વેબફોકસ એપ્લિકેશન ( એક્સ્ટેન્શન્સ અને બ્રાઉઝર-લેવલ ફંક્શન્સ સહિત) માટે માત્ર પાછલા ડેટાને જ સક્રિય વેબ પેજની વિરુદ્ધ છે. કીબોર્ડ શોર્ટકટ: મેક ઓએસ એક્સ ( SHIFT + COMMAND + J ), વિન્ડોઝ ( CTRL + SHIFT + J )
   રિસ્પોન્સિવ ડિઝાઇન દૃશ્ય: તમને ગોળીઓ અને સ્માર્ટફોન સહિતના બહુવિધ ડિવાઇસની નકલ કરવા માટે વિવિધ ઠરાવો, લેઆઉટ્સ અને સ્ક્રીન કદમાં વેબ પૃષ્ઠને તરત જોવાની મંજૂરી આપે છે. કીબોર્ડ શૉર્ટકટ: મેક ઓએસ એક્સ ( ALT (OPTION) + COMMAND + M ), વિન્ડોઝ ( CTRL + SHIFT + M )
   આઇડ્રોપર: વ્યક્તિગત રીતે પસંદ કરેલ પિક્સેલ માટે હેક્સ રંગ કોડ પ્રદર્શિત કરે છે.
   સ્ક્રેચપેડ : તમને પોપ-આઉટ ફાયરફોક્સ વિંડોમાંથી જ JavaScript કોડનાં સ્નિપેટ્સ લખવા, સંપાદિત કરવા, સંકલિત કરવા અને ચલાવવા દે છે. કીબોર્ડ શોર્ટકટ: મેક ઓએસ એક્સ, વિન્ડોઝ ( SHIFT + F4 )
   પૃષ્ઠનો સ્રોત: મૂળ બ્રાઉઝર-આધારિત વિકાસકર્તા સાધન, આ વિકલ્પ ફક્ત સક્રિય પૃષ્ઠ માટે ઉપલબ્ધ સ્રોત કોડને પ્રદર્શિત કરે છે. કીબોર્ડ શૉર્ટકટ: મેક ઓએસ એક્સ ( COMMAND + U ), વિન્ડોઝ ( CTRL + U )
   વધુ સાધનો મેળવો: Mozilla ની સત્તાવાર ઍડ-ઑન્સ સાઇટ પર વેબ ડેવલપરના ટૂલબોક્સ સંગ્રહ ખોલે છે, જેમાં ડઝન જેટલા લોકપ્રિય એક્સ્ટેન્શન્સનો સમાવેશ થાય છે જેમ કે ફાયરબગ અને ગ્રેઝમકી.

માઈક્રોસોફ્ટ એડ / ઇન્ટરનેટ એક્સપ્લોરર

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

1. વધુ ક્રિયાઓ મેનૂ પર ક્લિક કરો, જે ત્રણ બિંદુઓ દ્વારા રજૂ થાય છે અને બ્રાઉઝર વિંડોની જમણા ખૂણામાં સ્થિત છે. ડ્રોપ-ડાઉન મેનૂ દેખાય ત્યારે, F12 વિકાસકર્તા સાધનો લેબલવાળા વિકલ્પને પસંદ કરો. મેં પહેલેથી જ ઉલ્લેખ કર્યો છે, તમે F12 કીબોર્ડ શૉર્ટકટ મારફતે સાધનોને પણ ઍક્સેસ કરી શકો છો.
2. વિકાસ ઇન્ટરફેસ હવે પ્રદર્શિત થવું જોઈએ, ખાસ કરીને બ્રાઉઝર વિંડોની નીચે. નીચેનાં ટૂલ્સ ઉપલબ્ધ છે, દરેક તેમના સંબંધિત ટેબ મથાળાં પર ક્લિક કરીને અથવા સાથેના કીબોર્ડ શોર્ટકટનો ઉપયોગ કરીને દરેક સુલભ છે.
   DOM એક્સપ્લોરર: સક્રિય પૃષ્ઠમાં સ્ટાઇલશીટ્સ અને HTML ને સંપાદિત કરવાની મંજૂરી આપે છે, તમે જાઓ છો તે રીતે સંશોધિત પરિણામોનું રેન્ડરિંગ કરો. જ્યાં લાગુ હોય ત્યાં કોડને સ્વતઃપૂર્ણ કરવા માટે ઇન્ટેલિસેન્સ વિધેયનો ઉપયોગ કરે છે. કીબોર્ડ શોર્ટકટ: (CTRL + 1)
   કન્સોલ: સંકલિત API દ્વારા કાઉન્ટર્સ, ટાઈમર્સ, નિશાનો અને કસ્ટમાઇઝ કરેલ સંદેશાઓ સહિત ડીબગિંગ માહિતી સબમિટ કરવાની ક્ષમતા પ્રદાન કરે છે. ઉપરાંત, તમે સક્રિય વેબ પૃષ્ઠમાં કોડ દાખલ કરી શકો છો અને રીઅલ ટાઇમમાં વ્યક્તિગત ચલોને અસાઇન કરેલ મૂલ્યોને સંશોધિત કરી શકો છો. કીબોર્ડ શોર્ટકટ: (CTRL + 2)
   ડિબગર: ચાલો તમે બ્રેકપોઇન્ટ્સ સેટ કરો અને તમારો કોડ ડિબગ કરો જ્યારે તે એક્ઝેક્યુટ કરે, જો જરૂરી હોય તો રેખા દ્વારા રેખા. કીબોર્ડ શોર્ટકટ: (CTRL + 3)
   નેટવર્ક: પૃષ્ઠ લોડ અને પ્રોટોકોલ વિગતો, સામગ્રી પ્રકાર, બેન્ડવિડ્થ વપરાશ અને વધુ સહિત એક્ઝેક્યુશન દરમિયાન બ્રાઉઝર દ્વારા શરૂ કરાયેલ દરેક નેટવર્ક વિનંતીની સૂચિ. કીબોર્ડ શોર્ટકટ: (CTRL + 4)
   પર્ફોમન્સ: તમને પૃષ્ઠ લોડ વખત અને અન્ય પ્રવૃત્તિઓને ઝડપી કરવામાં સહાય માટે વિગતો ફ્રેમ દર, સીપીયુ ઉપયોગ અને અન્ય પ્રદર્શન-સંબંધિત મેટ્રિક્સ. કીબોર્ડ શોર્ટકટ: (CTRL + 5)
   મેમરી: વિવિધ સમયના અંતરાલોથી સ્નેપશોટ સાથે મેમરી વપરાશ સમયરેખાને પ્રદર્શિત કરીને વર્તમાન વેબ પૃષ્ઠ પર સંભવિત મેમરી લિકને અલગ પાડવા અને સુધારવામાં સહાય કરે છે. કીબોર્ડ શોર્ટકટ: (CTRL + 6)
   ઇમ્યુલેશન: સ્માર્ટફોન્સ, ગોળીઓ અને અન્ય ઉપકરણોનું અનુકરણ કરીને, સક્રિય પ્રકરણ વિવિધ ઠરાવો અને સ્ક્રીન કદમાં કેવી રીતે પ્રસ્તુત કરશે તે તમને બતાવે છે. વપરાશકર્તા એજન્ટ અને પેજ ઓરિએન્ટેશનને સંશોધિત કરવાની સાથે સાથે વિવિધ અક્ષાંશ અને રેખાંશ દાખલ કરીને વિવિધ ભૌગોલિકતાને અનુરૂપ કરવાની ક્ષમતા પણ પ્રદાન કરે છે. કીબોર્ડ શોર્ટકટ: (CTRL + 7)
3. કન્સોલ દર્શાવવા માટે જ્યારે અન્ય કોઈ સાધનની અંદર તેની અંદર જમણી કૌંસ સાથે ચોરસ બટન પર ક્લિક કરો, જે વિકાસ સાધનોના ઇન્ટરફેસના ઉપલા જમણા-ખૂણે સ્થિત છે.
4. અનડૉક કરવા માટે, વિકાસકર્તા સાધનો ઇન્ટરફેસ કરે છે તેથી તે એક અલગ વિંડો બની જાય છે, બે કેસ્કેડિંગ લંબચોરસ દ્વારા રજૂ કરેલા બટન પર ક્લિક કરો અથવા નીચેના કીબોર્ડ શૉર્ટકટનો ઉપયોગ કરો: CTRL + P તમે સેકન્ડ ટાઇમ CTRL + P દબાવીને સાધનોને તેમના મૂળ સ્થાને પાછી મૂકી શકો છો.

એપલ સફારી (ફક્ત OS X)

સફારીની વૈવિધ્યસભર દેવ સાધનો, મોટા વિકાસકર્તા સમુદાયને પ્રતિબિંબિત કરે છે જે તેમની ડિઝાઇન અને પ્રોગ્રામિંગ જરૂરિયાતો માટે મેકનો ઉપયોગ કરે છે. એક શક્તિશાળી કન્સોલ અને પરંપરાગત લોગીંગ અને ડીબગિંગ સુવિધા ઉપરાંત, એક સરળ ઉપયોગ જવાબદાર ડિઝાઇન મોડ અને તમારા પોતાના બ્રાઉઝર એક્સ્ટેન્શન્સ બનાવવા માટે એક સાધન પણ પૂરું પાડવામાં આવે છે.

1. તમારી સ્ક્રીનની ટોચ પર સ્થિત, બ્રાઉઝર મેનૂમાં સફારી પર ક્લિક કરો. જ્યારે ડ્રોપ-ડાઉન મેનૂ દેખાય છે, પસંદગીઓ પસંદ કરો. તમે આ મેનુ આઇટમની જગ્યાએ નીચેની કીબોર્ડ શૉર્ટકટનો ઉપયોગ પણ કરી શકો છો: COMMAND + COMMA (,)
2. સફારીની પસંદગીઓ ઇન્ટરફેસ હવે પ્રદર્શિત થવી જોઈએ, તમારા બ્રાઉઝર વિંડોને ઓવરલે કરીને. હેડરની જમણા બાજુ પર સ્થિત ઉન્નત આયકન પર ક્લિક કરો.
3. અદ્યતન પસંદગીઓ હવે દૃશ્યમાન હોવી જોઈએ. આ સ્ક્રીનના તળિયે એક વિકલ્પ છે જે મેનૂ બારમાં બતાવો વિકાસ મેનૂ , એક ચેક બૉક્સ સાથે. જો બૉક્સમાં કોઈ ચેક માર્ક દેખાતું નથી, તો ત્યાં એક મૂકવા માટે તેના પર ક્લિક કરો.
4. ઉપલા ડાબા ખૂણામાં મળેલી લાલ 'x' પર ક્લિક કરીને પસંદગીઓ ઇન્ટરફેસને બંધ કરો.
5. હવે તમે બુકમાર્ક્સ અને વિંડોમાં સ્થિત, વિકસિત નામના બ્રાઉઝર મેનૂમાં એક નવો વિકલ્પ નોટિસ કરીશું. આ મેનુ વસ્તુ પર ક્લિક કરો એક ડ્રોપ-ડાઉન મેનૂ હવે પ્રદર્શિત થવું જોઈએ, જેમાં નીચેના વિકલ્પો હશે.
   આનાથી પૃષ્ઠ ખોલો: વર્તમાનમાં તમારા Mac પર ઇન્સ્ટોલ કરેલ અન્ય બ્રાઉઝર્સ પૈકી એકમાં સક્રિય વેબ પૃષ્ઠ ખોલવા માટેની મંજૂરી આપે છે.
   વપરાશકર્તા એજન્ટ: તમને ક્રોમ, ફાયરફોક્સ અને ઇન્ટરનેટ એક્સ્પ્લોરરના વિવિધ વર્ઝન સહિત ડઝનથી વધુ પૂર્વ નિર્ધારિત વપરાશકર્તા એજન્ટ મૂલ્યોમાંથી પસંદ કરવા દે છે, સાથે સાથે તમારી પોતાની કસ્ટમ સ્ટ્રિંગ પણ વ્યાખ્યાયિત કરે છે.
   રિસ્પોન્સિવ ડિઝાઇન મોડ દાખલ કરો: વર્તમાન પૃષ્ઠને રેન્ડર કરે છે કારણ કે તે વિવિધ ઉપકરણો અને વિવિધ સ્ક્રીન ઠરાવો પર દેખાશે.
   વેબ ઇન્સ્પેક્ટર બતાવો: સફારીના દેવ સાધનો માટેનું મુખ્ય ઇન્ટરફેસ પ્રારંભ કરે છે, જે સામાન્ય રીતે તમારી બ્રાઉઝર સ્ક્રીનના તળિયે મૂકવામાં આવે છે અને નીચેનાં વિભાગો ધરાવે છે: તત્વો , નેટવર્ક , સંપત્તિ , સમયરેખા , ડીબગર , સંગ્રહ , કન્સોલ .
   એરર કન્સોલ બતાવો: ડિવાઇસ ટૂલ્સ ઇન્ટરફેસને લોન્ચ કરે છે, સીધા કન્સોલ ટેબ પર જે ભૂલો, ચેતવણીઓ, અને અન્ય શોધી લોગ ડેટા દર્શાવે છે.
   પૃષ્ઠ બતાવો સ્રોત: સ્રોત ટૅબ ખોલે છે, જે દસ્તાવેજ દ્વારા વર્ગીકૃત કરાયેલ સક્રિય પૃષ્ઠ માટે સ્રોત કોડ પ્રદર્શિત કરે છે.
   પૃષ્ઠ સ્રોતો બતાવો: બતાવો પૃષ્ઠ સ્રોત વિકલ્પ તરીકે સમાન કાર્ય કરે છે.
   સ્નિપેટ સંપાદક બતાવો: એક નવી વિંડો ખોલે છે જ્યાં તમે CSS અને HTML કોડ દાખલ કરી શકો છો, તેના આઉટપુટનું પૂર્વાવલોકન કરો.
   એક્સ્ટેંશન બિલ્ડર બતાવો: CSS, HTML, અને JavaScript સાથે સફારી એક્સટેન્શન્સ બનાવવા અથવા સંપાદિત કરવાની ક્ષમતા પ્રદાન કરે છે.
   ટાઈમલાઈન રેકોર્ડિંગ દર્શાવો: ટાઇમલાઇન્સ ટૅબ ખોલે છે અને નેટવર્ક વિનંતીઓ, લેઆઉટ અને રેન્ડરીંગ માહિતી તેમજ વાસ્તવિક સમયમાં JavaScript એક્ઝેક્યુશન પ્રદર્શિત કરવાનું શરૂ કરે છે.
   ખાલી કૅશેસ: હાલમાં તમારી હાર્ડ ડ્રાઇવ પર સંગ્રહિત કરવામાં આવી રહ્યું છે તે સમગ્ર કેશ કાઢી નાંખે છે.
   કૅશેસ અક્ષમ કરો: સફારીને કેશીંગથી અટકાવે છે જેથી બધી સામગ્રીને દરેક પૃષ્ઠ લોડ પર સર્વરમાંથી પુનઃપ્રાપ્ત કરવામાં આવે.
   છબીઓ અક્ષમ કરો: છબીઓને બધા વેબ પૃષ્ઠો પર રેન્ડર કરવાથી અટકાવે છે.
   સ્ટાઇલ અક્ષમ કરો: કોઈ પૃષ્ઠ લોડ થાય ત્યારે સીએસએસ ગુણધર્મોને અવગણે છે.
   JavaScript અક્ષમ કરો: બધા પૃષ્ઠો પર JavaScript એક્ઝેક્યુશન નિયંત્રિત કરે છે.
   એક્સટેન્શન્સને અક્ષમ કરો: બ્રાઉઝરમાં ચાલી રહેલા તમામ ઇન્સ્ટોલ કરેલા એક્સ્ટેન્શન્સને પ્રતિબંધિત કરે છે.
   સાઇટ-વિશિષ્ટ હેક્સને અક્ષમ કરો: જો Safari ને સક્રિય વેબ પેજને લગતી ચોક્કસ મુદ્દો (હે) ને નિયંત્રિત કરવા માટે સંશોધિત કરવામાં આવે છે, તો આ વિકલ્પ તે ફેરફારોને અવરોધે છે જેથી પૃષ્ઠ લોડ થઈ શકે છે કારણ કે તે પહેલાં આ ફેરફારોની રજૂઆત થઈ હોત.
   સ્થાનિક ફાઇલ પ્રતિબંધો અક્ષમ કરો: બ્રાઉઝરને તમારા સ્થાનિક ડિસ્ક પરની ફાઇલોની ઍક્સેસ કરવાની મંજૂરી આપે છે, સુરક્ષા કારણોસર ડિફૉલ્ટ રૂપે પ્રતિબંધિત છે તે ક્રિયા
   ક્રોસ-ઓરિજિન પ્રતિબંધો અક્ષમ કરો: એક્સએસએસ અને અન્ય સંભવિત જોખમોને રોકવા માટે ડિફૉલ્ટ રૂપે આ નિયંત્રણો મૂકવામાં આવે છે. જો કે, વિકાસનાં હેતુઓ માટે તેમને અસ્થાયી રૂપે અસ્થાયીરૂપે અક્ષમ કરવાની જરૂર છે.
   સ્માર્ટ શોધ ફીલ્ડમાંથી જાવાસ્ક્રિપ્ટને મંજૂરી આપો: જ્યારે સક્ષમ હોય, ત્યારે JavaScript ને URL દાખલ કરવાની ક્ષમતા પ્રદાન કરે છે: સરનામાં બારમાં સીધા શામેલ છે.
   અસુરક્ષિત તરીકે SHA-1 પ્રમાણપત્રોનો વ્યવહાર કરો: SHA-1 અલ્ગોરિધમનો ઉપયોગ કરીને SSL પ્રમાણપત્રોને વ્યાપક રીતે આઉટ-ઓફ-ડેટ અને નબળા માનવામાં આવે છે