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

קייס בסקית
קייס בסקית
סופיה אמליאנובה
סופיה אמליאנובה

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

צפייה בקבצים

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

החלונית 'דף'.

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

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

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

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

עריכת CSS ו-JavaScript

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

יצירה, שמירה והפעלה של קטעי קוד

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

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

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

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

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

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

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

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

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

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

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

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

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