દરેક બ્રાઉઝરમાં વેબ પૃષ્ઠનો સોર્સ કોડ કેવી રીતે જોવો

તમે જે વેબ પૃષ્ઠ વાંચી રહ્યા છો તે અન્ય વસ્તુઓ, સ્રોત કોડ વચ્ચે બનેલી છે. આ તે માહિતી છે કે જે તમે હમણાં વાંચી રહ્યા છો તે તમારા વેબ બ્રાઉઝરને ડાઉનલોડ કરે છે અને અનુવાદ કરે છે.

મોટાભાગનાં વેબ બ્રાઉઝર્સ કોઈ વધારાના સૉફ્ટવેરની આવશ્યકતા વગર વેબ પૃષ્ઠનાં સ્રોત કોડને જોવાની ક્ષમતા પ્રદાન કરે છે, ભલેને તમે કયા પ્રકારનાં ઉપકરણ પર છો

કેટલાક અદ્યતન કાર્યક્ષમતા અને માળખાને પણ પ્રસ્તુત કરે છે, જે પૃષ્ઠ પર HTML અને અન્ય પ્રોગ્રામિંગ કોડને સરળ બનાવવાનું સરળ બનાવે છે.

શા માટે સોર્સ કોડ જોવા માંગો છો?

ત્યાં કેટલાક કારણો છે કે શા માટે તમે પૃષ્ઠનો સ્રોત કોડ જોઈ શકો છો. જો તમે વેબ ડેવલપર છો, તો કદાચ તમે અન્ય પ્રોગ્રામરની ચોક્કસ શૈલી અથવા અમલીકરણ પરના કવર હેઠળ ઝઘડો છો. કદાચ તમે ગુણવત્તાની ખાતરીમાં છો અને તે જાણવા માટે પ્રયાસ કરી રહ્યા છે કે શા માટે વેબ પૃષ્ઠનો કોઈ ચોક્કસ ભાગ રસ્તો રજૂ કરે છે અથવા તેનું વર્તન કરે છે.

તમે તમારા પોતાના પૃષ્ઠોને કોડ કેવી રીતે કોડેખવવું અને કેટલાક વાસ્તવિક દુનિયાની ઉદાહરણો શોધી રહ્યા છે તે જાણવા માટે શરૂ કરનાર પણ હોઈ શકો છો. અલબત્ત, શક્ય છે કે તમે આમાંની કોઈપણ કેટેગરીમાં ન આવો અને માત્ર તીવ્ર જિજ્ઞાસામાંથી સ્રોતને જોવા માગો છો.

તમારા બ્રાઉઝરના પસંદગીના સ્રોત કોડને કેવી રીતે જોવું તે નીચે આપેલ સૂચનો છે.

ગૂગલ ક્રોમ

ચાલુ: ક્રોમ ઓએસ, લિનક્સ, મેકઓએસ, વિન્ડોઝ

ક્રોમનું ડેસ્કટૉપ સંસ્કરણ, પૃષ્ઠના સ્રોત કોડને જોવા માટે ત્રણ વિવિધ પદ્ધતિઓ આપે છે, નીચેના કીબોર્ડ શૉર્ટકટનો ઉપયોગ કરીને પ્રથમ અને સૌથી સરળ: CTRL + U (MacOS પર COMMAND + OPTION + U ).

