Chrome DevTools: டெவலப்பர் கருவிகளிலிருந்து அதிகபட்சப் பலனைப் பெறுவதற்கான ஒரு முழுமையான வழிகாட்டி

ஒரு வலைத்தளத்தின் செயல்திறன், அணுகல்தன்மை மற்றும் தேடுபொறித் தரவரிசையை மேம்படுத்த விரும்பும் எந்தவொரு வலை உருவாக்குநர், வடிவமைப்பாளர் அல்லது SEO நிபுணருக்கும் Chrome DevTools ஒரு இன்றியமையாத துணையாக மாறியுள்ளது. கூகுள் குரோமில் ஒருங்கிணைக்கப்பட்ட இந்தக் கருவிகள், வலைத்தளத்தின் செயல்பாடுகள் மீது ஆழமான புரிதலையும் கட்டுப்பாட்டையும் வழங்குகின்றன. இதன்மூலம், HTML மற்றும் CSS ஆய்வு முதல் விரிவான பிணையச் செயல்பாட்டுப் பகுப்பாய்வு, செயல்திறன் சோதனை மற்றும் மொபைல் உகப்பாக்கம் வரை அனைத்தையும் செய்ய முடிகிறது.

Chrome DevTools-ஐ முழுமையாகக் கற்றுக்கொண்டு, அதன் அனைத்து அம்சங்களையும் பயன்படுத்தி எந்தவொரு இணையதளத்திலும் உள்ள பிழைகளைச் சரிசெய்யவும், மேம்படுத்தவும், சிக்கல்களைக் கண்டறியவும் விரும்புகிறீர்களா? இந்தக் கட்டுரையில், இந்தக் கருவிகளிலிருந்து அதிகபட்சப் பலனைப் பெறத் தொடங்குவதற்கு நீங்கள் தெரிந்துகொள்ள வேண்டிய அனைத்தையும், அதாவது அவற்றை விரைவாகத் திறப்பது எப்படி, ஒவ்வொரு பேனலிலும் நீங்கள் எதைப் பகுப்பாய்வு செய்யலாம், ஒவ்வொரு செயல்பாட்டின் நோக்கம் என்ன, மேலும் அவற்றை டெவலப்மென்ட் மற்றும் SEO ஆகிய இரண்டிலும் எவ்வாறு பயன்படுத்துவது என்பது உட்பட அனைத்தையும், எடுத்துக்காட்டுகள் மற்றும் குறிப்புகளுடன் தெளிவாக விளக்குவோம்.

Chrome DevTools என்றால் என்ன, அவை ஏன் இவ்வளவு சக்தி வாய்ந்தவை?

Chrome DevTools டெவலப்பர் கருவிகளின் தொகுப்பு என்பது கூகிள் குரோமில் உள்ள ஒரு உள்ளமைக்கப்பட்ட பேனல் ஆகும். இது எந்தவொரு பயனரும் கூடுதல் செருகுநிரல்களை நிறுவத் தேவையில்லாமல், எந்தவொரு வலைத்தளத்தின் குறியீடு மற்றும் செயல்திறனைப் பகுப்பாய்வு செய்யவும், பிழைதிருத்தம் செய்யவும், மற்றும் மேம்படுத்தவும் அனுமதிக்கும் வகையில் வடிவமைக்கப்பட்டுள்ளது . அதன் எண்ணற்ற தாவல்கள் மற்றும் அம்சங்கள் மூலம், நீங்கள் கூறுகளை ஆய்வு செய்யலாம், நிகழ்நேரத்தில் பாணிகளை மாற்றியமைக்கலாம், பிணையச் செயல்பாட்டைக் கண்காணிக்கலாம், ஸ்கிரிப்டுகளில் உள்ள பிழைதிருத்தம் செய்யலாம், செயல்திறனை மதிப்பிடலாம், மேலும் மொபைல் சாதனங்களில் வலைத்தளத்தின் நடத்தையை உருவகப்படுத்தவும் முடியும் . இதன் நோக்கம் வெறுமனே "மூலக் குறியீட்டைப் பார்ப்பது" என்பதைத் தாண்டிச் செல்கிறது: வலைத்தளம் எவ்வாறு செயல்படுகிறது, கூகிள் அதை எவ்வாறு புரிந்துகொள்கிறது, மற்றும் ஒரு பயனர் வெவ்வேறு சாதனங்கள் அல்லது இணைப்புகளிலிருந்து அதை எவ்வாறு பயன்படுத்துகிறார் என்பதை அனுபவிக்க இது உங்களை அனுமதிக்கிறது.

