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

Kayce Basques
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

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

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

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

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

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

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

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

מה השלב הבא?

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

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