React Developer Tools

ניתן להשתמש ב-React Developer Tools על מנת לבחון קומפוננטות, לערוך props ו-state, ובנוסף לאבחן בעיות שקשורות לביצועים.

תוסף דפדפן

הדרך הקלה ביותר לדבג אתרים שכתובים בעזרת ריאקט היא להתקין את תוסף כלי המפתחים של ריאקט. הוא זמין בכמה דפדפנים:

לאחר ההתקנה, אם תיכנס לאתר שכתוב בריאקט, תראה את הפאנלים Components ו-Profiler.

על מנת להשתמש בתוסף בדפדפנים אחרים כמו Safari, התקן את חבילת ה-npm הזו: react-devtools

# Yarn
yarn global add react-devtools

# Npm
npm install -g react-devtools

עכשיו פתח את כלי המפתחים מהטרמינל:

react-devtools

לאחר מכן התחבר לאתר שלך בעזרת הוספת תגית ה-<script> הבאה בתוך ה-head באתר שלך:

<html>
  <head>
    <script src="http://localhost:8097"></script>

טען מחדש את האתר על מנת לראות את הכלים באיזור כלי המפתחים:

ניתן להשתמש בכלי המפתחים של ריאקט על מנת לבחון אפליקציות שנבנו בעזרת React Native.

הדרך הקלה ביותר להשתמש בכלי המפתחים היא להתקין אותם גלובאלית:

# Yarn
yarn global add react-devtools

# Npm
npm install -g react-devtools

פתח את הכלים מהטרמינל:

react-devtools

הכלים אמורים להתחבר לכל אפליקציית react native שרצה לוקאלית.

נסה לטעון מחדש את האפליקצייה אם הכלים לא מתחברים אליה תוך מספר שניות.