Home-theater-designers
డెవలపర్‌లకు Chrome DevTools ఒక ముఖ్యమైన ఆస్తి. ఇతర బ్రౌజర్‌లు చాలా సులభమైన ట్రబుల్షూటింగ్ సాధనాలను అందిస్తుండగా, క్రోమ్ డెవ్‌టూల్స్ బహుళ-ఫంక్షనల్ ఇంటర్‌ఫేస్ మరియు ప్రజాదరణ కారణంగా మీ దృష్టికి విలువైనవి.
డీబగ్గింగ్ సాధనాల శక్తివంతమైన సూట్ కారణంగా డెవలపర్‌లకు Chrome అత్యంత ప్రజాదరణ పొందిన బ్రౌజర్. Chrome డెవ్‌టూల్స్ ఉపయోగించడం సులభం, కానీ దాని నుండి ఎక్కువ ప్రయోజనం పొందడానికి ఇది ఎలా పనిచేస్తుందో మీరు అర్థం చేసుకోవాలి.
Chrome డెవలపర్ టూల్స్ ఎలా పని చేస్తాయి
Chrome డెవ్‌టూల్స్ వెబ్‌సైట్‌లో దాని లోపం కన్సోల్ మరియు ఇతర డీబగ్గింగ్ మరియు పర్యవేక్షణ సాధనాల ద్వారా సమస్యలను పరిష్కరించడానికి మిమ్మల్ని అనుమతిస్తాయి. DevTools ను ఉపయోగించడం వలన ఫ్రంటెండ్ లొసుగులు బయటపడతాయి మరియు మొబైల్ మరియు టాబ్లెట్ పరికరాల్లో మీ వెబ్‌సైట్ ఎలా కనిపిస్తుందో పర్యవేక్షించడానికి మిమ్మల్ని అనుమతిస్తుంది.
DevTools తో, మీరు జావాస్క్రిప్ట్, HTML మరియు CSS వంటి వెబ్‌సైట్ కోడ్‌లో నిజ-సమయ సవరణలను చేయవచ్చు మరియు మీ మార్పుల తక్షణ ఫలితాలను పొందవచ్చు.
DevTools ద్వారా మీరు చేసే మార్పులు వెబ్‌సైట్‌ను శాశ్వతంగా ప్రభావితం చేయవు. మీరు వాటిని వాస్తవ సోర్స్ కోడ్‌కి వర్తింపజేసినట్లుగా వారు ఆశించిన ఫలితాన్ని తాత్కాలికంగా మాత్రమే ప్రదర్శిస్తారు. ఇది మీ వెబ్‌సైట్‌ను చాలా వేగంగా లోడ్ చేయడానికి మార్గాలను రూపొందించడానికి మిమ్మల్ని అనుమతిస్తుంది మరియు బగ్‌లను ఇనుము చేయడం సులభం చేస్తుంది.
Chrome DevTools ని ఎలా యాక్సెస్ చేయాలి
మీరు అనేక విధాలుగా Chrome DevTools ని యాక్సెస్ చేయవచ్చు. Mac OS లో సత్వరమార్గ పద్ధతిలో డెవలపర్ సాధనాలను తెరవడానికి, నొక్కండి Cmd + Opt + I . మీరు Windows OS ఉపయోగిస్తుంటే, నొక్కండి Ctrl + Shift + I మీ కీబోర్డ్‌లోని కీలు.
ప్రత్యామ్నాయంగా, స్క్రీన్ కుడి ఎగువ మూలలో ఉన్న మూడు చుక్కలపై క్లిక్ చేయడం ద్వారా మీరు Chrome డెవలపర్ సాధనాలను యాక్సెస్ చేయవచ్చు. ఆ దిశగా వెళ్ళు మరిన్ని సాధనాలు మరియు ఎంచుకోండి డెవలపర్ ఉపకరణాలు . వెబ్‌పై కుడి క్లిక్ చేసి, దానిపై క్లిక్ చేయడం మరొక ఎంపిక తనిఖీ చేయండి ఎంపిక.
వెబ్‌సైట్ నిర్ధారణ కోసం Chrome డెవలపర్ సాధనాలను ఉపయోగించడం
Chrome DevTools వెబ్‌పేజీని సర్దుబాటు చేయడానికి మరియు పరిష్కరించడానికి అనేక మార్గాలను అందిస్తుంది. DevTools మీకు సహాయపడే కొన్ని మార్గాలను చూద్దాం.
స్మార్ట్‌ఫోన్‌లో మీ వెబ్‌సైట్ ఎలా ఉందో చూడండి
మీరు మీ Chrome బ్రౌజర్‌ని డెవలపర్ మోడ్‌కి మార్చిన తర్వాత, అది మీ వెబ్‌పేజీకి సగం సైజు వెర్షన్‌ని అందిస్తుంది. అయితే, ఇది మీకు స్మార్ట్‌ఫోన్ లేదా టాబ్లెట్‌లో ఎలా ఉంటుందో దాని గురించి నిజమైన వీక్షణను ఇవ్వదు.
కృతజ్ఞతగా, వెబ్‌పేజీ స్క్రీన్ పరిమాణాన్ని సెట్ చేయడంతో పాటు, వివిధ మొబైల్ స్క్రీన్ రకాలు మరియు వెర్షన్‌ల మధ్య మారడానికి కూడా Chrome DevTools మిమ్మల్ని అనుమతిస్తుంది.
ఆ ఎంపికను యాక్సెస్ చేయడానికి, టోగుల్ చేయండి తనిఖీ చేయండి మోడ్. తరువాత, దానిపై క్లిక్ చేయండి ప్రతిస్పందించే DevTools యొక్క ఎగువ-ఎడమ మూలలో డ్రాప్-డౌన్ మరియు మీకు ఇష్టమైన మొబైల్ పరికరాన్ని ఎంచుకోండి. మీరు ఎంచుకున్న మొబైల్ పరికరం పరిమాణానికి సరిపోయేలా వెబ్‌పేజీ రెండర్ చేస్తుంది మరియు సర్దుబాటు చేస్తుంది.
వాల్‌పేపర్ స్లైడ్‌షో ఎలా తయారు చేయాలి
వెబ్‌పేజీ యొక్క సోర్స్ ఫైల్‌లను యాక్సెస్ చేయండి
మీరు Chrome DevTools ద్వారా వెబ్‌పేజీని రూపొందించే ఫైల్‌లను యాక్సెస్ చేయవచ్చు. ఈ ఫైల్‌లను యాక్సెస్ చేయడానికి, పై క్లిక్ చేయండి మూలాలు DevTools మెను ఎగువ భాగంలో ఎంపిక. ఇది వెబ్‌సైట్ యొక్క ఫైల్ సిస్టమ్‌ను బహిర్గతం చేస్తుంది మరియు మీకు ఎడిటింగ్ కూడా ఇస్తుంది.
మీరు అనేక వనరులను కలిగి ఉన్న వెబ్‌పేజీతో వ్యవహరించేటప్పుడు సహాయపడే సోర్స్ ఫైల్‌ల కోసం కూడా మీరు శోధించవచ్చు. DevTools ద్వారా సోర్స్ ఫైల్ కోసం వెతకడానికి, దానిపై క్లిక్ చేయండి వెతకండి కన్సోల్ పైన ఉన్న ఎంపిక.
అయితే, మీరు కనుగొనలేకపోతే వెతకండి ఎంపిక, కీబోర్డ్ సత్వరమార్గాలను ఉపయోగించడం ఉత్తమ ప్రత్యామ్నాయం. Mac OS లో, నొక్కండి Cmd + Opt + F సోర్స్ ఫైల్ కోసం శోధించడానికి కీలు. మీరు Windows OS ఉపయోగిస్తుంటే, నొక్కండి Ctrl + Shift + F సోర్స్ ఫైల్ సెర్చ్ బార్‌ను యాక్సెస్ చేయడానికి కీ.
వెబ్‌పేజీకి ప్రత్యక్ష సవరణలు చేయండి
DevTools ని ఉపయోగించే ముఖ్య ఉద్దేశాలలో ఒకటి వెబ్‌పేజీలోని మూలకాల తక్షణ నకిలీ సవరణ . మీరు డెవలపర్ టూల్స్‌కి మారిన తర్వాత, వెబ్‌సైట్ యొక్క HTML కంటెంట్‌ని క్లిక్ చేయడం ద్వారా దాన్ని సవరించవచ్చు మూలకాలు ఎంపిక. అప్పుడు, కోడ్ ఎడిటర్‌లో మీరు మార్పులను వర్తింపజేయాలనుకుంటున్న ఏ పాయింట్‌పై కుడి క్లిక్ చేసి, ఎంచుకోండి HTML గా సవరించండి .
ఇన్‌లైన్‌లో లేని CSS లక్షణాలను సవరించడానికి, ఎంచుకోండి మూలాలు . తరువాత, మీరు సవరించదలిచిన CSS ఫైల్‌ని ఎంచుకోండి. లైవ్ ఎడిట్ చేయడానికి కోడ్ కన్సోల్‌లో మీకు నచ్చిన లైన్‌లో మీ కర్సర్‌ను ఉంచండి. ఇలా చేయడం వల్ల మీరు వెబ్‌పేజీకి వర్తించే ఏవైనా స్టైల్ మార్పులపై తక్షణ ఫీడ్‌బ్యాక్ లభిస్తుంది.
మీరు డెవ్‌టూల్స్ ద్వారా పేజీని ఎడిట్ చేసినప్పుడు, మీ బ్రౌజర్‌లో పేజీని మళ్లీ లోడ్ చేయడం వలన దాని అసలు రూపం తిరిగి వస్తుంది మరియు ఎడిట్ మీకు మాత్రమే కనిపిస్తుంది. DevTools ద్వారా ఎడిటింగ్ ఇతర వినియోగదారుల కోసం ఆ వెబ్‌సైట్ యొక్క సజావుగా లేదా వినియోగాన్ని ప్రభావితం చేయదు.
DevTools కన్సోల్‌తో జావాస్క్రిప్ట్ కోడ్‌ను డీబగ్ చేయండి
జావాస్క్రిప్ట్‌ను డీబగ్ చేయడానికి ఉత్తమమైన మార్గాలలో ఒకటి Chrome డెవలపర్ సాధనాలను ఉపయోగించడం. ఇది మీకు చెల్లని స్క్రిప్ట్‌ల ప్రత్యక్ష నివేదికను అలాగే బగ్ యొక్క ఖచ్చితమైన స్థానాన్ని అందిస్తుంది.
జావాస్క్రిప్ట్‌తో వెబ్‌సైట్ రూపకల్పన చేసేటప్పుడు DevTools ని ఎల్లప్పుడూ తెరిచి ఉంచడం మంచి పద్ధతి. ఉదాహరణకు, రన్నింగ్ console.log () సూచనల సమితిలో జావాస్క్రిప్ట్ యొక్క ఆదేశం ప్రోగ్రామ్ విజయవంతంగా నడుస్తుంటే DevTools కన్సోల్‌లో ఆ లాగ్ ఫలితాన్ని ప్రదర్శిస్తుంది.
డిఫాల్ట్‌గా, కన్సోల్ మీ వెబ్‌సైట్‌లో ఏవైనా జావాస్క్రిప్ట్ సమస్యలను నివేదిస్తుంది. మీరు DevTools దిగువ భాగంలో కన్సోల్‌ను కనుగొనవచ్చు లేదా దానిపై క్లిక్ చేయడం ద్వారా దాన్ని యాక్సెస్ చేయవచ్చు కన్సోల్ Chrome DevTools విండో ఎగువన ఎంపిక.
డేటాబేస్ నుండి వనరును లోడ్ చేయడాన్ని పర్యవేక్షించండి
జావాస్క్రిప్ట్‌ని డీబగ్ చేయడంతో పాటు, వెబ్‌సైట్ డేటాబేస్ నుండి సరిగ్గా లోడ్ అవ్వని వనరుల వివరాలను కూడా కన్సోల్ మీకు అందిస్తుంది.
బ్యాకెండ్ సమస్యలను డీబగ్ చేయడానికి ఇది ఎల్లప్పుడూ ఉత్తమ మార్గం కానప్పటికీ, ఏ వనరులు తిరిగి వస్తాయో ఇది ఇప్పటికీ మీకు తెలియజేస్తుంది 404 ఆ మూలకాల యొక్క డేటాబేస్ ప్రశ్నను అమలు చేసిన తర్వాత లోపం.
సంబంధిత: సాధారణ వెబ్‌సైట్ లోపాలు మరియు వాటి అర్థం
Chrome డెవలపర్ టూల్స్ యొక్క ధోరణిని మార్చండి
Chrome డెవలపర్ సాధనాల స్థానాన్ని మార్చడానికి, DevTools లోని మూడు మెనూ చుక్కలపై క్లిక్ చేయండి (బ్రౌజర్‌లో ప్రధానమైనది కాదు). అప్పుడు నుండి మీకు ఇష్టమైన స్థానాన్ని ఎంచుకోండి డాక్ సైడ్ ఎంపిక.
Chrome DevTools పొడిగింపులను ఇన్‌స్టాల్ చేయండి
మీరు Chrome DevTools తో పనిచేసే భాష లేదా ఫ్రేమ్‌వర్క్-నిర్దిష్ట పొడిగింపులను కూడా ఇన్‌స్టాల్ చేయవచ్చు. ఈ పొడిగింపులను ఇన్‌స్టాల్ చేయడం వలన మీ వెబ్‌పేజీని మరింత సమర్థవంతంగా డీబగ్ చేయవచ్చు.
మీరు Chrome లో Chrome DevTools కోసం అందుబాటులో ఉన్న పొడిగింపుల జాబితాను యాక్సెస్ చేయవచ్చు ఫీచర్ చేసిన DevTools పొడిగింపులు గ్యాలరీ.
వెబ్‌సైట్‌లో భద్రతా సమస్యల కోసం తనిఖీ చేయండి
లభ్యత వంటి పారామితుల ఆధారంగా మీ వెబ్‌సైట్ ఎంత సురక్షితమో అంచనా వేయడానికి Chrome DevTools మిమ్మల్ని అనుమతిస్తుంది వెబ్ సెక్యూరిటీ సర్టిఫికేట్లు మరియు ఇతరులతో కనెక్షన్ ఎంత సురక్షితం. మీ వెబ్‌సైట్ సురక్షితంగా ఉందో లేదో తనిఖీ చేయడానికి, దానిపై క్లిక్ చేయండి భద్రత DevTools ఎగువన ఎంపిక.
ది భద్రత ట్యాబ్ మీ వెబ్‌సైట్ యొక్క భద్రతా వివరాల యొక్క అవలోకనాన్ని అందిస్తుంది మరియు ఏదైనా సంభావ్య బెదిరింపులను మీకు తెలియజేస్తుంది.
మీ వెబ్‌సైట్‌ను ఆడిట్ చేయండి
Chrome DevTools నిర్దిష్ట పారామితుల ఆధారంగా మీ వెబ్‌సైట్ యొక్క మొత్తం పనితీరును తనిఖీ చేయడానికి మిమ్మల్ని అనుమతించే ఒక ఫీచర్‌ను కలిగి ఉంది.
ఆ ఫీచర్‌ని యాక్సెస్ చేయడానికి, ఎంచుకోండి లైట్ హౌస్ DevTools విండో ఎగువన ఎంపిక. తరువాత, మీరు తనిఖీ చేయదలిచిన పారామితులను ఎంచుకుని, ఆపై టిక్ చేయండి మొబైల్ లేదా డెస్క్‌టాప్ వివిధ ప్లాట్‌ఫారమ్‌లలో మీ వెబ్‌పేజీ ఎలా పనిచేస్తుందో చూడటానికి ఎంపికలు.
తరువాత, దానిపై క్లిక్ చేయండి నివేదికను రూపొందించండి మీరు ముందుగా ఎంచుకున్న పారామితుల ఆధారంగా మీ వెబ్‌పేజీ యొక్క విశ్లేషణను అమలు చేయడానికి.
మీరు వెబ్‌సైట్ యొక్క రన్-టైమ్ లేదా లోడింగ్ పనితీరును కూడా క్లిక్ చేయడం ద్వారా అంచనా వేయవచ్చు పనితీరు ఎంపిక. పరీక్షను అమలు చేయడానికి, ప్రక్కన ఉన్న చిహ్నంపై క్లిక్ చేయండి రికార్డ్ బటన్ క్లిక్ చేయండి రన్-టైమ్ విశ్లేషణ చేయడానికి ఎంపిక. ప్రత్యామ్నాయంగా, లోడ్-సమయ పనితీరును అంచనా వేయడానికి దాని క్రింద ఉన్న రీలోడ్ బటన్‌పై క్లిక్ చేయండి. నొక్కండి ఆపు ఎనలైజర్‌ను ఆపి ఫలితాలను ప్రదర్శించడానికి.
Chrome DevTools యొక్క ప్రయోజనాన్ని పొందండి
మీకు ఏది అవసరమో దాన్ని బట్టి, Chrome DevTools సాధారణ వెబ్‌సైట్ డీబగ్గింగ్ కంటే ఎక్కువ చేయడానికి మిమ్మల్ని అనుమతిస్తుంది. కృతజ్ఞతగా, DevTools అన్ని నైపుణ్య స్థాయిల ప్రోగ్రామర్‌ల కోసం ఉపయోగించడం సులభం. మీరు సందర్శించే వెబ్‌సైట్‌ల సోర్స్ కోడ్‌ను చూడటం ద్వారా వెబ్‌సైట్ ఫ్రంటెండ్ డెవలప్‌మెంట్ యొక్క కొన్ని ప్రాథమికాలను కూడా మీరు నేర్చుకోవచ్చు.
సిపియుకి ఎంత వేడిగా ఉంటుంది
మేము ఈ వ్యాసంలో చర్చించని కొన్ని ఇతర ఎంపికలను కూడా మీరు కనుగొనవచ్చు. కాబట్టి, అందుబాటులో ఉన్న ఫీచర్లతో ఆడుకోవడానికి సంకోచించకండి. అంతేకాకుండా, ఈ ఫీచర్లను సర్దుబాటు చేయడం వల్ల వెబ్‌సైట్‌కు కొంచెం హాని లేదు.
షేర్ చేయండి షేర్ చేయండి ట్వీట్ ఇమెయిల్ రాస్‌ప్బెర్రీ పైలో Chrome OS ని ఎలా ఉపయోగించాలిChromebook కొనలేకపోతున్నారా? Raspbian కి ప్రత్యామ్నాయం కోసం చూస్తున్నారా? మీ రాస్‌ప్బెర్రీ పైలో Chrome OS వెర్షన్‌ను ఎలా ఇన్‌స్టాల్ చేయాలో ఇక్కడ ఉంది.
తదుపరి చదవండి సంబంధిత అంశాలు- అంతర్జాలం
- ప్రోగ్రామింగ్
- HTML
- వెబ్ అభివృద్ధి
- జావాస్క్రిప్ట్
- గూగుల్ క్రోమ్
ఇడోవు ఏదైనా స్మార్ట్ టెక్ మరియు ఉత్పాదకతపై మక్కువ చూపుతుంది. తన ఖాళీ సమయంలో, అతను కోడింగ్‌తో ఆడుతాడు మరియు అతను విసుగు చెందినప్పుడు చెస్‌బోర్డ్‌కి మారుతాడు, కానీ అతను ఒక్కోసారి రొటీన్ నుండి దూరంగా ఉండడాన్ని కూడా ఇష్టపడతాడు. ఆధునిక సాంకేతిక పరిజ్ఞానాన్ని ప్రజలకు చూపించాలనే అతని అభిరుచి అతన్ని మరింత రాయడానికి ప్రేరేపిస్తుంది.
ఇడోవు ఒమిసోలా నుండి మరిన్నిమా వార్తాలేఖకు సభ్యత్వాన్ని పొందండి
టెక్ చిట్కాలు, సమీక్షలు, ఉచిత ఈబుక్‌లు మరియు ప్రత్యేకమైన డీల్స్ కోసం మా వార్తాలేఖలో చేరండి!
సభ్యత్వం పొందడానికి ఇక్కడ క్లిక్ చేయండి