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