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

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

צפייה בקבצים

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

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

איך החלונית דף מאורגנת:

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

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

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

עריכת CSS ו-JavaScript

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

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

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

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

עריכת CSS בחלונית העריכה.

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

עריכת JavaScript בחלונית Editor.

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

כלי הפיתוח מוחקים את שינויי ה-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);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

הגדרה של Workspace

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

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