Chrome DevTools-ஐ அணுகுவது எப்படி: விரைவு குறுக்குவழிகள் மற்றும் சூழல் மெனு

Chrome DevTools-ஐ அணுகுவது மிகவும் எளிதானது, மேலும் உங்கள் இயக்க முறைமை மற்றும் விருப்பங்களைப் பொறுத்து அதைச் செய்வதற்குப் பல வழிகள் உள்ளன:

• நீங்கள் பகுப்பாய்வு செய்ய விரும்பும் பக்கத்தில் வலது கிளிக் செய்யவும். மேலும் “ஆய்வு செய்” என்பதைத் தேர்ந்தெடுக்கவும். இதுவே மிகவும் காட்சிப்பூர்வமான மற்றும் பரவலாகப் பயன்படுத்தப்படும் முறையாகும்.
• பயன்படுத்தவும் விசைப்பலகை குறுக்குவழிகள் உங்கள் இயக்க முறைமையைப் பொறுத்து:
  Windows லினக்ஸ்: Ctrl + Shift + I.
  மேக்: சிஎம்டி + விருப்பம் + நான்
• நீங்கள் Chrome மெனுவிற்குச் சென்றும் (முகவரிப் பட்டியின் வலதுபுறத்தில் உள்ள மூன்று செங்குத்துப் புள்ளிகள்), கூடுதல் கருவிகள் > டெவலப்பர் கருவிகள் என்பதைத் தேர்வு செய்யலாம்.
• விசைப்பலகையைப் பயன்படுத்தி குறிப்பிட்ட பேனல்களை நேரடியாகத் திறக்க:
  • கூறுகள் பகுதி (HTML/CSS): Ctrl + Shift + C (Windows/லினக்ஸ்) அல்லது Cmd + Option + C (மேக்)
  • பணியகம்: Ctrl + Shift + J (Windows/லினக்ஸ்) அல்லது Cmd + Option + J (மேக்)
  • கடைசியாகப் பயன்படுத்தப்பட்ட பேனல்: F12 (பெரும்பாலான கணினிகளில்) அல்லது Ctrl + Shift + I / Cmd + Option + I
• ஒவ்வொரு புதிய தாவலிலும் DevTools தானாகவே திறக்கும் (பிழைதிருத்தம் செய்வதில் தங்கள் நேரத்தைச் செலவழிப்பவர்களுக்கு மிகவும் பயனுள்ளது): Chrome-ஐ இந்த விருப்பத்துடன் இயக்கவும் --auto-open-devtools-for-tabs கட்டளை வரியிலிருந்து.

மறக்க வேண்டாம்: நீங்கள் DevTools-ஐத் திறக்கும்போது, ​​அவற்றைச் சாளரத்தின் வலது, இடது, கீழ்ப்பகுதியில் அல்லது ஒரு தனிச் சாளரத்தில் கூடப் பின் செய்ய விரும்புகிறீர்களா என்பதை நீங்களே முடிவு செய்யலாம்—நீங்கள் பல திரைகளுடன் பணிபுரியும்போது இது மிகவும் வசதியான ஒன்றாகும்.

Chrome DevTools-ஐக் கொண்டு என்னவெல்லாம் செய்ய முடியும்? அதன் முக்கிய அம்சங்கள் பற்றிய ஒரு பார்வை.

