כלי הפיתוח של React

השתמש ב-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 כדי לבחון אפליקציות גם שנבנו עם React Native.

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

# Yarn
yarn global add react-devtools

# Npm
npm install -g react-devtools

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

react-devtools

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

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