[היישומים של תגובה Native] הם מיומנות הליבה שמפרידה מפתחים יצרניים מאלה תקועים בתקופות ארוכות של ניסיון וטרור. יישומי מובייל, במיוחד אלה שנבנו עם גשר בין JavaScript לקוד Native, מציגים אתגרים ייחודיים: אי-קו-יציבות ברשת, באגים ספציפיים לסביבה, וצווארי בקבוק ביצועים קשים כדי לשחזר את הכלים המתאימים ביותר של הפעלת הסימולטור.

הבנת הנוף של תגובה אינדיאני

יישומים Native תגובה מורכבים משתי שכבות נפרדות: חוט JavaScript המטפל ברוב הלוגיקה העסקית ועדכונים של UI, וחוט יליד שמנהל רכיבים ספציפיים פלטפורמה.כלים של דיון חייב לגשר על הפער הזה.ללא כלי מתאים, באגים יכולים להתבטא בדרכים מוצפנות - למשל, התרסקות בשכבה Native עלולה להופיע כ יוצאת דופן JavaScript, או בקשה לרשת עשויה להיכשל רק במכשיר פיזי עקב הגדרות Proxy.

התפקיד של Debuggers

debugger מספק חלון בזמן אמת לביצוע הבקשה.זה מאפשר לך לבדוק משתנים, לעבור דרך קוד, לפקח על שיחות רשת ולמידת ביצועים.עבור React Native, קיימים שני פרדיגמות עיקריות:

  • (FLT:0)JavaScript debuggingearthFLT:1) - מתמקד בחבילה JS, כולל רכיבי תגובה, ניהול המדינה ושיחות API.Chrome Devtools מצטיינים כאן.
  • (FLT:0)Native and cross-layer debuggingtureFLT:1) - מכסה מודולים ילידים, קוד ספציפי פלטפורמה, ותנועת רשת. Flipper מיועדת למטרה זו, המציע ממשק מאוחד עבור iOS ואנדרואיד כאחד.

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

עמוק עמוק לתוך Flipper

Flipper, שפותחה במקור על ידי פייסבוק, היא פלטפורמת קוד פתוח המספקת ניסיון עשיר של קידוד יישומים ניידים.זה פועל כאפליקציית שולחן עבודה ומתקשר עם האפליקציה שלך באמצעות חיבור WebSocket מקומי. Flipper אינו מוגבל ל- React Native - זה גם עובד עם iOS Native ו- Android פרויקטים - אבל שילובו האינדיאנים של React הוא חזק במיוחד משום שהוא חושף גשרים אל-ל-ל-ל-ל-ל-ל-ל-ל-ל-ל-ל-ל-ל-ל-אפשר ומאפשר לך להציג להקות במקום אחד.

התקנת וידוי Flipper

כדי להתחיל, להוריד Flipper מה-FLT:0 , אתר האינטרנט הרשמי של macOS, Windows ולינוקס.

  1. ודא שהפרויקט שלך משתמש ב- React Native 0.62 או מאוחר יותר (Flipper הוא ארוז כברירת מחדל בגרסאות חדשות יותר) עבור פרויקטים ישנים יותר, להוסיף את החבילה:0 והמשך הוראות ההתקנה ב-FLT:0React Native DocumentsFLT:1.
  2. בקובץ ה-FLT:1, הוסיפו את התלות של Flipper תחת התצורה של FLT:2 על iOS, CocoaPods להתקין באופן אוטומטי את הפודים הדרושים בעת הפעלת FLT 3: 3.
  3. עדכון נקודת הכניסה של הילודה - על אנדרואיד, זה כרוך בשינוי של 4:4 כדי לכלול את ה- FLT:5 כפליזציה; על iOS, לעדכן FLT:6 כדי להתחיל את לקוח Flipper.
  4. הפעל Flipper, ולאחר מכן להפעיל את האפליקציה Native React במכשיר או לחיקוי.ה אפליקציה צריכה להתחבר באופן אוטומטי.אם לא, לבדוק כי האפליקציה וגם Flipper נמצאים באותה רשת, וכי אין חומת אש חוסמת נמל 8088.

