ఎలా ప్రతి బ్రౌజర్ లో ఒక వెబ్ పేజీ యొక్క మూల కోడ్ చూడండి

మీరు చదివే వెబ్ పేజ్ ఇతర విషయాలు, సోర్స్ కోడ్తో రూపొందించబడింది. అది మీ వెబ్ బ్రౌజర్ డౌన్లోడ్లు మరియు ప్రస్తుతం మీరు చదివిన వాటిని అనువదిస్తుంది.

చాలా వెబ్ బ్రౌజర్లు మీరు ఏ పరికరాన్ని ఉపయోగిస్తున్నారనే దానితో పాటు అదనపు సాఫ్ట్వేర్ అవసరం లేకుండా వెబ్ పేజీ యొక్క సోర్స్ కోడ్ను చూడగల సామర్థ్యాన్ని అందిస్తాయి.

కొన్ని కూడా ఆధునిక కార్యాచరణ మరియు నిర్మాణం అందిస్తున్నాయి, సులభంగా పేజీలో HTML మరియు ఇతర ప్రోగ్రామింగ్ కోడ్ పరిశీలన చేయడం.

మీరు మూల కోడ్ను చూడాలనుకుంటున్నారా?

మీరు ఒక పేజీ సోర్స్ కోడ్ను చూడాలనుకుంటున్నందుకు అనేక కారణాలు ఉన్నాయి. మీరు ఒక వెబ్ డెవలపర్ అయితే, మీరు బహుశా మరొక ప్రోగ్రామర్ యొక్క ప్రత్యేక శైలి లేదా అమలులో కవర్లు కింద ఒక పీక్ తీసుకోవాలని ఇష్టం. బహుశా మీరు నాణ్యతా హామీలో ఉన్నారని మరియు ఒక వెబ్ పేజీలోని కొంత భాగాన్ని దాని మార్గాన్ని ఎలా ప్రవర్తిస్తుందో లేదా ఎలా వ్యవహరిస్తుందో తెలుసుకోవడానికి ప్రయత్నిస్తున్నారు.

మీరు మీ స్వంత పేజీలను ఎలా కోడ్ చేసుకోవాలో తెలుసుకోవడానికి మరియు కొన్ని నిజ-ప్రపంచ ఉదాహరణల కోసం అన్వేషిస్తున్న ఒక అనుభవశూన్యుడు కూడా. వాస్తవానికి, మీరు ఈ వర్గాల్లో ఏమీ రాకపోవడమే మరియు కేవలం ఉత్సుకతతో మూలంను చూడాలనుకుంటున్నారా.

ఎంపిక మీ బ్రౌజర్లో సోర్స్ కోడ్ను ఎలా వీక్షించాలో సూచనల క్రింద ఇవ్వబడ్డాయి.

గూగుల్ క్రోమ్

నడుస్తున్నది: Chrome OS, Linux, MacOS, Windows

క్రోమ్ యొక్క డెస్క్టాప్ వెర్షన్ కింది కీబోర్డ్ సత్వరమార్గాన్ని ఉపయోగించడం ద్వారా పేజీ యొక్క సోర్స్ కోడ్ను చూడడానికి మూడు వేర్వేరు పద్ధతులను అందిస్తుంది: CTRL + U (MacOS లో కమాండ్ + OPTION + U ).

