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

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

בחלונית מקורות בכלי הפיתוח ל-Chrome תוכלו:

צפייה בקבצים

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

החלונית 'דף'

האופן שבו חלונית Page מאורגנת:

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

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

הצגת קובץ בחלונית Editor.

עריכת CSS ו-JavaScript

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

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

כלי הפיתוח מוחקים את השינויים ב-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) שהיא נקודת עצירה (breakpoint) קבועה בקוד, ואז לבצע את כל שלבי הביצוע של הקוד, שורה אחרי שורה.

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

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

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

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

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

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

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

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

הגדרה של סביבת עבודה

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

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