תכונות מפתח: מפקח רשת, Logs, Layout Inspector, Plugins

ממשק של Flipper מאורגן לתוספים שניתן להקדים עליהם או לצאת מהם.התוספים המובנה ביותר עבור React Native כוללים:

  • (FLT:0Network Inspector Inspector Inspector Inspector InspectorerveFLT:1) מציג את כל בקשות HTTP / HTTPS שבוצעו על ידי האפליקציה שלך, כולל ראשי, תשלום ותזמון.זה בלתי יקר עבור אינטגרציה של API, זרימת אימות ובעיות כיס.
  • (FLT:0)LogsveFLT:1) - מצטבר קונסולת קונסולות הן משכבות JavaScript והן ב- Nativeשכבות.זה מבטל את הצורך לעבור בין Xcode ו- Android Studio רק כדי לקרוא יומני יליד.
  • (FLT:0) מפקחת הפקחים של LT:1 - הופכת עץ חזותי של כל הדעות הפעילים, בדומה לפאנל של רכיבי Chrome.You יכול לנצל כל ראיה כדי לראות את המסגרת, השוליים, ⁇ , ו שם הרכיב.
  • (ב) ,0) תכונות (CychainFirLT:1) - מאפשר לך לבדוק ולשנות אחסון מתמשך, אשר הוא שימושי עבור בדיקות קצה.

Flipper Plugins for React Native

מעבר לפסולות, מערכת ההפעלה Flipper מרחיבה את יכולות הפחתת התפוקה באופן משמעותי:

  • (FLT:0) Redux DebuggerFLT 1 - אם אתה משתמש ב- Redux לניהול המדינה, תוסף זה מאפשר לך לשחזר פעולות, לבדוק את הקוביות הממלכתיות, ואת הנסיעות בזמן.
  • (FLT:0) React DevtoovelsFLT:1 - תוסף נפרד המשלב את התגובה העמידה דוטולס לתוך Flipper, מראה היררכיה של רכיב ואביזרים.
  • (ב) ,0) ,Performance MonitorFLT:1 - מספק CPU בזמן אמת, זיכרון ו- FPS מדדים, עוזר לך לזהות את הדלפות ג'נק או זיכרון מוקדם.
  • (ב) ⁇ :0Crash ReporterFLT:1 לוכד יומני התרסקות יליד ומציג אותם בפורמט מובנה, לעתים קרובות עם עקבות ערמות מצביעות ישירות על המודול הבעייתי.

כדי להתקין תוסף, פתח Flipper, ללכת למנהל התוסף, ולחפש את הכלי הרצוי.רבים תוספים בעלי נוכחות קהילתית זמינים על GitHub.

עקבו אחרי Chrome Devtools for React Native Debugging

Chrome Devtools הוא מפתח אינטרנט, ו- React Native ממינוף אותו כדי לפענח את החבילה JavaScript.כאשר אתה מאפשר bugging ביישום Native React, הוא מפעיל את קוד JavaScript במנוע V8 של Chrome במקום JavaScriptCore של האפליקציה.This נותן לך גישה לחבילה המלאה של Devtools - קונסולות, מקורות, ביצועים, זיכרון, ופרופיל - יחד עם תגובות של Devtooth.

כיצד לפתוח את Chrome Devtools

