פתיחת כלי הפיתוח ל-Chrome

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

יש הרבה דרכים לפתוח את כלי הפיתוח ל-Chrome. בספריית העזרה המפורטת הזו תוכלו למצוא את הדרך המועדפת עליכם.

אפשר לגשת לכלי הפיתוח באמצעות ממשק המשתמש של Chrome או המקלדת:

• מתפריטים נפתחים ב-Chrome.
• באמצעות קיצורי דרך ייעודיים שפותחים את רכיבים, המסוף או את החלונית האחרונה שבה השתמשתם.

בנוסף, כאן מוסבר איך לפתוח באופן אוטומטי כלי פיתוח בכל כרטיסייה חדשה.

פתיחת כלי הפיתוח מהתפריטים של Chrome

אם אתם מעדיפים ממשק משתמש, תוכלו לגשת ל-DevTools מהתפריטים הנפתחים ב-Chrome.

פותחים את חלונית הרכיבים כדי לבדוק את ה-DOM או את ה-CSS

כדי לבדוק, לוחצים לחיצה ימנית על רכיב בדף ובוחרים באפשרות בדיקה.

חלונית Elements נפתחת ב-DevTools והרכיב נבחר בעץ ה-DOM. בכרטיסייה Styles (סגנונות) מוצגים כללי ה-CSS שחלים על הרכיב שנבחר.

פתיחת החלונית האחרונה שבה השתמשתם מהתפריט הראשי של Chrome

כדי לפתוח את הלוח האחרון של DevTools, לוחצים על הלחצן more_vert שמשמאל לסרגל הכתובות ובוחרים באפשרות כלים נוספים > כלים למפתחים.

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

פתיחת חלוניות באמצעות מקשי קיצור: רכיבים, מסוף או החלונית האחרונה

אם אתם מעדיפים להשתמש במקלדת, מקישים על מקשי הקיצור ב-Chrome בהתאם למערכת ההפעלה:

מערכת ההפעלה	רכיבים	המסוף	החלונית האחרונה
Windows או Linux	Ctrl + Shift + C	Ctrl + Shift + J	F12 Ctrl + Shift + I
Mac	‎Cmd + Option + C	Cmd + Option + J	Fn + F12 Cmd + Option + I

דרך פשוטה לזכור את קיצורי הדרך:

• C מייצג את CSS.
• J עבור JavaScript.
• I מציין את הבחירה שלך.

קיצור הדרך C פותח את החלונית Elements במצב הניפוי ink_selection. במצב הזה מוצגות טיפים מועילים כשמעבירים את העכבר מעל רכיבים בדף. אפשר גם ללחוץ על כל רכיב כדי להציג את ה-CSS שלו בכרטיסייה Elements (רכיבים) > Styles (סגנונות).

במקשי הקיצור מפורטת הרשימה המלאה של מקשי הקיצור של כלי הפיתוח.

פתיחה אוטומטית של כלי הפיתוח בכל כרטיסייה חדשה

מריצים את Chrome משורת הפקודה ומעבירים את הדגל --auto-open-devtools-for-tabs:

1. יוצאים מכל מופע של Chrome שפועל.

   נקודת מפתח: הדגל הזה פועל רק במכונה הראשונה של Chrome שתפתחו. אם הבעיה נמשכת, למשל ב-Windows, חשוב לסיים את כל התהליכים של Chrome שנמצאים במנהל המשימות.

2. להריץ את האפליקציה המועדפת עליכם במסוף או בשורת הפקודה.

3. בהתאם למערכת ההפעלה, מריצים את הפקודה הבאה:

• macOS:

  open -a "Google Chrome" --args --auto-open-devtools-for-tabs
  

• Windows:

  start chrome --auto-open-devtools-for-tabs
  

• Linux:

  google-chrome --auto-open-devtools-for-tabs
  

כלי הפיתוח ייפתחו באופן אוטומטי בכל כרטיסייה חדשה עד ש-Chrome ייסגר.

מה השלב הבא?

הצלחה: מזל טוב! עכשיו יש לכם גישה לכל היכולות של כלי הפיתוח ל-Chrome.

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

למידע נוסף על התאמה אישית של DevTools, אפשר לעיין במאמר איך להתאים אישית את DevTools.