מחשבים

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

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

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

 
 

אחד הדברים שלוקחים הכי הרבה זמן בפיתוח אתרים הוא עבודה עם הCSS.
הdeveloper tool של גוגל כרום מאפשר לשנות את הCSS בזמן אמת בכדי לראות את השינוי בדפדפן (במקום לשנות בקוד, לרפרש את הדף וכן הלאה).
הדרך לעשות זאת פשוטה מאוד, סמנו את האובייקט שאתם רוצים לשנות לו את הCSS  בקוד HTML או בעזרת בחרו אותו בעזרת זכוכית המגדלת שדיברנו עליה קודם.
לאחר מכן בחלונית הימנית ביותר בdeveloper tools תחת styles תוכלו להכניס את הCSS החדש ולראות את השינוי מתרחש לאובייקט באותו הרגע.
 
שימו לב שכל שינוי שאתם עושים נעשה בצד הלקוח בדפדפן ולא משנה את קוד המקור שלכם, כלומר, אם עשיתם שינוי והגעתם לתוצאה הרצויה בdeveloper tools תצטרכו להעתיק את הCSS ולהטמיע אותו בקוד שלכם.

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

הטאב האחרון עליו נדבר במדריך זה הוא טאב הSources.
טאב זה מאפשר לכם לראות בעץ בחלונית השמאלית את הקבצים המורצים באותו הרגע עבור הדף בו אתם נמצאים.
זה יכול להיות קובץ CSS,HTML, JS ועוד.
 
החלק החשוב כאן הוא שאם אתם רוצים לדבג קובץ JS ולהציב breakpoints, צריך לעשות את זה כאן.
לחצו ליד השורה הרלוונטית בקובץ JS, הריצה תעצור בנקודה הזו ותוכלו לראות ולהציג משתנים וכו'.

זה ייתן לכם איזושהי נקודת פתיחה בכדי להתחיל ולדבג את האתרים שלכם.
ככל שתכירו את הכלי הזה טוב יותר, תכתבו קוד מהר יותר ויקח לכם פחות זמן לתקן דברים.