Home-theater-designers
Chrome DevTools டெவலப்பர்களுக்கு இன்றியமையாத சொத்து. மற்ற உலாவிகள் மிகவும் எளிமையான சரிசெய்தல் கருவிகளை வழங்குகையில், அதன் பல செயல்பாட்டு இடைமுகம் மற்றும் புகழ் காரணமாக Chrome DevTools உங்கள் கவனத்திற்குரியது.
க்ரோம் டெவலப்பர்களுக்கு மிகவும் பிரபலமான உலாவியாகும், ஏனெனில் அதன் சக்திவாய்ந்த பிழைத்திருத்த கருவிகள் காரணமாக. Chrome DevTools ஐப் பயன்படுத்துவது எளிதானது, ஆனால் அதிலிருந்து அதிகம் பெற இது எவ்வாறு செயல்படுகிறது என்பதை நீங்கள் புரிந்து கொள்ள வேண்டும்.
Chrome டெவலப்பர் கருவிகள் எவ்வாறு செயல்படுகின்றன
Chrome DevTools ஒரு வலைத்தளத்தில் அதன் பிழை கன்சோல் மற்றும் பிற பிழைத்திருத்தம் மற்றும் கண்காணிப்பு கருவிகள் மூலம் சிக்கல்களைத் தீர்க்க உங்களை அனுமதிக்கிறது. DevTools ஐப் பயன்படுத்துவது முன்புற ஓட்டைகளை வெளிப்படுத்துகிறது மற்றும் மொபைல் மற்றும் டேப்லெட் சாதனங்களில் உங்கள் வலைத்தளம் எவ்வாறு தோன்றுகிறது என்பதைக் கண்காணிக்க உதவுகிறது.
DevTools மூலம், ஜாவாஸ்கிரிப்ட், HTML மற்றும் CSS போன்ற வலைத்தளத்தின் குறியீட்டில் நீங்கள் நிகழ்நேர திருத்தங்களைச் செய்யலாம் மற்றும் உங்கள் மாற்றங்களின் உடனடி முடிவுகளைப் பெறலாம்.
DevTools வழியாக நீங்கள் செய்யும் மாற்றங்கள் வலைத்தளத்தை நிரந்தரமாக பாதிக்காது. நீங்கள் உண்மையான மூலக் குறியீட்டில் அவற்றைப் பயன்படுத்தியதைப் போல அவர்கள் எதிர்பார்த்த முடிவை தற்காலிகமாக மட்டுமே காண்பிப்பார்கள். இது உங்கள் வலைத்தளத்தை மிக வேகமாக ஏற்றுவதற்கான வழிகளை உருவாக்க உதவுகிறது மற்றும் பிழைகளை எளிதாக அகற்ற உதவுகிறது.
Chrome DevTools ஐ எவ்வாறு அணுகுவது
நீங்கள் பல வழிகளில் Chrome DevTools ஐ அணுகலாம். மேக் ஓஎஸ்ஸில் குறுக்குவழி முறையுடன் டெவலப்பர் கருவிகளைத் திறக்க, அழுத்தவும் சிஎம்டி + தேர்வு + ஐ . நீங்கள் விண்டோஸ் ஓஎஸ் பயன்படுத்துகிறீர்கள் என்றால், அதை அழுத்தவும் Ctrl + Shift + I உங்கள் விசைப்பலகையில் விசைகள்.
மாற்றாக, திரையின் மேல் வலது மூலையில் உள்ள மூன்று புள்ளிகளைக் கிளிக் செய்வதன் மூலம் நீங்கள் Chrome டெவலப்பர் கருவிகளை அணுகலாம். தலைமை இன்னும் கருவிகள் மற்றும் தேர்ந்தெடுக்கவும் டெவலப்பர் கருவிகள் . மற்றொரு விருப்பம் வலைப்பக்கத்தில் வலது கிளிக் செய்து கிளிக் செய்யவும் ஆய்வு செய்யவும் விருப்பம்.
வலைத்தள கண்டறிதலுக்கான Chrome டெவலப்பர் கருவிகளைப் பயன்படுத்துதல்
Chrome DevTools ஒரு வலைப்பக்கத்தை மாற்ற மற்றும் சரிசெய்ய பல வழிகளை வழங்குகிறது. DevTools உங்களுக்கு உதவக்கூடிய சில வழிகளைப் பார்ப்போம்.
ஸ்மார்ட்போனில் உங்கள் வலைத்தளம் எப்படி இருக்கிறது என்று பாருங்கள்
உங்கள் Chrome உலாவியை டெவலப்பர் பயன்முறைக்கு மாற்றியவுடன், அது உங்கள் வலைப்பக்கத்தின் அரை அளவிலான பதிப்பை வழங்குகிறது. இருப்பினும், இது ஸ்மார்ட்போன் அல்லது டேப்லெட்டில் எப்படி இருக்கும் என்பதைப் பற்றிய உண்மையான பார்வையை உங்களுக்கு வழங்காது.
அதிர்ஷ்டவசமாக, ஒரு வலைப்பக்கத்தின் திரை அளவை அமைப்பதற்கு கூடுதலாக, Chrome DevTools பல்வேறு மொபைல் திரை வகைகள் மற்றும் பதிப்புகளுக்கு இடையில் மாற உதவுகிறது.
அந்த விருப்பத்தை அணுக, அதில் மாற்றவும் ஆய்வு செய்யவும் முறை அடுத்து, கிளிக் செய்யவும் பதிலளிக்கக்கூடிய DevTools இன் மேல் இடது மூலையில் கீழிறக்கி, உங்களுக்கு விருப்பமான மொபைல் சாதனத்தைத் தேர்ந்தெடுக்கவும். நீங்கள் தேர்ந்தெடுத்த மொபைல் சாதனத்தின் அளவிற்கு ஏற்றவாறு வலைப்பக்கம் வழங்கி சரிசெய்கிறது.
எக்ஸ்பாக்ஸ் ஒன்னுடன் வயர்லெஸ் ஹெட்ஃபோன்களை இணைக்கவும்
ஒரு வலைப்பக்கத்தின் மூலக் கோப்புகளை அணுகவும்
Chrome DevTools வழியாக ஒரு வலைப்பக்கத்தை உருவாக்கும் கோப்புகளை நீங்கள் அணுகலாம். இந்த கோப்புகளை அணுக, கிளிக் செய்யவும் ஆதாரங்கள் DevTools மெனுவின் மேல் பகுதியில் விருப்பம். இது வலைத்தளத்தின் கோப்பு முறைமையை அம்பலப்படுத்துகிறது மற்றும் உங்களுக்கு எடிட்டிங் கொடுக்கிறது.
நீங்கள் பல ஆதாரங்களைக் கொண்ட வலைப்பக்கத்தைக் கையாளும் போது உதவக்கூடிய ஆதாரக் கோப்புகளையும் தேடலாம். DevTools வழியாக ஒரு மூல கோப்பைத் தேட, கிளிக் செய்யவும் தேடு கன்சோலுக்கு மேலே விருப்பம்.
எனினும், நீங்கள் கண்டுபிடிக்க முடியவில்லை என்றால் தேடு விருப்பம், சிறந்த மாற்று விசைப்பலகை குறுக்குவழிகளைப் பயன்படுத்துவது. மேக் ஓஎஸ் -இல், அழுத்தவும் சிஎம்டி + தேர்வு + எஃப் மூல கோப்பைத் தேட விசைகள். நீங்கள் விண்டோஸ் ஓஎஸ் பயன்படுத்துகிறீர்கள் என்றால், அதை அழுத்தவும் Ctrl + Shift + F மூல கோப்பு தேடல் பட்டியை அணுகுவதற்கான விசை.
ஒரு வலைப்பக்கத்தில் நேரடி திருத்தங்களைச் செய்யவும்
DevTools ஐப் பயன்படுத்துவதற்கான முக்கிய நோக்கங்களில் ஒன்று ஒரு வலைப்பக்கத்தில் உறுப்புகளின் உடனடி போலி திருத்தம் . நீங்கள் டெவலப்பர் கருவிகளுக்கு மாறியவுடன், ஒரு வலைத்தளத்தின் HTML உள்ளடக்கத்தை கிளிக் செய்வதன் மூலம் திருத்தலாம் கூறுகள் விருப்பம். பின்னர், கோட் எடிட்டரில் நீங்கள் மாற்றங்களைப் பயன்படுத்த விரும்பும் எந்தப் புள்ளியிலும் வலது கிளிக் செய்து தேர்ந்தெடுக்கவும் HTML ஆக திருத்தவும் .
இன்லைனில் இல்லாத CSS பண்புகளைத் திருத்த, தேர்ந்தெடுக்கவும் ஆதாரங்கள் . அடுத்து, நீங்கள் திருத்த விரும்பும் CSS கோப்பைத் தேர்ந்தெடுக்கவும். லைவ் எடிட் செய்ய உங்கள் கர்சரை கோட் கன்சோலுக்குள் உங்கள் விருப்ப வரிசையில் வைக்கவும். இதைச் செய்வதன் மூலம் நீங்கள் வலைப்பக்கத்தில் பயன்படுத்தும் எந்த பாணி மாற்றங்களுக்கும் உடனடி பின்னூட்டம் கிடைக்கும்.
DevTools வழியாக ஒரு பக்கத்தை நீங்கள் திருத்தும்போது, உங்கள் உலாவியில் பக்கத்தை மீண்டும் ஏற்றுவது அதன் அசல் வடிவத்திற்குத் திரும்பும், மேலும் திருத்தம் உங்களுக்கு மட்டுமே தெரியும். 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 வாங்க முடியவில்லையா? ராஸ்பியனுக்கு மாற்று தேடுகிறீர்களா? உங்கள் ராஸ்பெர்ரி Pi இல் Chrome OS இன் பதிப்பை எவ்வாறு நிறுவுவது என்பது இங்கே.
அடுத்து படிக்கவும் தொடர்புடைய தலைப்புகள்- இணையதளம்
- நிரலாக்க
- HTML
- இணைய மேம்பாடு
- ஜாவாஸ்கிரிப்ட்
- கூகிள் குரோம்
இடோவு ஸ்மார்ட் தொழில்நுட்பம் மற்றும் உற்பத்தித்திறன் ஆகியவற்றில் ஆர்வம் கொண்டவர். அவரது ஓய்வு நேரத்தில், அவர் சலிப்படையும்போது குறியீட்டுடன் விளையாடுகிறார் மற்றும் சதுரங்கப் பலகைக்கு மாறுகிறார், ஆனால் அவர் எப்போதாவது வழக்கத்திலிருந்து விலகிச் செல்ல விரும்புகிறார். நவீன தொழில்நுட்பத்தை மக்களுக்கு காட்டும் ஆர்வம் அவரை மேலும் எழுத தூண்டுகிறது.
இடோவு ஒமிசோலாவில் இருந்து மேலும்எங்கள் செய்திமடலுக்கு குழுசேரவும்
தொழில்நுட்ப குறிப்புகள், மதிப்புரைகள், இலவச மின் புத்தகங்கள் மற்றும் பிரத்யேக ஒப்பந்தங்களுக்கு எங்கள் செய்திமடலில் சேரவும்!
குழுசேர இங்கே சொடுக்கவும்