כדי להתחיל להשתמש ב-Chrome Devtools עם React Native:

  1. (הופנה מהדף ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇
  2. בחר "Debug" מהתפריט של מפתח ה-app.A הכרטיסיה חדשה תפתח ב-Chrome (אם Chrome הוא דפדפן ברירת המחדל שלך) עם ה- Devtools.
  3. אם אתה משתמש במכשיר פיזי, ודא שהמכשיר והמחשב שלך נמצאים באותה רשת, ולהשתמש באפשרות "Debug Remote JS" (התפריט עשוי להשתנות מעט על ידי גרסת RN).

הקונסולה, מקורות, רשת, תגובה Devtools

ברגע ש- Devtools פתוח, אתה יכול להשתמש בכל הפאנלים הרגילים:

  • (ב) ,0) ,(ה) ,(ה) , עיין בהוראות, לבחון משתנים, ולהציג הודעות שגיאה.
  • (FLT:0)SourcessherFLT:1) - להגדיר נקודות בקוד JavaScript שלך, צעד באמצעות ביצוע, ובדוק את ערימה השיחה. מפות מקור מופעלות באופן אוטומטי אם אתה משתמש בחבילת המטרו, כך שתוכל לפוצץ את הקבצים המרכיבים המקוריים שלך, לא את הקוד המצופה.
  • (FLT:0NetworkearFLT:1) - למרות שלא כמו מפקח רשת של Flipper, הכרטיסיה ברשת ב-Chrome Devtools מראה את כל בקשות הרשת שנעשו על ידי ההקשר ה- JavaScript המחוספס.זה כולל שיחות XHR/fetch וחיבורי WebSocket, עם ראשיים וגופי תגובה.
  • (FLT:0) React DevtoovelsFLT:1 - לאחר התקנת התוסף TALKls Chrome, מופיעה הכרטיסיה חדשה "React" (React) מציגה את עץ הרכיב, אביזרים, מדינה וצריפים ומאפשרת לך לחפש רכיבים.זה שימושי במיוחד למעקב אחר התחדשות או אימות כי אביזרים מועברים כראוי.

« להתווכח עם נקודות קצה ומפות מקור

(הפסקה היא אחת הדרכים היעילות ביותר להבין את זרימת היישום שלך.ב-Chrome Devtools, אתה יכול להגדיר נקודות ישירות בחלונית מקורות על ידי לחיצה על מספר שורה.עבור נקודות תור מותנות, לחץ נכון על מספר שורה ולהיכנס לביטוי - ביצוע הפסקה רק כאשר ביטוי זה נכון.מקור לוודא כי נקודות תורמות תואמות את סוג ה-JavaScript המקורי או JavaScript, גם אם אתה יכול לאמת את המקור של 12FS).

בנוסף, ניתן להשתמש בלוח "Scope" כדי להציג את המשתנים המקומיים והסגורים.הפאנל "הצפה" מאפשר לך להעריך ביטויים על כל הפסקה, כגון FLT:13 או FLT:14 שלבping, לתוך, ומתוך פונקציות עוזר לך לבודד את הנקודה המדויקת שבה ערך משתבש.

השוואת Flipper ו-Chrome Devtools: מתי להשתמש

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

אינדיאני לעומת JavaScript

  • (FLT:0)FlipperveFLT:1 חיוני כאשר אתה צריך לבדוק מודולים ילידים, קוד ספציפי פלטפורמה, או אירועי מערכת ליבה (למשל, לדחוף הודעות, טיפול מקלדת) זה גם מראה יומני משני הצדדים JavaScript ו Native, שהוא קריטי כאשר טעות JavaScript גורמת להתמוטטות לידים.
  • (FLT:0)Chrome DevtoolsFLT:1 הוא ה-Go-to עבור קידוד JavaScript טהור.It מספק חוויה מרתיעה מעולה עם בקרת נקודות שוברות חזקות, קונסולת אוטומטי שלמות, ואת שילוב התגובה המלא DevTools. עם זאת, זה לא יכול debug Native קוד או להראות פלט יומן מקורי.

ביצוע פרופ'

לצורך ניתוח ביצועים, שני הכלים מציעים תובנות ייחודיות:

  • (FLT:0)FlipperveFLT:1 - תוסף הביצועים שלה מראה זמן אמת CPU, זיכרון ו- FPS. אתה יכול להקליט עקבות ולבדוק מסגרות בודדות כדי לראות אילו פעולות הן גורם מסגרות ירד. Flipper גם משלב עם Systrace על אנדרואיד ומכשירים על iOS עבור פרופיל פנים יותר.
  • (FLT:0)Chrome DevtoolsFLT:1 - הכרטיסיה הביצועית יכולה להקליט ציר זמן של פעילות JavaScript, כולל שיחות פונקציה, חישובים הפריסה, ובקשות רשת. בעוד זה מתמקד חוט JavaScript, זה מספק תזמון רב-צדדי.כרטיסית הזיכרון מסייעת לזהות דליפות על ידי נטילת תמונות heapshots ולהשוואת אותם לאורך זמן.

