במדריך הזה תלמדו איך להשתמש בכלי הפיתוח ל-Chrome כדי להציג את המשאבים של דף אינטרנט. משאבים הם הקבצים שנדרשים לדף כדי שהוא יוצג כמו שצריך. דוגמאות למשאבים: קובצי CSS, JavaScript ו-HTML וגם תמונות.
המדריך הזה מבוסס על ההנחה שאתם מכירים את היסודות של פיתוח אתרים ושל כלי הפיתוח ל-Chrome.
משאבים פתוחים
דרך תפריט הפקודות אפשר לפתוח במהירות את המשאב עם שם המשאב שרוצים לבדוק.
מקישים על Control+P או Command+P (Mac). תיבת הדו-שיח Open File תיפתח.
איור 1. תיבת הדו-שיח פתח קובץ
בוחרים את הקובץ מהתפריט הנפתח, או מתחילים להקליד את שם הקובץ ומקישים על Enter ברגע שהקובץ הנכון מודגש בתיבת ההשלמה האוטומטית.
איור 2. הקלדת שם קובץ בתיבת הדו-שיח פתח קובץ
פתיחת המשאבים בחלונית 'רשת'
למידע נוסף, ראו בדיקת פרטי משאב.
איור 3. בדיקת משאב בחלונית רשת
הצגת משאבים בחלונית 'רשת' מחלוניות אחרות
בקטע Browse resources שבהמשך מוסבר איך להציג משאבים מחלקים שונים בממשק המשתמש של כלי הפיתוח. אם רוצים לבדוק משאב בחלונית רשת, לוחצים לחיצה ימנית על המשאב ובוחרים הצגה בחלונית רשת.
איור 4. האפשרות הצגה בחלונית 'רשת'
רשימת המשאבים
עיון במשאבים בחלונית 'רשת'
למידע נוסף, אפשר לעיין במאמר תיעוד פעילות ברשת.
איור 5. משאבי הדף ביומן הרשת
עיון לפי ספרייה
כדי להציג את המשאבים של דף המסודרים לפי ספרייה:
- לוחצים על הכרטיסייה מקורות כדי לפתוח את החלונית מקורות.
לוחצים על הכרטיסייה דף כדי להציג את המשאבים של הדף. החלונית דף תיפתח.
איור 6. החלונית דף
הנה פירוט של הפריטים הלא ברורים באיור 6:
- top הוא הקשר הגלישה הראשי של המסמך.
- airhorner.com מייצג דומיין. כל המשאבים שמוצבים מתחת לכותרת מגיעים מאותו דומיין.
לדוגמה, כתובת ה-URL המלאה של הקובץ comlink.global.js היא כנראה
https://airhorner.com/scripts/comlink.global.js. - scripts היא ספרייה.
- (index) הוא מסמך ה-HTML הראשי.
- iu3 הוא הקשר גלישה נוסף. ההקשר הזה נוצר ככל הנראה על ידי רכיב
<iframe>שמוטמע ב-HTML הראשי של המסמך. - sw.js הוא הקשר ביצוע של קובץ שירות (service worker).
לוחצים על משאב כדי להציג אותו בעורך.
איור 7. הצגת קובץ בעורך
דפדוף לפי שם קובץ
כברירת מחדל, החלונית דף מקבצת משאבים לפי ספרייה. כדי להשבית את הקיבוץ הזה ולהציג את המשאבים של כל דומיין כרשימה שטוחה:
- פותחים את החלונית Page. למידע נוסף, ראו דפדוף לפי ספרייה.
לוחצים על More options (אפשרויות נוספות)
ומשביתים את Group by Folder.
איור 8. האפשרות Group by Folder (קיבוץ לפי תיקייה)
המשאבים מאורגנים לפי סוג הקובץ. בכל סוג קובץ, המשאבים מאורגנים בסדר אלפביתי.
איור 9. החלונית Page אחרי ההשבתה של Group by Folder
עיון לפי סוג קובץ
כדי לקבץ משאבים לפי סוג הקובץ שלהם:
לוחצים על הכרטיסייה Application (אפליקציה). החלונית אפליקציה תיפתח. כברירת מחדל, החלונית Manifest בדרך כלל נפתחת לפני כן.
איור 10. החלונית Application (אפליקציה)
גוללים למטה לחלונית Frames (מסגרות).
איור 11. החלונית Frames
הרחב את הקטעים הרצויים.
לוחצים על משאב כדי להציג אותו.
איור 11. הצגת משאב בחלונית אפליקציה
עיון בקבצים לפי סוג בחלונית 'רשת'
מידע נוסף זמין במאמר סינון לפי סוג המשאב.
איור 12. סינון CSS ביומן הרשת