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

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

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

סקירה כללית

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

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

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

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

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

צפייה בקבצים

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

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

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

  • הרמה העליונה, כמו 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 עוזר גם לנפות באגים. לדוגמה, הוא מדגיש ומציג עצות שגיאה מוטבעות ליד שגיאות תחביר ובעיות אחרות, כמו הצהרות CSS‏ @import ו-url() שנכשלו ומאפייני HTML‏ href עם כתובות URL לא תקינות.

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

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

עריכת CSS בכרטיסייה Editor (עורך).

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

עריכת JavaScript בכרטיסייה Editor (עורך).

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

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

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

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

כדי להריץ Snippet:

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

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

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

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

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

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

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

התמקדות בקוד בלבד

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

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

בנוסף, אם המסגרות תומכות בכך, Call Stack במאגר הבאגים וstack traces בConsole מציגים את ההיסטוריה המלאה של פעולות אסינכרוניות.

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

הגדרת Workspace

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

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