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

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

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

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

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

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

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

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

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

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

כלי הפיתוח פותח את החלונית Elements ובוחר את הרכיב בעץ ה-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 שלו בקטע רכיבים > סגנונות.

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

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

מריצים את 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.

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

במאמר התאמה אישית של כלי פיתוח יש חוויית למידה מעשית יותר.