תפריט הפקודות ב-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) תפתח שורת חיפוש אשר מאפשרת לחפש ביטויים בכל נכסי האתר הנוכחי.
התוצאה תראה באיזה קובץ/קבצים מופיע הביטוי, הנתיב של כל קובץ ובאיזו שורה בקובץ מופיע הביטוי שחיפשנו.

יצירת והרצת Snippet

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

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

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

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

בהצלחה!

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

רק רגע! :)
כשאני לא כותב פוסטים ב-CodeBrain אני מספק שרותי פיתוח, ייעוץ והדרכה.
אם נראה לך שאני האיש המתאים עבורך, כדאי שנדבר :)