Chrome DevTools பல பேனல்களாகப் பிரிக்கப்பட்டுள்ளது. ஒவ்வொன்றும் வலைப் பகுப்பாய்வு மற்றும் மேம்படுத்தலின் ஒரு முக்கிய அம்சத்தை உள்ளடக்கியுள்ளது. மிகவும் பொதுவாகப் பயன்படுத்தப்படும் பேனல்களும் அவற்றின் மிக முக்கியமான செயல்பாடுகளும் இங்கே கொடுக்கப்பட்டுள்ளன:

கூறுகள் பேனல்: DOM மற்றும் CSS-ஐ நேரலையில் ஆய்வு செய்தல் மற்றும் திருத்துதல்

பெரும்பாலான பிழைதிருத்தம் மற்றும் காட்சிப் பகுப்பாய்வுப் பணிகளுக்கு இந்தப் பேனல் ஒரு தொடக்கப் புள்ளியாகும். இது உங்களை பின்வருவனவற்றைச் செய்ய அனுமதிக்கிறது:

• DOM (ஆவணப் பொருள் மாதிரி) இன் சரியான கட்டமைப்பை ஆய்வு செய்யவும். உலாவி காண்பிக்கும் காட்சி, அதாவது, ஸ்கிரிப்டுகளை இயக்கி ஸ்டைல்களை ஏற்றிய பிறகு கூகிள் உண்மையில் பார்ப்பது.
• HTML மற்றும் CSS-ஐ உடனடியாக மாற்றியமைக்கவும்இணையதளத்தில் மாற்றங்கள் எப்படித் தெரிகின்றன என்பதை உடனடியாகச் சரிபார்க்கலாம் (உண்மையான மூலக் குறியீட்டைப் பாதிக்காமல், முன்மாதிரிகளை உருவாக்க அல்லது புதிய பாணி விதிகளைச் சோதிக்க இது மிகவும் சிறந்தது).
• வகுப்புகள் மற்றும் பாணிகளை நிர்வகிக்கவும் கூறுகளின் மூலம்: நீங்கள் புதிய வகுப்புகளைச் செயல்படுத்தலாம், செயலிழக்கச் செய்யலாம் அல்லது சோதிக்கலாம் மற்றும் பதிலளிக்கக்கூடிய வடிவமைப்பிற்கான காட்சி விவரங்களைத் திருத்தலாம்.
• சிறப்புப் பண்புகளைக் காண்க மற்றும் கையாளவும் (data-nosnippet போன்றவை), கூகிளால் ஒரு குறிப்பிட்ட உள்ளடக்கத்தை அட்டவணைப்படுத்த முடியுமா இல்லையா என்பதை நீங்கள் சரிபார்க்க உதவுவதால், இவை SEO-க்கு அடிப்படையானவை.
• பயனர் செயலுக்குப் பிறகு மட்டுமே தெரியும் கூறுகள் அல்லது தொகுதிகள் உள்ளதா எனச் சரிபார்க்கவும் (எடுத்துக்காட்டாக, காண்பிக்கப்படுவதற்கு ஜாவாஸ்கிரிப்ட் தேவைப்படும் தாவல்கள் அல்லது கீழ்விரிப் பட்டியல்கள்).
• கன்சோலில் ஆய்வு செய்யப்பட்ட உருப்படியை $0 எனக் காட்டி விரைவாக அணுகலாம். ஜாவாஸ்கிரிப்ட் வழியாக அதை நேரடியாகக் கையாள உங்களை அனுமதிக்கிறது.

குறிப்பு! இந்தப் பேனலில் இருந்து நீங்கள் வெவ்வேறு திரை அளவுகளையும் மொபைல் சாதனங்களையும் உருவகப்படுத்தலாம், இதன் மூலம் உங்கள் இணையதளம் உண்மையாகவே பதிலளிக்கக்கூடியதாக இருப்பதை உறுதிசெய்யலாம்.

நெட்வொர்க் பேனல்: வளப் பயன்பாட்டைப் பகுப்பாய்வு செய்கிறது, தாமதத்தைக் கண்டறிகிறது, மற்றும் மெதுவான இணைப்புகளை உருவகப்படுத்துகிறது.

