יש הרבה דרכים לפתוח את כלי הפיתוח ל-Chrome. אתם יכולים לבחור את הדרך המועדפת עליכם מתוך קובץ העזר המקיף הזה.
אפשר לגשת לכלי הפיתוח באמצעות ממשק המשתמש או המקלדת של Chrome:
- מתפריטים נפתחים ב-Chrome.
- באמצעות קיצורי דרך ייעודיים שפותחים את רכיבים, המסוף או את החלונית האחרונה שבה השתמשתם.
בנוסף, תוכלו לקרוא איך פותחים את כלי הפיתוח באופן אוטומטי בכל כרטיסייה חדשה.
פתיחת כלי הפיתוח מהתפריטים של Chrome
אם אתם מעדיפים להשתמש בממשק משתמש, תוכלו לגשת לכלי הפיתוח מהתפריטים הנפתחים ב-Chrome.
פתיחת חלונית הרכיבים כדי לבדוק את ה-DOM או את ה-CSS
כדי לבצע בדיקה, לוחצים לחיצה ימנית על רכיב בדף ובוחרים באפשרות בדיקה.
כלי הפיתוח פותח את החלונית 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 (רכיבים) > Styles (סגנונות).
הרשימה המלאה של מקשי הקיצור של כלי הפיתוח מופיעה במאמר בנושא מקשי קיצור.
פתיחה אוטומטית של כלי הפיתוח בכל כרטיסייה חדשה
מריצים את Chrome משורת הפקודה ומעבירים את הדגל --auto-open-devtools-for-tabs
:
סוגרים כל מופע של Chrome שפועל.
להריץ את האפליקציה המועדפת עליכם במסוף או בשורת הפקודה.
בהתאם למערכת ההפעלה, מריצים את הפקודה הבאה:
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.
מה השלב הבא?
לאחר מכן, כדאי לצפות בסרטון הבא כדי ללמוד על כמה קיצורי דרך והגדרות שימושיים לניווט מהיר יותר בכלי הפיתוח.
במאמר התאמה אישית של כלי פיתוח יש חוויית למידה מעשית יותר.