סקירה כללית של חלונית המקורות

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

סקירה כללית

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

פתיחת החלונית 'מקורות'

כדי לפתוח את החלונית 'מקורות':

  1. פותחים את כלי הפיתוח.
  2. כדי לפתוח את תפריט הפקודות, לוחצים על:
    • macOS: Command+Shift+P
    • ב-Windows, ב-Linux וב-ChromeOS:‏ Control+Shift+P
  3. מתחילים להקליד sources, בוחרים באפשרות הצגת חלונית המקורות ומקישים על Enter.

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

צפייה בקבצים

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

הכרטיסייה 'דף'.

איך מאורגנת הכרטיסייה דף:

  • הרמה העליונה, כמו top בצילום המסך שלמעלה, מייצגת מסגרת HTML. top מופיע בכל דף שבו אתם מבקרים. top מייצג את המסגרת הראשית של המסמך.
  • הרמה השנייה, כמו developers.google.com בצילום המסך שלמעלה, מייצגת מקור.
  • הרמה השלישית, הרביעית וכן הלאה מייצגות ספריות ומשאבים שנטענו מהמקור הזה. לדוגמה, בצילום המסך שלמעלה, הנתיב המלא למשאב devsite-googler-button הוא developers.google.com/_static/19aa27122b/css/devsite-googler-button.

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

הצגת קובץ בכרטיסייה 'עריכה'.

עריכת CSS ו-JavaScript

לוחצים על הכרטיסייה Editor (עריכה) כדי לערוך את קובצי ה-CSS ו-JavaScript. כלי הפיתוח מעדכנים את הדף כדי להריץ את הקוד החדש.

בעזרת Editor אפשר גם לנפות באגים. לדוגמה, הוא מדגיש את השגיאות ומציג תיאורים שלהן בשורה לצד שגיאות תחביר ובעיות אחרות, כמו הצהרות @import ו-url() של CSS שנכשלו, ומאפייני HTML מסוג href עם כתובות URL לא חוקיות.

הסבר קצר על שגיאת תחביר בשורה.

אם עורכים את background-color של רכיב, השינוי נכנס לתוקף באופן מיידי.

עריכת CSS בכרטיסייה 'עריכה'.

כדי שהשינויים ב-JavaScript ייכנסו לתוקף, מקישים על Command+S (ב-Mac) או על Control+S (ב-Windows או ב-Linux). DevTools לא מפעיל מחדש סקריפט, ולכן רק השינויים ב-JavaScript שתבצעו בתוך הפונקציות ייכנסו לתוקף. לדוגמה, שימו לב איך console.log('A') לא פועל, ואילו console.log('B') לא פועל.

עריכת JavaScript בכרטיסייה 'עריכה'.

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

כלי הפיתוח מוחקים את שינויי ה-CSS ושינויים ב-JavaScript בזמן הטעינה מחדש של הדף. במאמר הגדרת סביבת עבודה מוסבר איך לשמור את השינויים במערכת הקבצים.

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

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

let script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.2.1.min.js';
script.crossOrigin = 'anonymous';
script.integrity = 'sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=';
document.head.appendChild(script);

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

קטע קוד שמוסיף את ספריית jQuery לדף.

כדי להריץ קטע קוד:

  • פותחים את הקובץ בכרטיסייה קטעי טקסט ולוחצים על הפעלה לחצן ההפעלה. בסרגל הפעולות שבתחתית המסך.
  • פותחים את תפריט הפקודה, מוחקים את התו >, מקלידים !, מקלידים את השם של קטע הקוד ומקישים על Enter.

מידע נוסף זמין במאמר הרצת קטעי קוד מכל דף.

ניפוי באגים ב-JavaScript

במקום להשתמש ב-console.log() כדי להסיק איפה קוד ה-JavaScript שגוי, כדאי להשתמש במקום זאת בכלי ניפוי הבאגים של כלי הפיתוח ל-Chrome. באופן כללי, כדאי להגדיר נקודת עצירה (breakpoint), שהיא נקודת עצירה מכוונת בקוד שלכם, ולאחר מכן לבצע את הרצת הקוד שורה אחר שורה.

השהיה בנקודת עצירה.

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

במאמר תחילת השימוש בניפוי באגים ב-JavaScript מוסבר על העקרונות הבסיסיים של ניפוי באגים בכלי הפיתוח.

התמקדות רק בקוד

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

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

בנוסף, אם האפשרות נתמכת ב-frameworks, ב-Call Stack בכלי לניפוי באגים ובמעקבי הקריסות במסוף מוצגת ההיסטוריה המלאה של הפעולות האסינכרוניות.

מידע נוסף זמין במאמרים הבאים:

הגדרה של Workspace

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

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