દબાવવામાં આવે ત્યારે, આ શૉર્ટકટ સક્રિય પૃષ્ઠ માટે HTML અને અન્ય કોડ પ્રદર્શિત કરતી એક નવો બ્રાઉઝર ટૅબ ખોલે છે. આ સ્રોત એ રંગ-કોડેડ છે અને તે રીતે રચવામાં આવી છે જે તેને સરળ બનાવવા અને તેને શોધી કાઢવા માટે સરળ બનાવે છે. તમે Chrome ના સરનામાં બારમાં નીચેના ટેક્સ્ટને દાખલ કરીને પણ મેળવી શકો છો, વેબ પૃષ્ઠના URL ની ડાબી બાજુની બાજુમાં ઉમેરાયેલા અને Enter કીને હિટ કરી શકો છો: જુઓ-સ્રોત: (એટલે ​​કે, દૃશ્ય-સ્રોત: https: // www .)

ત્રીજા પદ્ધતિ ક્રોમના ડેવલપર ટૂલ્સ દ્વારા છે , જે તમને પૃષ્ઠના કોડમાં ઊંડા ડાઈવ કરવા તેમજ પરીક્ષણ અને વિકાસનાં હેતુઓ માટે ધ ફ્લાય પર ઝટકો આપે છે. આ કિબોર્ડ શોર્ટકટનો ઉપયોગ કરીને ડેવલપર ટૂલ્સ ઇન્ટરફેસ ખોલી અને બંધ કરી શકાય છે: CTRL + SHIFT + I ( કોમાન્ડ + OPTION + મેક ઓ પર). તમે નીચેના પાથને લઈને પણ તેમને લોન્ચ કરી શકો છો.

1. Chrome ના મુખ્ય મેનૂ બટન પર ક્લિક કરો, ઉપલા જમણા-ખૂણામાં સ્થિત છે અને ત્રણ ઊભી ગોઠવાયેલ બિંદુઓ દ્વારા રજૂ થયેલ છે.
2. જ્યારે ડ્રોપ-ડાઉન મેનૂ દેખાય, ત્યારે વધુ ટૂલ્સ વિકલ્પ પર તમારું માઉસ કર્સર હૉવર કરો.
3. ઉપ-મેનૂ દેખાય ત્યારે, વિકાસકર્તા સાધનો પર ક્લિક કરો.

Android
Android માટે Chrome માં વેબ પૃષ્ઠનો સ્રોત જોવો એ નીચે આપેલા ટેક્સ્ટને તેના સરનામાં (અથવા URL) ની સામે ઉમેરવું અને તેને સબમિટ કરવાનું સરળ છે: જુઓ-સ્રોત:. આનું ઉદાહરણ દૃશ્ય-સ્રોત હશે: https: // www. . પ્રશ્નમાંના પૃષ્ઠમાંથી HTML અને અન્ય કોડ સક્રિય વિંડોમાં તરત પ્રદર્શિત થશે.

iOS
તમારા આઇપેડ, iPhone અથવા આઇપોડ ટચ પર ક્રોમનો ઉપયોગ કરીને સ્રોત કોડ જોવા માટેની કોઈ મૂળ પધ્ધતિઓ નથી, જ્યારે સરળ સ્રોત અને સૌથી અસરકારક છે, ત્રીજા-પક્ષના સોલ્યુશન્સ જેમ કે વ્યુ સોર્સ ઍપ્લિકેશનનો ઉપયોગ કરવો.

એપ સ્ટોરમાં $ 0.99 માટે ઉપલબ્ધ, સ્રોત જુઓ તમને પૃષ્ઠના URL દાખલ કરવા માટે પૂછે છે (અથવા તેને Chrome ના સરનામાં બારથી કૉપિ કરો / પેસ્ટ કરો, જે ક્યારેક લેવા માટે સૌથી સરળ માર્ગ છે) અને તે તે છે. એચટીએમએલ અને અન્ય સ્ત્રોત કોડ બતાવવા ઉપરાંત, એપ્લિકેશનમાં ટેબ્સ છે જે વ્યક્તિગત પૃષ્ઠ અસ્કયામતો, ડોક્યુમેન્ટ ઓબ્જેક્ટ મોડેલ (DOM), તેમજ પેજનું કદ, કૂકીઝ અને અન્ય રસપ્રદ વિગતો પ્રદર્શિત કરે છે.

માઈક્રોસોફ્ટ એડ

ચાલુ: વિન્ડોઝ

એજ બ્રાઉઝર તમને તેના વિકાસકર્તા ટૂલ્સ ઇન્ટરફેસ દ્વારા વર્તમાન પૃષ્ઠના સ્રોત કોડને જોઈ, વિશ્લેષણ અને તે પણ હેપ કરી શકે છે. આ સરળ સાધનોને ઍક્સેસ કરવા માટે તમે આ કીબોર્ડ શૉર્ટકટ્સમાંથી એકનો ઉપયોગ કરી શકો છો: F12 અથવા CTRL + U. જો તમે તેની જગ્યાએ માઉસ પસંદ કરો છો, તો એજની મેનૂ બટન પર ક્લિક કરો (ઉપલા જમણા-ખૂણે સ્થિત ત્રણ બિંદુઓ) અને યાદીમાંથી F12 વિકાસકર્તા સાધનો વિકલ્પ પસંદ કરો.

ડેવ ટૂલ્સ પ્રથમ વખત ચલાવવામાં આવે પછી, એજ બે વધારાના વિકલ્પો બ્રાઉઝરના સંદર્ભ મેનૂ (વેબપેજની અંદર જમણી ક્લિક કરીને સુલભ) માં ઉમેરે છે: તત્વ અને જુઓ સ્રોતની તપાસ કરો , બાદમાં જે dev ની ડિબગર ભાગ ખોલે છે. સાધનો ઈન્ટરફેસ સ્રોત કોડ સાથે રચાયેલ.

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

ચાલુ: Linux, macOS, Windows

ફાયરફોક્સના ડેસ્કટોપ વર્ઝનમાં પેજનું સ્રોત કોડ જોવા માટે તમે તમારા કીબોર્ડ પર CTRL + U ( કોમાન્ડ + યુ પર મેકઓસ) દબાવો, જે સક્રિય વેબ પેજ માટે એચટીએમએલ અને અન્ય કોડ ધરાવતી નવી ટેબ ખોલશે.

નીચે આપેલા ટેક્સ્ટને ફાયરફોક્સના સરનામાં બારમાં, પૃષ્ઠના URL ની સીધી જ સીધી જ લખવાથી, તે જ સ્રોતને બદલે વર્તમાન ટેબમાં બતાવવાનું કારણ બનશે: જુઓ-સ્રોત: (એટલે ​​કે, દૃશ્ય-સ્રોત: https: // www.) .

પૃષ્ઠના સ્રોત કોડને ઍક્સેસ કરવાની બીજી રીત Firefox ના વિકાસકર્તા ટૂલ્સ દ્વારા છે, જે નીચેના પગલાંઓ લઈને ઍક્સેસિબલ છે.

1. મુખ્ય મેનૂ બટન પર ક્લિક કરો, જે તમારી બ્રાઉઝર વિંડોના ઉપર જમણા ખૂણામાં સ્થિત છે અને ત્રણ આડી રેખાઓ દ્વારા રજૂ કરે છે.
2. જ્યારે પૉપ આઉટ મેનૂ દેખાય, ત્યારે વિકાસકર્તા "રૅન્ચ" ચિહ્ન પર ક્લિક કરો.
3. વેબ ડેવલપર સંદર્ભ મેનૂ હવે દૃશ્યક્ષમ હોવું જોઈએ. પૃષ્ઠ સ્રોત વિકલ્પ પસંદ કરો.

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

Android
ફાયરફોક્સના એન્ડ્રોઇડ સંસ્કરણમાં સ્રોત કોડ જોઈ રહ્યાં છે તે નીચેના ટેક્સ્ટ સાથે વેબ પેજના URL ને પ્રીફિક્સ કરીને કરી શકાય છે: જુઓ-સ્રોત:. ઉદાહરણ તરીકે, તમારા માટે HTML સ્રોત જોવા માટે, બ્રાઉઝરનાં સરનામાં બારમાં નીચે આપેલ ટેક્સ્ટ સબમિટ કરશો: જુઓ-સ્રોત: https: // www. .

iOS
તમારા આઈપેડ, આઇફોન અથવા આઇપોડ ટચ પર વેબ પૃષ્ઠ સ્રોત કોડ જોવા માટેની અમારી ભલામણ પદ્ધતિ એપ સ્રોતમાં $ 0.99 માટે ઉપલબ્ધ સ્ત્રોત એપ્લિકેશન મારફતે છે. જ્યારે ફાયરફોક્સ સાથે સીધી સંકલિત ન હોય, ત્યારે તમે HTML અને અન્ય પ્રશ્નના પેજ સાથે સંકળાયેલ અન્ય કોડને અનાવરોધિત કરવા માટે, બ્રાઉઝરમાંથી એક URL ને સરળતાથી કૉપિ કરીને પેસ્ટ કરી શકો છો.

એપલ સફારી

IOS અને macOS પર ચાલી રહ્યું છે

iOS
જો કે iOS માટે સફારી મૂળભૂત રીતે પૃષ્ઠ સ્રોતને જોવાની ક્ષમતાને શામેલ કરતું નથી, બ્રાઉઝર વ્યુ સ્રોત એપ્લિકેશન સાથે સીમિત રીતે સંકલિત કરે છે - એપ સ્ટોરમાં $ 0.99 માટે ઉપલબ્ધ છે.

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

સક્રિય પેજનું સ્રોત કોડનું રંગ-કોડેડ, માળખાગત પ્રતિનિધિત્વ હવે અન્ય ટૅબ્સ સાથે પ્રદર્શિત થવું જોઈએ જે તમને પૃષ્ઠ અસ્કયામતો, સ્ક્રિપ્ટો અને વધુ જોવાની મંજૂરી આપે છે.

મેકઓએસ
સફારીનાં ડેસ્કટોપ સંસ્કરણમાં પૃષ્ઠના સ્રોત કોડને જોવા માટે, તમારે તેના વિકાસ મેનૂને સક્ષમ કરવાની જરૂર છે. નીચેની પગલાઓ તમને આ છુપાયેલા મેનૂને સક્રિય કરીને અને પૃષ્ઠના HTML સ્રોતને પ્રદર્શિત કરે છે.

1. સ્ક્રીનની ટોચ પર સ્થિત, બ્રાઉઝર મેનૂમાં સફારી પર ક્લિક કરો.
2. ડ્રોપ-ડાઉન મેનૂ દેખાય ત્યારે, પસંદગીઓ વિકલ્પ પસંદ કરો.
3. સફારીની પસંદગીઓ હવે દૃશ્યક્ષમ હોવી જોઈએ. ટોચની પંક્તિની જમણા બાજુ પર સ્થિત ઉન્નત આયકન પર ક્લિક કરો.
4. ઉન્નત વિભાગના તળિયે, એક ખાલી ચકાસણીબોક્સ સાથે, મેનૂ બારમાં બતાવો વિકાસ મેનૂ શો લેબલ છે. આ બોક્સમાં એક ચેક માર્ક મૂકવા માટે એક વખત ક્લિક કરો અને ઉપલા ડાબા ખૂણામાં મળેલી લાલ 'x' પર ક્લિક કરીને પસંદગીઓ વિંડો બંધ કરો.
5. સ્ક્રીનના શીર્ષ પર સ્થિત વિકાસ મેનૂ પર ક્લિક કરો.
6. ડ્રોપ-ડાઉન મેનૂ દેખાય ત્યારે, પૃષ્ઠ સ્રોત બતાવો પસંદ કરો. તમે તેના બદલે નીચેના કીબોર્ડ શૉર્ટકટનો ઉપયોગ કરી શકો છો: COMMAND + OPTION + U

ઓપેરા

ચાલુ: Linux, macOS, Windows

ઑપેરા બ્રાઉઝરમાં સ્રોત કોડને જોવા માટે નીચેના કીબોર્ડ શૉર્ટકટનો ઉપયોગ કરો: CTRL + U ( મૅકોસ પર COMMAND + OPTION + U ). જો તમે વર્તમાન ટેબમાં સ્રોતને લોડ કરવાને બદલે પ્રાધાન્ય આપો છો, તો સરનામાં બારની અંદર પૃષ્ઠના URL ની ડાબી બાજુમાં નીચેનો ટેક્સ્ટ લખો અને Enter દબાવો : જુઓ-સ્રોત: (એટલે ​​કે, જુઓ-સ્રોત: https: // www. ).

ઓપેરાના ડેસ્કટૉપ સંસ્કરણ, તેના સંકલિત વિકાસકર્તા સાધનોનો ઉપયોગ કરીને તમને HTML સ્રોત, CSS અને અન્ય ઘટકોને જોઈ શકે છે. આ ઇન્ટરફેસને લોંચ કરવા માટે, કે જે તમારી મુખ્ય બ્રાઉઝર વિંડોની જમણી બાજુ પર ડિફોલ્ટ દેખાશે, નીચેના કીબોર્ડ શૉર્ટકટને દબાવો: CTRL + SHIFT + I ( મૅક્રોઝ પર COMMAND + OPTION + I ).

નીચેના પગલાંઓ લઈને ઓપેરાના ડેવલપર ટૂલ્સેટ પણ ઍક્સેસિબલ છે.

1. ઑપેરા લોગો પર ક્લિક કરો, જે તમારા બ્રાઉઝર વિંડોના ઉપર ડાબા-ખૂણે સ્થિત છે.
2. જ્યારે ડ્રોપ-ડાઉન મેનૂ દેખાય, ત્યારે વધુ ટૂલ્સ વિકલ્પ પર તમારું માઉસ કર્સર હૉવર કરો.
3. શો વિકાસકર્તા મેનૂ પર ક્લિક કરો .
4. ઓપેરા લોગો પર ફરીથી ક્લિક કરો.
5. જ્યારે ડ્રોપ-ડાઉન મેનૂ દેખાય, વિકાસકર્તા પર તમારા કર્સરને હૉવર કરો.
6. ઉપ-મેનૂ દેખાય ત્યારે, વિકાસકર્તા સાધનો પર ક્લિક કરો.

વિવાલ્ડી

વિવાલ્ડી બ્રાઉઝરમાં પૃષ્ઠ સ્રોતને જોવાના ઘણા રસ્તાઓ છે. સરળ CTRL + U કીબોર્ડ શૉર્ટકટ મારફતે છે, જે નવા ટૅબમાં સક્રિય પૃષ્ઠથી કોડ રજૂ કરે છે.

તમે નીચેના ટેક્સ્ટને પૃષ્ઠના URL ની સામે પણ ઉમેરી શકો છો, જે વર્તમાન ટેબમાં સોર્સ કોડ પ્રદર્શિત કરે છે: જુઓ-સ્રોત:. આનું ઉદાહરણ દૃશ્ય-સ્રોત હશે: http: // www. .

બ્રાઉઝરની એકીકૃત ડેવલપર ટૂલ્સ દ્વારા અન્ય પદ્ધતિ છે, જે CTRL + SHIFT + I મિશ્રણને અથવા બ્રાઉઝરનાં ટૂલ્સ મેનૂમાં ડેવલોપર ટૂલ્સ વિકલ્પ દબાવીને એક્સેસ કરી શકાય છે - ઉપલા ડાબા ખૂણામાં 'વી' લોગો પર ક્લિક કરીને જોવા મળે છે. દેવ સાધનોનો ઉપયોગ કરવાથી પૃષ્ઠના સ્રોતના વધુ વિગતવાર વિશ્લેષણની મંજૂરી મળે છે.