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

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

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

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

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

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

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

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

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

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

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

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

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

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

פתיחת חלוניות באמצעות קיצורי דרך: Elements,‏ Console או החלונית האחרונה

אם אתם מעדיפים להשתמש במקלדת, מקישים על קיצור דרך ב-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 שלו בכרטיסייה Elements (רכיבים) > Styles (סגנונות).

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

כשהכלי פתוח, טוענים מחדש את הדף עם או בלי מטמון

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

• טעינה מחדש רגילה. השימוש במטמון מקצר את זמן הטעינה מחדש.

  מקש קיצור: Cmd+R (macOS) או Ctrl+R (Windows/Linux).

  הערה: check_box השבתת המטמון בחלונית Network גורמת לכך שכל הטעינות הרגילות לא ישתמשו במטמון.

• טעינה ללא שימוש במטמון. הבקשה עוקפת את המטמון אבל לא מרוקנת אותו.

  מקש קיצור: Cmd+Shift+R (macOS) או Ctrl+Shift+R (Windows/Linux).

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

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

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

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

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