செயல்திறன் பகுப்பாய்விற்கான இன்றியமையாத டாஷ்போர்டுகளில் ஒன்று . இதை நீங்கள் இங்கே காலவரிசைப்படியும் விரிவாகவும் காணலாம்:

• பக்கத்தை ஏற்றும்போது கோரப்பட்ட அனைத்து வளங்களும் (HTML, படங்கள், CSS, JS, வீடியோக்கள், எழுத்துருக்கள் போன்றவை.).
• அவை பதிவிறக்கம் செய்யப்படும் வரிசை, ஏற்றுதல் நேரம் மற்றும் அளவு ஒவ்வொரு வளத்தின் தன்மையும்: தடைகள் அல்லது தேவையற்ற வளங்களைக் கண்டறிவதற்கான திறவுகோல்.
• ஒவ்வொரு வளத்தின் மீதும் கிளிக் செய்வதன் மூலம் நீங்கள் சரிபார்க்கலாம் HTTP தலைப்புகள், தற்காலிக சேமிப்புக் கொள்கைகள், பதிலளிப்பு நேரங்கள்மேலும், சிறிதாக்கப்பட்ட கோப்புகள் இருக்கின்றனவா என்றும் பார்க்கலாம்.
• மெதுவான இணைப்பு உருவகப்படுத்துதல் (3ஜி, 4ஜி போன்றவை), உங்கள் சொந்தக் கணினியில் மட்டுமல்லாமல், உங்கள் பயனர்களின் சாதனங்களிலும் உண்மையான செயல்திறனைக் காண முடியும்.
• க்கான செயல்பாடு கேச்-ஐ அழித்து மீண்டும் ஏற்றவும்ஒரு புதிய பயனரின் அனுபவத்தைச் சரிபார்க்கப் பயனுள்ளது.
• கோரிக்கை தடுப்பு: சில வளங்களைத் தவிர்ப்பதன் தாக்கத்தை இது பகுப்பாய்வு செய்கிறது (எடுத்துக்காட்டாக, main.css-ஐ முடக்கி, பக்கம் எவ்வாறு தவறாக உள்ளமைக்கப்படுகிறது என்பதைப் பார்ப்பது).
• மேம்பட்ட வடிகட்டுதல்: கோப்பு வகை, மூல டொமைன், ரெகுலர் எக்ஸ்பிரஷன்கள் அல்லது குறிப்பிட்ட பண்புக்கூறுகள் மூலம் தேடலாம்; இது வெளிப்புறப் பதிவிறக்கங்களைத் தணிக்கை செய்வதற்கோ அல்லது பாதுகாப்பைக் கண்காணிப்பதற்கோ மிகவும் உகந்தது.
• ஸ்கிரீன் ஷாட்களை எடுக்கிறது பக்கம் ஏற்றப்படும் பல்வேறு கட்டங்களில், பயனருக்கு என்ன படிப்படியாகக் காட்டப்படுகிறது என்பதை நீங்கள் காண இது அனுமதிக்கிறது.

குறிப்பாக SEO மற்றும் WPO-க்கு: எது முதலில் ஏற்றப்படுகிறது என்பதையும், அது செயல்திறனையும் வெப் வைட்டல்ஸையும் (Web Vitals) எவ்வாறு பாதிக்கிறது என்பதையும் பகுப்பாய்வு செய்து , கூகுளுக்கும் உங்கள் பார்வையாளர்களுக்கும் ஆன அனுபவத்தை எவ்வாறு மேம்படுத்துவது என்பதைப் புரிந்துகொள்ளுங்கள்.

கணினித் திரை: பிழைதிருத்தம் செய்யவும், ஸ்கிரிப்டுகளை இயக்கவும், மற்றும் நிகழ்நேர எச்சரிக்கைகளைப் பெறவும்.

கன்சோலில் , வலைத்தளத்தால் வெளியிடப்படும் பதிவுகள், ஜாவாஸ்கிரிப்ட் பிழைகள் மற்றும் பாதுகாப்பு எச்சரிக்கைகளை நீங்கள் நிகழ் நேரத்தில் பார்க்கலாம் . மேலும் நீங்கள்:

