טיפים נהדרים ל-Google DevTools

אין מפתח Front-End שלא מעביר שעות מול הכלי הנהדר של גוגל – DevTools.
במאמר הבא אגלה לכם מספר טיפים שיחסכו לכם לא מעט זמן.

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

פתיחה מהירה של הכלי

Ctrl + Shift + i – יפתח עבורנו את הכלי.
Ctrl + Shift + j – יפתח עבורנו את הכלי כאשר הוא מפוקס על לשונית ה-Console.

הגדלת/הקטנים ערכים באופן מהיר

אם נעמוד על הערך, נלחץ על Shift ועל חץ כלפי מעלה/מטה, הערך ישתנה בקפיצות של 10.
אם נלחץ על Ctrl ועל חץ כלפי מעלה/מטה, הערך ישתנה בקפיצות של 100.
אם נלחץ על Alt ועל חץ כלפי מעלה/מטה הערך ישתנה בקפיצות של 0.1 – יעיל מאוד שעובדים במידות גדולות כמו em.

שינוי פורמט הצבע

אם נעמוד על ריבוע שמסמל צבע כלשהו, כמובן שנוכל ללחוץ עליו ויפתח לנו Color Picker נחמד אבל לחיצה על Shift וקליק של העבר יחליף את הפורמט של הצבע בין hex, rgb ו – hsl.

שינוי מצב של אלמנט

כאשר נרצה לעצב אלמנט או לבדוק עיצוב קיים של אלמנט כאשר הוא במצב hover/visited/active/focus, נעמוד על האלמנט ונלחץ על hov: בפינה הימנית העליונה ומיד יפתח לנו חלון שיאפשר לנו לבחור איזה מצב נרצה לראות.

בחירה מהירה של אלמנט

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

צפייה בערכי Cookies ומחיקתם

אם נרצה למחוק עוגיות של האתר בו אנו נמצאים, נלחץ על לשונית "Application", בתפריט מצד שמאל תופיע לנו לשונית "Cookies", לחיצה על הדומיין המדובר תראה לנו את רשימת העוגיות הקיימות. לחיצה על Delete תמחק את העוגייה.

צפייה בקבצי JavaScript דחוסים באופן נוח

דחיסת קבצי JavaScript היא דרך מעולה לשיפור מהירות טעינת האתר אך במקרה ונדרש לצפות בקובץ שכזה, לא נבין הרבה עקב כך שהוא לא קריא במיוחד.
הכלי הנהדר של גוגל עוזר לנו גם במלאכה הזו. ניכנס ללשונית Sources ונבחר קובץ JavaScript דחוס מהרשימה שבצד, הקוד הלא קריא יופיע מיד. לחיצה על {} בתחתית המסך ו-הופה! קובץ JavaScript קריא ומסודר.

השפעת השינויים על קבצים מקומיים.

הטיפ הבא לא יחסוך לכם דקות בודדות אלא שעות!
מי מאיתנו לא מכיר את ההליך הקבוע בו אנו מפתחים אתר באופן מקומי, מבצעים שינוי מסוים ב-DevTool, אוהבים את התוצאה ומיד מדלגים אל הקובץ, עורכים את אותו השינוי ושומרים. וחוזר חלילה על כל שינוי.
לא חבל? אותי לימדו שזמן זה כסף ולכן:
פתחו את הכלי וכנסו ללשונית Source, בתפריט מצד שמאל חפשו את התיקייה אותה אתם רוצים להוסיף ל-WorkSpace, לחיצה ימנית ובחרו ב-"Add folder to workspace". מיד תתבקשו לתת אישור.
כעת, כאשר אתם מעוניינים לעשות שינוי כלשהו, בחרו בקובץ הרצוי מצד שמאל, ערכו את השינוי ותשמרו (Ctrl + s), רעננו והתוצאה לפניכם.
דרך נוספת להגיע למיקום המדויק של השורה הנדרשת היא כאשר אתם נמצאים בלשונית "Elemets" ורואים את ה-Style של האלמנט הרצוי, לחצו על שם הקובץ שנמצא בפינה הימנית והנה, הגעתכם.

בהצלחה!

נהנת ממאמר זה? הירשם לרשימת התפוצה וקבל עדכונים על מאמרים חדשים!


תגובה אחת בנושא “טיפים נהדרים ל-Google DevTools”

  1. יש טיפים יותר חזקים כמו האפשרות להעתיק אלמנט שלם החוצה ע"י קופי אלמנט אוטור או להעתיק סלקטור של אלמנט ע"י קופי סלקטור

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *