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