React Developer Tools
React components-ஐ ஆய்வு செய்ய, props மற்றும் state-ஐ திருத்த, மேலும் செயல்திறன் பிரச்சினைகளை கண்டறிய React Developer Tools-ஐப் பயன்படுத்துங்கள்.
நீங்கள் கற்றுக்கொள்ள போவது
- React Developer Tools-ஐ எவ்வாறு நிறுவுவது
Browser extension
React-உடன் உருவாக்கப்பட்ட websites-ஐ debug செய்வதற்கான நேரடியான வழி React Developer Tools browser extension-ஐ நிறுவுவதுதான். இது பல பிரபலமான உலாவிகளுக்கு கிடைக்கிறது:
இப்போது, React-உடன் உருவாக்கப்பட்ட website ஒன்றுக்குச் சென்றால், Components மற்றும் Profiler panels-ஐப் பார்ப்பீர்கள்.
Safari and other browsers
மற்ற உலாவிகளுக்கு (உதாரணமாக Safari), react-devtools npm package-ஐ நிறுவுங்கள்:
# Yarn
yarn global add react-devtools
# Npm
npm install -g react-devtoolsஅடுத்து terminal-இலிருந்து developer tools-ஐத் திறக்கவும்:
react-devtoolsபிறகு, உங்கள் website-இன் <head> தொடக்கத்தில் பின்வரும் <script> tag-ஐச் சேர்த்து உங்கள் website-ஐ இணைக்கவும்:
<html>
<head>
<script src="http://localhost:8097"></script>இப்போது developer tools-இல் பார்க்க, browser-இல் உங்கள் website-ஐ reload செய்யுங்கள்.
Mobile (React Native)
React Native-உடன் உருவாக்கப்பட்ட apps-ஐ ஆய்வு செய்ய, React Developer Tools-உடன் ஆழமாக ஒருங்கிணைந்த built-in debugger ஆன React Native DevTools-ஐப் பயன்படுத்தலாம். Native element highlighting மற்றும் selection உட்பட அனைத்து அம்சங்களும் browser extension போலவே செயல்படும்.
React Native-இல் debugging பற்றி மேலும் அறிக.
React Native 0.76-க்கு முந்தைய பதிப்புகளுக்கு, மேலுள்ள Safari மற்றும் பிற உலாவிகள் வழிகாட்டியைப் பின்பற்றி React DevTools-இன் standalone build-ஐப் பயன்படுத்தவும்.