אסטרטגיה נפוצה היא להשתמש ב-Chrome Devtools עבור בעיות ביצועים ממוקדות JavaScript (למשל, סלטור Redux איטי) ו Flipper עבור צווארי בקבוק ביצועים מקומיים (למשל, מודול Native מותאם אישית המחוסם את החוט הראשי).

Best Practices for a Streamlined Workflow

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

הקמת סביבה עקבית

ודא שכל מפתח בצוות שלך יש Flipper מותקן ואת פרויקט React Native להגדיר. השתמש בקבצי תצורה מבוקרת גרסה (כמו FLT:15 או משתנה סביבה) כדי לתקן את הגדרות התוסף.עבור Chrome Devtools, ודא כי כל המפתחים משתמשים באותה גירסה Chrome ויש להם את התוסף TACKS מותקנת. a Team-כל בדיקה או תסריט יכול להתאים את ההתקנה הראשונית, צמצום על חיכוך.

שילוב כלים לבעיות מורכבות

כמה באגים אינם מוגבלים לשכבה אחת.לדוגמה, בקשה לרשת עשויה להופיע מוצלחת במפקח הרשת של Flipper, אך לגרום לשגיאה JavaScript ב-Chrome Devtools. במקרים כאלה, להפעיל את שני הכלים בו זמנית.You יכול להשתמש Flipper כדי לצפות בתזמון רשת ובידבקות ילידיות בעוד Chrome Devtools מספק הקשר על האופן שבו הנתונים מעובדים ב-JS.

פענוח אוטומטי עם תסריטים

אם אתה לעתים קרובות מדגימים את אותו סוג של בעיה, לשקול לכתוב תסריטים קטנים כי חלקי אוטומטי של התהליך.לדוגמה, אתה יכול ליצור תסריט פגז כי משיק Flipper, מתחיל מטרו, פותח את היישום בחיקוי מסוים.או אתה יכול להשתמש Flipper's FLT 18 פקודה לספין תוסף מותאם אישית.

בעיות נפוצות

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

בעיות חיבור

  • (FLT:0) Flipper לא מתחבר: FLT:1hil לבדוק שה אפליקציה פועלת על המכשיר הנכון / הממולנר וכי אפליקציית שולחן העבודה Flipper פתוחה.בדוק את פלט הקונסולה ב Flipper עבור הודעות שגיאה. על אנדרואיד, להבטיח FLT:19 הוא הוצא להורג אם אתה משתמש במכשיר פיזי.
  • (FLT:0)Chrome Devtools לא מופיע: ההרחבה 1 (ראה: ⁇ ) ודא כי Chrome מוגדר כדפדפן ברירת מחדל שלך.אם הכרטיסיה debugger אינה פתוחה באופן אוטומטי, לנווט באופן ידני ל-FLT:20 עבור פיזור מרחוק על מכשיר פיזי, להבטיח שהמכשיר הוא על אותה רשת Wi-Fi כמו המחשב שלך, וכי VPN אינו מפריע לחיבור.

התנגשויות Plugin

אם תתקין מספר רב של תוספי Flipper שמשנים את אותה מדינה (למשל, שני פקחי רשת שונים), הם עשויים להפריע. Disable all plugins למעט אלה שאתה צריך. in Chrome Devtools, גרסת התגובה Devtools חייבת להתאים את גרסת התגובה שלך - הרחבה מיושנת עלולה לגרום לתאונות או לעצים לא מדויקים.

מסקנה

(המאסטר של פענוח ב- React Native דורש גישה ממוקדת שני: באמצעות Flipper עבור תובנות Native ורשת, ו-Chrome Devtools לניתוח JavaScript עמוק, על ידי הטמעת שני הכלים בצורה נכונה, הבנת נקודות הכוח שלהם, ולאחר שיטות הטובות ביותר, אתה יכול להפחית באופן דרסטי את הזמן בילה ציד באגים.FLT זמן בלמידה של כל כלי - תוספים מותאמים אישית, ביצועים זמניים, ומשמעת מותאמת, ו-(Frv) ליתר דיוק, כדי להפוך את ה-torvdvd) ל-to-to-to-torvdancedancedanced: