תפריט הפקודות ב-Chrome DevTools

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

תפריט פקודות? למה ואיך?

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

פתיחת תפריט הפקודות

על מנת לפתוח את תפריט הפקודות, נפתח קודם לכן את כלי המפתחים כמובן, Ctrl + Shift + l ב-Windows ו-Cmd+Opt+I ב-Mac ולאחר מכן Ctrl + Shift + P ב-Windows ו-Cmd+Opt+P ב-Mac. זהו, מיד נפתח לפנינו עולם שלם של אפשרויות.

הגעה מהירה יותר למסכים נפוצים

בתור התחלה, מסך הפקודות יכול לעזור לנו להגיע אל מסכים שאנו כמפתחים עושים בהם שימוש רב, כגון: Console, Elements, Network, Sources ועוד:

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

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

הורדת Screenshot

כלי המפתחים של Chrome מאפשר יצירת והורדת צילומי מסך של העמוד הנוכחי, למשל:
הפקודה Capture area screenshot תבצע הורדה של צילום מסך לפי ה"חיתוך" הרצוי.
הפקודה Capture full size screenshoot תבצע הורדה של צילום מסך מלא.

ניתן להוריד צילום מסך של חלק מהעמוד או כולו.
ניתן להוריד צילום מסך של חלק מהעמוד או כולו.

חיפוש ביטויים בכל נכסי האתר האתר

הפקודה Show Search (יש שניים אז שימו לב שאתם בוחרים בזו שתחת Drawer) תפתח שורת חיפוש אשר מאפשרת לחפש ביטויים בכל נכסי האתר הנוכחי.
התוצאה תראה באיזה קובץ/קבצים מופיע הביטוי, הנתיב של כל קובץ ובאיזו שורה בקובץ מופיע הביטוי שחיפשנו.

הפקודה Show Search מאפשרת לחפש ביטויים בקבצי האתר.
הפקודה Show Search מאפשרת לחפש ביטויים בקבצי האתר.

יצירת והרצת Snippet

כלי המפתחים של Chrome מאפשר להוסיף Snippet (קטע קוד) שניתן להריץ אותו ב-Console כשנרצה ללא הצורך להזינו בכל פעם מחדש.
תפריט הפקודות מאפשר לעשות זאת במהירות.
הפקודה Create new snippet תיצור Snippet חדש עם שם ברירת מחדל (ניתן לשנות על ידי מקש ימני ->Rename) ותפתח חלון טקסט שבו ניתן להזין את הקוד שנרצה.

הוספת snippet (קטע קוד) חדש.
הוספת snippet (קטע קוד) חדש.

על מנת להריץ Snippet נפתח את חלון הפקודות, נמחק את המשולש בתחילת שורת הפקודה, נזין !? ונקיש Enter. מיד נקבל את רשימת ה-Snippet השמורים:

בחירה ב-snippet הרצוי תוציא אותו אל הפועל.
בחירה ב-snippet הרצוי תוציא אותו אל הפועל.

לחיצה על ה-Snippet הנבחר תריץ את הקוד שלו:

ניתן לראות שה-snippet הנבחר רץ ב-console.
ניתן לראות שה-snippet הנבחר רץ ב-console.

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

בהצלחה!

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


כתיבת תגובה

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