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

Kayce Basques
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

מה השלב הבא?

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

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