• ஜாவாஸ்கிரிப்ட் கட்டளைகளை நேரடியாக இயக்கவும் திறந்த பக்கத்தில், விரைவான சோதனைகள் அல்லது தானியக்கங்களுக்கு ஏற்றது.
• மாறியைப் பயன்படுத்தி கடைசியாக ஆய்வு செய்யப்பட்ட உறுப்புடன் தொடர்பு கொள்ளுங்கள் $0 (மற்றும் $1, $2, போன்றவை), மேம்பட்ட பிழைதிருத்தத்தை வேகப்படுத்துகிறது.
• பிழையுள்ள JS கோப்பின் வரிக்கு நேரடியாகச் செல்ல, பிழைகள் அல்லது எச்சரிக்கைகள் மீது சொடுக்கவும்.

மூலங்கள் பகுதி: நிலையான கோப்புகள் மற்றும் வெளிப்புற ஆதாரங்களைக் காணலாம் மற்றும் பிழைதிருத்தம் செய்யலாம்.

இந்தப் பிரிவு, வலைத்தளத்தில் பதிவேற்றப்பட்ட கோப்புகளின் கட்டமைப்பைக் காட்டுகிறது : ஸ்கிரிப்டுகள், ஸ்டைல்கள், படங்கள் போன்றவை, டொமைன்களின்படி ஒழுங்கமைக்கப்பட்டுள்ளன.

• நீங்கள் கூகிள் எழுத்துருக்கள் போன்ற வெளிப்புற ஆதாரங்களைப் பயன்படுத்துகிறீர்களா என்பதைக் கண்டறியவும்.மேலும், வேகத்தைப் பெறுவதற்காக அவற்றை உள்ளூரிலேயே நடத்துவது குறித்தும் பரிசீலித்து வருகிறார்.
• சோதனைக்காக மூலக் கோப்புகளைத் திறக்கவும், திருத்தவும், சேமிக்கவும் இது உங்களை அனுமதிக்கிறது.
• சுருக்கப்பட்ட ஸ்கிரிப்டுகளைப் பகுப்பாய்வு செய்து, எளிதாகப் படிப்பதற்காகக் குறியீட்டை விரிவுபடுத்தி, மறைக்கப்பட்ட சார்புநிலைகளைச் சரிபார்க்கவும்.

ரெக்கார்டர்: ஒரு பயனரின் பயணத்தை உருவகப்படுத்தி, அவர்களின் உண்மையான அனுபவத்தை அளவிடுகிறது.

பதிவுசெய்யும் செயல்பாடு, ஒரு பயனரின் உண்மையான உலாவலை உருவகப்படுத்தவும் குறிப்பிட்ட சிக்கல்களைக் கண்டறியவும் உங்களை அனுமதிக்கிறது:

• நீங்கள் ஒரு வழிசெலுத்தல் ஓட்டத்தைப் (எ.கா., மெனுக்களைக் கிளிக் செய்தல், படிவங்களை நிரப்புதல், ஒரு பக்கத்திலிருந்து மற்றொரு பக்கத்திற்குச் செல்லுதல்) பதிவு செய்யலாம், இணையதளம் எவ்வாறு பதிலளிக்கிறது என்பதைச் சரிபார்க்கலாம், மேலும் ஒவ்வொரு செயலின் ஏற்ற நேரங்களையும் பகுப்பாய்வு செய்யலாம்.
• மாற்றங்கள் அல்லது பயனர் அனுபவத்திற்கான முக்கியப் பாதைகளில் உள்ள தடைகளைக் கண்டறிவதற்கு மிகவும் உகந்தது.

லைட்ஹவுஸ்: செயல்திறன், அணுகல்தன்மை மற்றும் சிறந்த நடைமுறைகள் குறித்த விரிவான தணிக்கை

