אפשר להשתמש בחלונית מקורות של כלי הפיתוח ל-Chrome כדי:
- הצגת קבצים.
- עריכת CSS ו-JavaScript.
- יוצרים ושומרים קטעי קוד של JavaScript, שאפשר להריץ בכל דף. קטעי טקסט הם בדומה לסימניות.
- ניפוי באגים ב-JavaScript.
- מגדירים סביבת עבודה, כדי שהשינויים שיבוצעו בכלי הפיתוח יישמרו בקוד שבקובץ המערכת.
צפייה בקבצים
משתמשים בחלונית דף כדי להציג את כל המשאבים שהדף נטען.
איך החלונית דף מאורגנת:
- הרמה העליונה, כמו
top
בצילום המסך שלמעלה, מייצגת מסגרת HTML.top
נמצא ב- בכל דף שאתם מבקרים בו.top
מייצג את המסגרת הראשית של המסמך. - הרמה השנייה, כמו
developers.google.com
בצילום המסך שלמעלה, מייצגת מקור. - הרמה השלישית, הרמה הרביעית וכן הלאה מייצגות ספריות ומשאבים שנטענו
מאותו מקור. לדוגמה, בצילום המסך שלמעלה, הנתיב המלא למקור המידע
devsite-googler-button
היאdevelopers.google.com/_static/19aa27122b/css/devsite-googler-button
.
לוחצים על קובץ בחלונית דף כדי להציג את התוכן שלו בחלונית עריכה. ניתן להציג כל סוג של הקובץ. לגבי תמונות, אפשר לראות תצוגה מקדימה של התמונה.
עריכת CSS ו-JavaScript
כדי לערוך CSS ו-JavaScript, משתמשים בחלונית עריכה. כלי הפיתוח מעדכנים את הדף כדי להריץ את הקוד החדש.
בעזרת Editor אפשר גם לנפות באגים. לדוגמה, הוא מסמן וגם מציג הסברים קצרים על שגיאות בקוד לצד שגיאות תחביר ובעיות אחרות, כמו הצהרות CSS של @import
ו-url()
שנכשלו ומאפייני href
של HTML עם כתובות URL לא חוקיות.
אם עורכים את background-color
של רכיב, רואים שהשינוי נכנס לתוקף
באופן מיידי.
כדי שהשינויים ב-JavaScript ייכנסו לתוקף, מקישים על Command+S (Mac) או על Control+S (Windows, Linux). כלי הפיתוח לא מריצים סקריפט מחדש, לכן השינויים היחידים ב-JavaScript שייכנסו לתוקף הם אלה שמבצעים בתוך פונקציות. לדוגמה, שימו לב איך console.log('A')
לא פועל, ואילו console.log('B')
לא פועל.
אם כלי הפיתוח מריצים מחדש את הסקריפט כולו לאחר ביצוע השינוי, הטקסט 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 לדף.
כדי להריץ קטע קוד:
- פותחים את הקובץ בחלונית קטעי טקסט ולוחצים על Run בסרגל הפעולות שבתחתית המסך.
- פותחים את תפריט הפקודה, מוחקים את התו
>
, מקלידים!
, מקלידים את שם קטע טקסט ומקישים על Enter.
אפשר לקרוא מידע נוסף בקטע הרצת קטעי קוד מכל דף.
ניפוי באגים ב-JavaScript
במקום להשתמש ב-console.log()
כדי להסיק איפה ה-JavaScript שגוי, כדאי להשתמש
במקום זאת, יש כלי לניפוי באגים בכלי הפיתוח ל-Chrome. באופן כללי, להגדיר נקודת עצירה
עצירה מכוונת בקוד שלכם, ואז לבצע את הרצת הקוד, שורה אחר שורה
בזמן האימון.
במהלך הקוד, תוכלו לראות ולשנות את הערכים של כל הערכים המוגדרים כרגע מאפיינים ומשתנים, מריצים JavaScript במסוף ועוד.
במאמר תחילת העבודה עם ניפוי באגים ב-JavaScript מפורט מידע בסיסי על ניפוי באגים בכלי הפיתוח.
התמקדות בקוד בלבד
כלי הפיתוח ל-Chrome מאפשרים להתמקד רק בקוד שיוצרים על ידי סינון הרעשים שנוצרים על ידי frameworks, ובניית כלים שמשמשים אתכם לבניית אפליקציות אינטרנט.
כדי לספק לכם את החוויה המודרנית לניפוי באגים באינטרנט, כלי הפיתוח מבצעים את הפעולות הבאות:
- מפריד בין קוד שנכתב לבין קוד שנפרס. כדי לעזור לכם למצוא את הקוד מהר יותר, החלונית מקורות מפרידה בין הקוד שאתם יוצרים לבין הקוד המוקטן והחבילה.
- מתעלם מקוד ידוע של צד שלישי:
בנוסף, אם האפשרות נתמכת ב-frameworks, ב-Call Stack בכלי לניפוי באגים ובמעקבי הקריסות במסוף מוצגת ההיסטוריה המלאה של הפעולות האסינכרוניות.
מידע נוסף זמין במאמרים הבאים:
הגדרה של Workspace
כברירת מחדל, כשעורכים קובץ בחלונית מקורות, השינויים האלה לא נשמרים בטעינה מחדש הדף. סביבות עבודה מאפשרות לשמור בקובץ את השינויים שביצעתם בכלי הפיתוח המערכת. בעיקרון, זה מאפשר לך להשתמש בכלי הפיתוח כעורך הקוד.
כדי להתחיל, עיינו במאמר עריכת קבצים עם סביבות עבודה.