నొక్కినప్పుడు, ఈ సత్వరమార్గం సక్రియాత్మక పేజీ కోసం HTML మరియు ఇతర కోడ్ను ప్రదర్శించే క్రొత్త బ్రౌజర్ టాబ్ ను తెరుస్తుంది. కంపార్ట్మెంటలైజ్ చేయడానికి సులభమైనది మరియు మీరు వెతుకుతున్న దాన్ని కనుగొనడం ద్వారా ఈ మూలం రంగు-కోడెడ్ మరియు నిర్మాణాత్మకంగా ఉంటుంది. మీరు Chrome యొక్క చిరునామా బార్లో క్రింది టెక్స్ట్ను వెబ్ పేజీ యొక్క URL యొక్క ఎడమ వైపుకి చేర్చడం ద్వారా , మరియు ఎంటర్ కీని నొక్కడం ద్వారా అక్కడ పొందవచ్చు: వీక్షణ-మూలం: (అంటే, వీక్షణ-మూలం: https: // www. .).

మూడవ పద్ధతి క్రోమ్ యొక్క డెవలపర్ ఉపకరణాల ద్వారా ఉంది , ఇది మీరు పేజీ యొక్క కోడ్లో ఒక లోతైన డైవ్ తీసుకోవడానికి మరియు పరీక్ష మరియు అభివృద్ధి ప్రయోజనాల కోసం ఫ్లై ఆన్లో సర్దుబాటు చేయడానికి అనుమతిస్తుంది. ఈ కీబోర్డ్ సత్వరమార్గాన్ని ఉపయోగించడం ద్వారా డెవలపర్ ఉపకరణాల ఇంటర్ఫేస్ను తెరవవచ్చు మరియు మూసివేయవచ్చు: CTRL + SHIFT + I ( మాక్ఓఎస్లో కమాండ్ + ఐచ్చిక + I ). మీరు ఈ క్రింది మార్గాన్ని తీసుకొని వాటిని ప్రారంభించవచ్చు.

  1. ఎగువ కుడి చేతి మూలన ఉన్న Chrome యొక్క ప్రధాన మెను బటన్పై క్లిక్ చేయండి మరియు మూడు నిలువుగా ఉండే సమలేఖన బిందువులతో సూచించబడుతుంది.
  2. డ్రాప్-డౌన్ మెను కనిపించినప్పుడు, మీ టూల్స్ కర్సర్ను మరింత టూల్స్ ఎంపికలో ఉంచండి.
  3. ఉప మెను కనిపించినప్పుడు, డెవలపర్ సాధనాలను క్లిక్ చేయండి.

Android
ఆండ్రాయిడ్ కోసం Chrome లో వెబ్ పేజీ యొక్క మూలాన్ని చూస్తే కింది టెక్స్ట్ని దాని చిరునామా (లేదా URL) ముందుగా సమర్పించి దానిని సమర్పించడం చాలా సులభం: వీక్షణ-మూలం :. దీనికి ఉదాహరణ వీక్షణ-మూలం: https: // www. . ప్రశ్నలోని పేజీ నుండి HTML మరియు ఇతర కోడ్ తక్షణమే క్రియాశీల విండోలో ప్రదర్శించబడతాయి.

iOS
మీ ఐప్యాడ్, ఐప్యాడ్ లేదా ఐపాడ్ టచ్లో Chrome ను ఉపయోగించి సోర్స్ కోడ్ను చూసే స్థానిక పద్ధతులు లేనప్పటికీ, వీక్షణ మూలాన్ని అనువర్తనం వంటి మూడవ-పక్ష పరిష్కారాన్ని ఉపయోగించడం సరళమైనది మరియు అత్యంత ప్రభావవంతమైనది.

App Store లో $ 0.99 కోసం అందుబాటులో ఉంది, వీక్షణ మూలాన్ని మీరు పేజీ యొక్క URL ను ఎంటర్ చెయ్యమని అడుగుతుంది (లేదా Chrome చిరునామా అడ్రస్ బార్ నుండి కాపీ చేసి, కొన్నిసార్లు ఇది సాధారణ మార్గంగా తీసుకోండి) మరియు అంతే. HTML మరియు ఇతర సోర్స్ కోడ్ను చూపడంతోపాటు, అనువర్తనం కూడా వ్యక్తిగత పేజీ ఆస్తులు, డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్ (DOM), అలాగే పేజీ పరిమాణం, కుకీలు మరియు ఇతర ఆసక్తికరమైన వివరాలను ప్రదర్శించే ట్యాబ్లను కలిగి ఉంటుంది.

మైక్రోసాఫ్ట్ ఎడ్జ్

నడుపుట: విండోస్

ఎడ్జ్ బ్రౌజర్ దాని డెవలపర్ ఉపకరణాలు ఇంటర్ఫేస్ ద్వారా ప్రస్తుత పేజీ యొక్క సోర్స్ కోడ్ను మీరు వీక్షించడానికి, విశ్లేషించడానికి మరియు మానిప్యులేట్ చేయడానికి మిమ్మల్ని అనుమతిస్తుంది. ఈ సులభ ఉపకరణపట్టీని యాక్సెస్ చేయడానికి మీరు ఈ కీబోర్డ్ సత్వరమార్గాలలో ఒకదాన్ని ఉపయోగించవచ్చు: F12 లేదా CTRL + U. మీరు బదులుగా మౌస్ను కావాలనుకుంటే, ఎడ్జ్ యొక్క మెను బటన్ (కుడి ఎగువ మూలలో ఉన్న మూడు చుక్కలు) పై క్లిక్ చేసి జాబితా నుండి F12 డెవలపర్ ఉపకరణాలు ఎంపికను ఎంచుకోండి.

Dev టూల్స్ మొట్టమొదటిసారిగా అమలు చేయబడిన తరువాత, బ్రౌజర్ యొక్క సందర్భ మెనుని (వెబ్ పుటలో ఎక్కడైనా కుడి-క్లిక్ చేయడం ద్వారా అందుబాటులోకి రావచ్చు) రెండు అదనపు ఎంపికలను జోడించగలుగుతుంది : ఎలిమెంట్ను పర్యవేక్షించండి మరియు మూలంని వీక్షించండి , తరువాతి డెవలపర్ యొక్క డీబగ్గర్ భాగాన్ని తెరుస్తుంది టూల్స్ ఇంటర్ఫేస్ సోర్స్ కోడ్ తో నిండి.

మొజిల్లా ఫైర్ ఫాక్స్

నడుస్తున్న: Linux, macos, Windows

ఫైర్ఫాక్స్ యొక్క డెస్క్టాప్ సంస్కరణలో ఒక పేజీ యొక్క సోర్స్ కోడ్ను వీక్షించేందుకు మీరు మీ కీబోర్డ్లో CTRL + U ( మాక్ఓస్లో కమాండ్ + U ) ను నొక్కవచ్చు, ఇది సక్రియాత్మక వెబ్ పేజీ కోసం HTML మరియు ఇతర కోడ్ ఉన్న క్రొత్త ట్యాబ్ను తెరుస్తుంది.

కింది పాఠాన్ని ఫైర్ఫాక్స్ చిరునామా బార్లో నేరుగా పేజీ యొక్క URL యొక్క ఎడమ వైపుకు టైప్ చేస్తే, బదులుగా ప్రస్తుత ట్యాబ్లో ప్రస్తుత ట్యాబ్లో చూపించడానికి అదే మూలాన్ని కలిగిస్తుంది: వీక్షణ-మూలం: (అంటే వీక్షణ-మూలం: https: // www.) .

పేజీ యొక్క సోర్స్ కోడ్ను ప్రాప్యత చేయడానికి మరొక మార్గం ఫైర్ఫాక్స్ డెవలపర్ ఉపకరణాల ద్వారా, క్రింది దశలను తీసుకోవడం ద్వారా ప్రాప్తి చేయవచ్చు.

  1. మీ బ్రౌజర్ విండో యొక్క ఎగువ కుడి చేతి మూలలో ఉన్న ప్రధాన మెను బటన్పై క్లిక్ చేసి, మూడు హారిజాంటల్ పంక్తులు ప్రాతినిధ్యం వహించండి.
  2. పాప్-అవుట్ మెను కనిపించినప్పుడు, డెవలపర్ "రెంచ్" ఐకాన్పై క్లిక్ చేయండి.
  3. ఇప్పుడు వెబ్ డెవలపర్ కాంటెక్స్ట్ మెను కనిపించాలి. పేజీ మూల ఎంపికను ఎంచుకోండి.

ఫైరుఫాక్సు కూడా ఒక పేజీ యొక్క ఒక నిర్దిష్ట భాగానికి సోర్స్ కోడ్ను చూడడానికి అనుమతిస్తుంది, ఇది సమస్యలను వేరు చేయడాన్ని సులభతరం చేస్తుంది. అలా చేయుటకు, మొదట మీరు మీ మౌస్తో ఆసక్తి ఉన్న ప్రాంతమును హైలైట్ చేస్తారు. తరువాత, కుడి-క్లిక్ చేసి బ్రౌజరు కాంటెక్స్ట్ మెన్యు నుండి వీక్షణ ఎంపిక మూలాన్ని ఎంచుకోండి.

Android
ఫైర్ఫాక్స్ యొక్క Android సంస్కరణలో సోర్స్ కోడ్ను వీక్షించడం వెబ్ పుట యొక్క URL ను కింది వచనంతో పూరించడం ద్వారా సాధ్యమవుతుంది: వీక్షణ-మూలం :. ఉదాహరణకు, మీరు బ్రౌజర్ యొక్క చిరునామా పట్టీలో ఈ క్రింది వచనాన్ని సమర్పించాలని మీరు కోరుకుంటున్న HTML మూలాన్ని వీక్షించడానికి : వీక్షణ-మూలం: https: // www. .

iOS
మీ ఐప్యాడ్, ఐప్యాడ్ లేదా ఐపాడ్ టచ్లో వెబ్ పేజీ సోర్స్ కోడ్ను చూడడానికి మా సిఫారసు చేయబడిన పధ్ధతి వీక్షణ మూలం అనువర్తనం ద్వారా, App స్టోర్లో $ 0.99 కోసం లభిస్తుంది. ఫైర్ఫాక్స్తో నేరుగా విలీనం కాకపోయినా, HTML మరియు ఇతర పేజీలో అనుబంధిత పేజీతో అనుబంధించబడిన ఇతర కోడ్ను అన్వయించేందుకు బ్రౌజర్ నుండి URL ను సులభంగా కాపీ చేసి పేస్ట్ చెయ్యవచ్చు.

ఆపిల్ సఫారి

IOS మరియు MacOS లో నడుస్తోంది

iOS
IOS కోసం సఫారి డిఫాల్ట్గా పేజీ మూలాన్ని వీక్షించే సామర్ధ్యాన్ని కలిగి లేనప్పటికీ, బ్రౌజర్ వీక్షణ సోర్స్ అనువర్తనంతో సజావుగా సమిష్టిగా కలిసిపోతుంది - App స్టోర్లో $ 0.99 కోసం అందుబాటులో ఉంటుంది.

ఈ మూడవ-పక్ష అనువర్తనాన్ని సఫారి బ్రౌజర్కు తిరిగి ఇన్స్టాల్ చేసి, ఆపై స్క్రీన్ దిగువ భాగంలో ఉన్న మరియు భాగస్వామ్యం చేసిన బటన్పై నొక్కండి మరియు ఒక చదరపు మరియు పైకి బాణంతో ప్రాతినిధ్యం వహించండి. IOS షీట్ ఇప్పుడు మీ సఫారి విండో దిగువ భాగంలో కప్పివేస్తుంది, కనిపించాలి. కుడికి స్క్రోల్ చేయండి మరియు వీక్షణ మూల బటన్ను ఎంచుకోండి.

క్రియాశీల పేజీ యొక్క సోర్స్ కోడ్ యొక్క రంగు-కోడెడ్, నిర్మాణాత్మక ప్రాతినిధ్యం ఇప్పుడు ప్రదర్శించబడాలి, ఇతర టాబ్లతో పాటు మీరు పేజీ ఆస్తులు, స్క్రిప్ట్లు మరియు మరిన్నింటిని వీక్షించడానికి అనుమతించబడతాయి.

MacOS
Safari యొక్క డెస్క్టాప్ వెర్షన్లో పేజీ యొక్క సోర్స్ కోడ్ను వీక్షించడానికి, మీరు మొదట దాని డెవలప్ మెనుని ప్రారంభించాలి. క్రింద ఉన్న దశలను ఈ రహస్య మెనూని సక్రియం చేసి, ఒక పేజీ యొక్క HTML సోర్స్ను ప్రదర్శించడం ద్వారా మీకు నడవడం.

  1. స్క్రీన్ పై భాగంలో ఉన్న బ్రౌజర్ మెనూలో సఫారిపై క్లిక్ చేయండి.
  2. డ్రాప్-డౌన్ మెను కనిపించినప్పుడు, ప్రాధాన్యతల ఎంపికను ఎంచుకోండి.
  3. Safari యొక్క ప్రాధాన్యతలు ఇప్పుడు కనిపించాలి. ఎగువ వరుసలోని కుడి వైపున ఉన్న అధునాతన చిహ్నంపై క్లిక్ చేయండి.
  4. అడ్వాన్స్డ్ సెక్షన్ యొక్క దిగువ వైపు మెనూ బార్లో Show డెవలప్ మెనుని ఖాళీ చెక్బాక్స్తో కలిపి ఎంపిక చేసుకుంటారు. ఈ పెట్టెలో చెక్ చెక్ మార్క్ ఉంచడానికి ఒకసారి క్లిక్ చేయండి మరియు ఎగువ ఎడమ చేతి మూలలో కనిపించే ఎరుపు 'x' పై క్లిక్ చేయడం ద్వారా ప్రాధాన్యతల విండోను మూసివేయండి.
  5. స్క్రీన్ ఎగువన ఉన్న డెవలప్ మెనులో క్లిక్ చేయండి.
  6. డ్రాప్-డౌన్ మెను కనిపించినప్పుడు, పేజీ మూలాన్ని చూపు ఎంచుకోండి. మీరు బదులుగా క్రింది కీబోర్డ్ సత్వరమార్గాన్ని ఉపయోగించవచ్చు: COMMAND + OPTION + U.

Opera

నడుస్తున్న: Linux, macos, Windows

Opera బ్రౌజర్లోని సక్రియాత్మక వెబ్ పేజీ నుండి సోర్స్ కోడ్ను వీక్షించడానికి క్రింది కీబోర్డు సత్వరమార్గాన్ని ఉపయోగించండి: CTRL + U ( మాక్ఓఎస్లో COMMAND + OPTION + U ). మీరు బదులుగా ప్రస్తుత టాబ్లో మూలాన్ని లోడ్ చేయాలనుకుంటే, చిరునామా పట్టీలోని పేజీ యొక్క URL యొక్క ఎడమవైపున క్రింది టెక్స్ట్ను టైప్ చేసి ఎంటర్ నొక్కండి : వీక్షణ-మూలం: (అంటే, వీక్షణ-మూలం: https: // www. ).

Opera యొక్క డెస్క్టాప్ వెర్షన్ కూడా మీరు దాని ఇంటిగ్రేటెడ్ డెవలపర్ ఉపకరణాలు ఉపయోగించి HTML మూల, CSS మరియు ఇతర అంశాలను వీక్షించడానికి అనుమతిస్తుంది. ఈ ఇంటర్ఫేస్ను ప్రారంభించేందుకు, మీ డిఫాల్ట్గా మీ ప్రధాన బ్రౌజర్ విండోలో కుడి వైపున కనిపిస్తుంది, కింది కీబోర్డ్ సత్వరమార్గాన్ని నొక్కండి: CTRL + SHIFT + I ( మాక్ఓఎస్లో కమాండ్ + ఐచ్చిక + I ).

కింది దశలను తీసుకొని ఒపెరా యొక్క డెవలపర్ టూల్సెట్ కూడా అందుబాటులో ఉంది.

  1. మీ బ్రౌజర్ విండో ఎగువ ఎడమ చేతి మూలలో ఉన్న Opera లోగోపై క్లిక్ చేయండి.
  2. డ్రాప్-డౌన్ మెను కనిపించినప్పుడు, మీ టూల్స్ కర్సర్ను మరింత టూల్స్ ఎంపికలో ఉంచండి.
  3. ప్రదర్శన డెవలపర్ మెనుపై క్లిక్ చేయండి.
  4. మళ్లీ Opera లోగోపై క్లిక్ చేయండి.
  5. డ్రాప్-డౌన్ మెను కనిపించినప్పుడు, మీ కర్సర్ను డెవలపర్ మీద ఉంచండి.
  6. ఉప మెను కనిపించినప్పుడు, డెవలపర్ ఉపకరణాల్లో క్లిక్ చేయండి.

వివాల్డి

వివాల్డి బ్రౌజర్లో పేజీ మూలాన్ని వీక్షించేందుకు పలు మార్గాలు ఉన్నాయి. సరళమైనది CTRL + U కీబోర్డ్ సత్వరమార్గం ద్వారా, ఇది క్రొత్త ట్యాబ్లో సక్రియ పేజీ నుండి కోడ్ను అందిస్తుంది.

మీరు ప్రస్తుత ట్యాబ్లో సోర్స్ కోడ్ను ప్రదర్శించే పేజీ URL యొక్క ముందు కింది వచనాన్ని జోడించవచ్చు: వీక్షణ-మూలం :. దీని యొక్క ఉదాహరణ వీక్షణ-మూలం అవుతుంది: http: // www. .

బ్రౌజర్ యొక్క ఇంటిగ్రేటెడ్ డెవలపర్ ఉపకరణాల ద్వారా మరొక పద్ధతి Ctrl + SHIFT + I కలయికను లేదా బ్రౌజర్ యొక్క ఉపకరణాల మెనులో డెవలపర్ ఉపకరణాలు ఎంపికను నొక్కడం ద్వారా ప్రాప్తి చేయవచ్చు - ఎగువ ఎడమ చేతి మూలలో 'V' చిహ్నంపై క్లిక్ చేయడం ద్వారా కనుగొనబడుతుంది. Dev టూల్స్ ఉపయోగించి పేజీ యొక్క మూలం యొక్క మరింత లోతైన విశ్లేషణకు అనుమతిస్తుంది.