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

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. כלי הפיתוח מעדכנים את הדף כדי להריץ את הקוד החדש.

הכלי לעריכת קודים עוזר גם לנפות באגים. לדוגמה, הוא מדגיש את השגיאות ומציג תיאורים שלהן בשורה לצד שגיאות תחביר ובעיות אחרות, כמו הצהרות @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 נמחקים מ-DevTools. במאמר הגדרת סביבת עבודה מוסבר איך לשמור את השינויים במערכת הקבצים.

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

קטעי קוד הם סקריפטים שאפשר להריץ בכל דף. נניח שאתם מקלידים שוב ושוב את הקוד הבא ב-מסוף כדי להוסיף את ספריית 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);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

הגדרת Workspace

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

במאמר עריכת קבצים באמצעות Workspaces מוסבר איך מתחילים.