משאבים למפתחים: הצגה וטעינה ידנית של מפות מקור

Sofia Emelianova
Sofia Emelianova

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

סקירה כללית

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

שגיאת הטעינה של מפת המקור במסוף.

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

פתיחת 'מקורות מידע למפתחים' ובדיקת הסטטוס

כדי לבדוק את סטטוסי הטעינה של מפות המקור:

  1. פותחים את כלי הפיתוח, מוודאים שמפעילים את מפות המקור ועוברים אל > כלים נוספים > משאבים למפתחים.
  2. בטבלה, בודקים את הערכים בעמודות הבאות:

    • סטטוס כדי לראות אם הטעינה של מפת המקור הצליחה או נכשלה.
    • Error כדי לקרוא את הודעת השגיאה, אם יש כזו.

העמודות 'סטטוס' ו'שגיאה'.

סינון משאבים לפי כתובת URL או שגיאה

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

סינון מפות מקור שלא מכילות את המחרוזת 'js' בכתובת ה-URL.

פתרון בעיות בטעינת מפות מקור

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

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

תיבת הסימון 'טעינה דרך אתר'

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

טעינת מפת מקור באופן ידני

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

  1. יצירת מפות מקור באמצעות כלים שתומכים בהן.
  2. אירוח מפות המקור באופן מקומי.
  3. פותחים את כלי הפיתוח בדף ומוודאים שמפעילים את מפות המקור.
  4. פותחים את הקובץ שנפרס (שעובד) בקטע מקורות, לוחצים עליו לחיצה ימנית בעורך ובוחרים באפשרות הוספת מפת מקור בתפריט.

    בוחרים באפשרות 'הוספת מפות מקור' בתפריט.

  5. בתיבת הטקסט, מציינים את כתובת ה-URL של מפת המקור ולוחצים על הוספה.

    ציון כתובת ה-URL של מפת המקור.

  6. בודקים אם מפת המקור מופיעה במשאבי הפיתוח ואת הקובץ המקורי (הממופה מהקובץ שנפרס) בעץ הקבצים.

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

  7. ממשיכים לניפוי באגים בקובץ המקורי.