Chrome DevTools-இல் ஒருங்கிணைக்கப்பட்டு, ஒரு செருகுநிரலாகவும் (plugin) கிடைக்கும் லைட்ஹவுஸ் , ஒரு முதன்மை அம்சமாகும்:

• முடிந்ததாகக் தானியங்கி தணிக்கைகள் செயல்திறன் (WPOஅணுகல்தன்மை, சிறந்த நடைமுறைகள், SEO மற்றும் PWA (முற்போக்கான வலைப் பயன்பாடுகள்).
• ஒரு வழங்குகிறது ஒட்டுமொத்த மதிப்பெண் மேலும், ஏற்கனவே வெளியிடப்பட்ட மற்றும் உருவாக்கத்தில் உள்ள வலைத்தளங்கள் ஆகிய இரண்டிற்கும், ஒவ்வொரு பிரிவுக்குமான செயல்படுத்தக்கூடிய பரிந்துரைகள்.
• இது வலைத்தளத்தை டெஸ்க்டாப் மற்றும் மொபைல் பயன்முறையில் பகுப்பாய்வு செய்ய அனுமதிப்பதால், மொபைல் இணக்கத்தன்மை சிக்கல்களைக் கண்டறிவதற்கு மிகவும் பயனுள்ளதாக அமைகிறது.

நடைமுறைப் பயன்பாடுகள்: WPO மற்றும் SEO-க்கு DevTools-ஐ எவ்வாறு பயன்படுத்துவது

Chrome DevTools என்பது ஆரம்ப வடிவமைப்பு முதல் விளம்பரக் கோரிக்கை பகுப்பாய்வு மற்றும் ஆன்-பேஜ் SEO தணிக்கை வரை அனைத்து நிலைகளிலும் வலைத்தளத்தை மேம்படுத்துவதற்கான ஒரு அடிப்படைக் கருவியாகும் . இதன் சில முக்கியப் பயன்பாடுகள் பின்வருமாறு:

செயல்திறன் உகப்பாக்கம் (WPO)

• படங்கள் மற்றும் பெரிய கோப்புகளை அடையாளம் காண்கிறது நெட்வொர்க் டேபிலிருந்து அதன் மேம்படுத்தலுக்கு (சுருக்கம், புதிய வடிவங்கள், லேசி லோட்) முன்னுரிமை அளியுங்கள்.
• வெளிப்புற வளச் சுமையை மதிப்பிடுங்கள்நேரம் அதிகமாக இருந்தால், அவற்றை உங்கள் சொந்த சேவையகத்திலிருந்து பதிவிறக்கம் செய்வதைப் பரிசீலிக்கவும்.
• முக்கியமான உருப்படிகள் முதலில் கையாளப்படும் வகையில் ஏற்றும் முன்னுரிமையை மறுசீரமைக்கவும்.சிக்கலான பாதை).
• நெட்வொர்க் பேனலில் இருந்து கேச்-ஐ முடக்கவும் மாற்றங்களைப் பகுப்பாய்வு செய்யும்போது, ​​தகவல்கள் உள்ளூரில் சேமிக்கப்படவில்லை என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள்.
• மொபைல் பயனர் அனுபவத்தைச் சோதிக்க, மெதுவான இணைப்பு சிமுலேட்டரைப் பயன்படுத்தவும்.

வளக் குறைப்பு (CSS மற்றும் ஜாவாஸ்கிரிப்ட்)

• எழுத்துருக்கள் தாவலில், அளவுக்கதிகமான, சுருக்கப்படாத அல்லது நகல் கோப்புகளைக் கண்டறிகிறது.
• கோரிக்கைகளைக் குறைக்கவும், ஏற்றுதல் நேரங்களை மேம்படுத்தவும் CSS மற்றும் JS-ஐ ஒருங்கிணைத்துச் சுருக்கவும்.

கட்டமைப்பு பகுப்பாய்வு, அணுகல்தன்மை மற்றும் SEO

• தலைப்புகள், பண்புக்கூறுகள் மற்றும் HTML சொற்பொருள் ஆகியவற்றின் கட்டமைப்பை மதிப்பாய்வு செய்யவும்.தர்க்கரீதியான கட்டமைப்பு (h2, h3, ALT குறிச்சொற்கள், பாத்திரங்கள்) கூகிளுக்கு உகந்ததாக இருப்பதை உறுதிப்படுத்திக் கொள்ளுங்கள்.
• லைட்ஹவுஸுடன் சரிபார்க்கவும் தேவையான லேபிள்கள் மற்றும் தரவுகளின் இருப்பு SEO, அணுகல்தன்மை மற்றும் PWA-க்காக.
• ரெண்டரிங்கில் ஜாவாஸ்கிரிப்ட்டின் தாக்கத்தை ஆராயுங்கள். மேலும், லோட் ஆகும்போது பயனர் இடைச்செயலைச் சார்ந்தவை கண்ணுக்குத் தெரியவில்லை என்றால், கூகிள் அவற்றை விளக்காமல் போகலாம் என்பதையும் நினைவில் கொள்ளுங்கள்.
• குக்கீகள், உள்ளூர் சேமிப்பகம் மற்றும் பிற உலாவி வளங்களின் பயன்பாட்டைக் கண்காணிக்கிறது.

ஸ்கிராப்பிங் அல்லது ஏற்றுமதி செய்வதற்காக உள்ளடக்கத்தைப் பிரித்தெடுத்தல் மற்றும் கையாளுதல்

• பெரிய அட்டவணைகள் அல்லது பட்டியல்களை விரிதாள் அல்லது குறியீடு திருத்திகளுக்கு நேரடியாக ஏற்றுமதி செய்ய, நீங்கள் 'Copy element' என்பதைப் பயன்படுத்தலாம்.
• திரையில் தோன்றும் உள்ளடக்கத்தைத் திறமையாகத் திருத்தவும், படங்களைத் தயார் செய்யவும் அல்லது தொடர்புடைய தகவல்களை ஏற்றுமதி செய்யவும் கன்சோலையும் வடிவமைப்புப் பயன்முறையையும் பயன்படுத்தவும்.

நிகழ்நேர தனிப்பயனாக்கம் மற்றும் பிழைதிருத்தம்

• விளம்பரப் பதாகைகள் அல்லது தொல்லை தரும் கூறுகளை நேரடியாகப் பயன்படுத்துவதன் மூலம் மறைக்கவும். காட்சி: இல்லை ஆய்வாளர் மூலமாக.
• தேர்ந்தெடுக்கப்பட்ட கூறுகளில் கட்டளைகளைச் செயல்படுத்த அல்லது பக்கத் திருத்தப் பயன்முறையை இயக்கவும் அணைக்கவும் கன்சோலில் இருந்து ஜாவாஸ்கிரிப்டைப் பயன்படுத்தவும்.

மொபைல் சாதனங்களில் Chrome DevTools இன் வரம்புகள்

டெஸ்க்டாப் பதிப்புகளில் "இன்ஸ்பெக்ட் எலிமென்ட்" மற்றும் அனைத்து Chrome DevTools-களும் எப்போதும் கிடைக்கப்பெற்றாலும், ஸ்மார்ட்போன்கள் மற்றும் டேப்லெட்களில் DevTools-களை நேரடியாக அணுக முடியாது . இதற்கு இரண்டு காரணங்கள் உள்ளன: சிறிய திரைகளில் அதன் இடைமுகம் நடைமுறைக்கு உகந்ததாக இருக்காது, மேலும் மவுஸின் துல்லியமும் பாதிக்கப்படும். அதிர்ஷ்டவசமாக, உங்கள் டெஸ்க்டாப்பிலிருந்தே மொபைல் அனுபவத்தை நீங்கள் உருவகப்படுத்தலாம் அல்லது நிகழ்நேரத்தில் தளங்களைப் பிழைதிருத்தம் செய்ய உங்கள் கணினியுடன் ஒரு பௌதீக சாதனத்தை இணைக்கலாம், இது குறிப்பாக மொபைல் செயலி உருவாக்குநர்களுக்கு மிகவும் மதிப்புமிக்கதாகும். iOS உள்ள ஒரு Mac-இல், நீங்கள் "Settings > Advanced" என்பதில் அதற்கான விருப்பத்தை இயக்க வேண்டும் மற்றும் இரண்டு சாதனங்களிலும் ஒரே iCloud கணக்கைப் பயன்படுத்த வேண்டும்.

