הצגת משאבי הדף

במדריך הזה תלמדו איך להשתמש בכלי הפיתוח של Chrome כדי להציג את המשאבים של דף אינטרנט. משאבים הם הקבצים הדרושים לדף כדי שהוא יוצג בצורה תקינה. דוגמאות למשאבים כוללות קובצי CSS,‏ JavaScript ו-HTML, וגם תמונות.

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

משאבים פתוחים

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

  1. מקישים על Control+P או על Command+P (ב-Mac). תיפתח תיבת הדו-שיח פתיחת קובץ.

    תיבת הדו-שיח 'פתיחת קובץ'

    איור 1. תיבת הדו-שיח פתיחת קובץ

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

    הקלדה של שם קובץ בתיבת הדו-שיח 'פתיחת קובץ'

    איור 2. הקלדה של שם קובץ בתיבת הדו-שיח פתיחת קובץ

פתיחת משאבים בחלונית 'רשת'

בדיקת הפרטים של משאב

בדיקת משאב בחלונית 'רשת'

איור 3. בדיקת משאב בחלונית Network

הצגת משאבים בחלונית 'רשת' מחלוניות אחרות

בקטע עיון במשאבים בהמשך מוסבר איך להציג משאבים מחלקים שונים בממשק המשתמש של DevTools. אם תרצו לבדוק משאב בחלונית Network, תוכלו ללחוץ לחיצה ימנית על המשאב ולבחור באפשרות Reveal in Network panel.

הצגה בחלונית 'רשת'

איור 4. האפשרות חשיפה בחלונית הרשת

רשימת המשאבים

עיון במשאבים בחלונית 'רשת'

תיעוד הפעילות ברשת

משאבי דף ביומן הרשת

איור 5. משאבי דף ביומן הרשת

עיון לפי ספרייה

כדי להציג את המשאבים של דף מסוים שמאורגנים לפי ספרייה:

  1. לוחצים על הכרטיסייה מקורות כדי לפתוח את החלונית מקורות.
  2. לוחצים על הכרטיסייה דף כדי להציג את המשאבים של הדף. החלונית דף תיפתח.

    חלונית הדף

    איור 6. החלונית דף

    פירוט הפריטים שפחות ברורים באיור 6:

    • top הוא ההקשר של הגלישה במסמך הראשי.
    • airhorner.com מייצג דומיין. כל המשאבים שמתחתיו מגיעים מהדומיין הזה. לדוגמה, כתובת ה-URL המלאה של הקובץ comlink.global.js היא כנראה https://airhorner.com/scripts/comlink.global.js.
    • scripts היא ספרייה.
    • (index) הוא מסמך ה-HTML הראשי.
    • iu3 הוא הקשר גלישה אחר. סביר להניח שההקשר הזה נוצר על ידי רכיב <iframe> שמוטמע ב-HTML של המסמך הראשי.
    • sw.js הוא הקשר של ביצוע של שירות עובד.
  3. לוחצים על משאב כדי להציג אותו בכלי העריכה.

    הצגת קובץ בכלי העריכה

    איור 7. הצגת קובץ בכלי העריכה

עיון לפי שם הקובץ

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

  1. פותחים את החלונית דף. עיון לפי ספרייה
  2. לוחצים על אפשרויות נוספות אפשרויות נוספות ומשביתים את האפשרות קיבוץ לפי תיקייה.

    קיבוץ לפי תיקייה

    איור 8. האפשרות Group By Folder

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

    חלונית הדפים אחרי השבתת האפשרות &#39;קיבוץ לפי תיקייה&#39;

    איור 9. החלונית דף אחרי השבתת האפשרות קיבוץ לפי תיקייה

עיון לפי סוג קובץ

כדי לקבץ משאבים לפי סוג הקובץ שלהם:

  1. לוחצים על הכרטיסייה Application. החלונית Application (אפליקציה) נפתחת. כברירת מחדל, החלונית Manifest נפתחת בדרך כלל קודם.

    חלונית האפליקציות

    איור 10. החלונית Application (אפליקציה)

  2. גוללים למטה לחלונית Frames.

    חלונית Frames

    איור 11. החלונית Frames

  3. מרחיבים את הקטעים שמעניינים אתכם.

  4. לוחצים על משאב כדי להציג אותו.

    הצגת משאב בחלונית &#39;אפליקציה&#39;

    איור 11. הצגת משאב בחלונית Application

עיון בקבצים לפי סוג בחלונית 'רשת'

סינון לפי סוג משאב

סינון של CSS ביומן הרשת

איור 12. סינון של CSS ביומן הרשת