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

קייס בסקית
קייס בסקית
ג'סלין יין
ג'סלין יין
סופיה אמליאנובה
סופיה אמליאנובה

יש הרבה דרכים לפתוח את כלי הפיתוח ל-Chrome. בחרו את הדרך המועדפת עליכם מתוך קובץ העזר המקיף הזה.

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

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

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

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

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

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

האפשרות 'בדיקה' בתפריט נפתח ב-Chrome.

כלי הפיתוח פותחים את החלונית Elements ובוחרים את הרכיב בעץ ה-DOM. בחלונית סגנונות אפשר לראות כללי CSS שחלים על הרכיב שנבחר.

נבחר רכיב בחלונית הרכיבים.

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

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

האפשרות 'כלים למפתחים' שנבחרה מתפריט שלוש הנקודות.

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

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

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

מערכת ההפעלה Elements מסוף הלוח האחרון שלך
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.
  • אני מגדיר את הבחירה שלכם.

מקש הקיצור C פותח את החלונית רכיבים במצב בודק בדיקה.. במצב הזה מוצגים הסברים קצרים כשמעבירים את העכבר מעל רכיבים בדף. ניתן גם ללחוץ על רכיב כלשהו כדי להציג את ה-CSS שלו בחלונית רכיבים > סגנונות.

חלונית הרכיבים במצב בודק עם הסבר קצר.

הרשימה המלאה של מקשי הקיצור של DevTools זמינה במאמר מקשי קיצור.

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

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

  1. יוצאים מכל מופע של 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 ייסגר.

מה השלב הבא?

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

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