மேம்பட்ட பயன்பாட்டு நேர்வுகள்: பிழைதிருத்தம் செய்வதிலிருந்து ஸ்கிரீன்ஷாட் எடுப்பது வரை

SEO உருவாக்கம் மற்றும் பகுப்பாய்வில் உள்ள பாரம்பரியப் பயன்பாடுகளுக்குக் கூடுதலாக, Chrome DevTools மிகவும் நடைமுறைக்குரிய மேம்பட்ட அம்சங்களையும் வழங்குகிறது:

• பிணைய செயலிழப்பு சூழ்நிலைகளை உருவகப்படுத்த, குறிப்பிட்ட கோப்புகள் (உதாரணம்: main.css) ஏற்றப்படுவதைத் தடுக்கிறது. மேலும், செயலிழப்புகள் ஏற்படும் பட்சத்தில் இணையதளம் எவ்வாறு செயல்படுகிறது என்பதையும் சரிபார்க்கவும்.
• ரெண்டரிங் செயல்முறையை படிப்படியாகக் காணவும், அதன் மூலம் சில முக்கிய கூறுகள் எப்படி, எப்போது தோன்றும் என்பதை நன்கு புரிந்துகொள்ளவும், நெட்வொர்க் பேனலில் உள்ள ஸ்கிரீன்ஷாட் செயல்பாட்டைப் பயன்படுத்தவும்.
• உலகளாவிய தேடல் செயல்பாட்டைப் பயன்படுத்தி, குறிப்பிட்ட HTTP தலைப்புகள் அல்லது பதில்களைத் தேடுங்கள் (எ.கா., எந்த வளங்கள் உகந்த தற்காலிக சேமிப்புக் கொள்கைகளைப் பயன்படுத்துகின்றன என்பதைக் கண்டறிய).
• வெளிப்புறப் போக்குவரத்து அல்லது முக்கிய வளங்களை விரிவாகப் பகுப்பாய்வு செய்ய, கோரிக்கைகளை வகை, டொமைன் அல்லது பேட்டர்ன் அடிப்படையில் வடிகட்டவும்.
• அசல் மூலக் கோப்புகளை மாற்ற வேண்டிய அவசியமின்றி, HTML மற்றும் CSS மாற்றங்களின் விரைவான முன்மாதிரிகளை உருவாக்கி, அவற்றை உங்கள் குழுவுடன் எளிதாகப் பகிரவும்.

Chrome DevTools ஆனது இணையதள உருவாக்கம் மற்றும் பகுப்பாய்வுத் துறையின் ஒரு பன்முகக் கருவியாக உருவெடுத்துள்ளது. இது தனிப்பட்ட திட்டங்கள், பெரிய தளங்கள் மற்றும் தொழில்முறைத் திட்டங்கள் என அனைத்திற்கும் சமமாகச் சிறப்பாகச் செயல்படுகிறது. ஒரு வடிவமைப்பு விவரத்தை விரைவாக ஆய்வு செய்வதிலிருந்து, WPO, SEO மற்றும் அணுகல்தன்மைப் பணிகள் உட்பட உங்கள் இணையதளத்தின் அனைத்து வளங்களையும் முழுமையாகத் தணிக்கை செய்வது வரை, Lighthouse போன்ற கருவிகளுடனான இதன் ஒருங்கிணைப்பு, உங்கள் பக்கங்களை Google-க்கு மட்டுமல்லாமல் உங்கள் பயனர்களுக்கும் உகந்ததாக்குவதற்கு இதை ஒரு அத்தியாவசிய ஆதாரமாக ஆக்குகிறது.