כלי הפיתוח ל-Chrome הוא קבוצת כלים למפתחי אתרים שמובנית ישירות בדפדפן Google Chrome. כלי הפיתוח מאפשרים לכם לערוך דפים באופן שוטף ולאבחן בעיות במהירות, וכך אתם יכולים לבנות אתרים טובים יותר, מהר יותר.
מתחילים מה חדש
DevTools תומך במגוון רחב של משימות נפוצות בפיתוח אינטרנט. כדאי להמשיך לקרוא את הדף הזה כדי להכיר כמה מהתכונות העיקריות של כלי הפיתוח. לא יודעים מאיפה להתחיל או זו הפעם הראשונה שאתם משתמשים בכלי הפיתוח? לצפייה בהקדמה לכלי הפיתוח
התובנות במסוף והסיוע מבוסס-ה-AI עוזרים לכם לנפות באגים ולתקן שגיאות, ביצועים וסגנונות של JavaScript בצורה יעילה יותר.
קבלת תמונה מקיפה של ביצועי הדף, עם המלצות לפעולות שאפשר לבצע.
איך בודקים את המשאבים שהדף טוען ועורכים אותם מהדפדפן
ניתוח של בקשות רשת ותשובות עליהן, ושינוי שלהן בזמן אמת.

עזרה מ-AI ותובנות במסוף

איך חידושים בתחום ה-AI בכלי הפיתוח עוזרים לכם לעשות יותר מהר?
Gemini עוזר לנתח ולשפר את העיצוב, הרשת, המקורות והביצועים של האתר.
כאן תוכלו לקרוא על תרחישים לדוגמה לשימוש בתכונות של AI Assistance ב-Chrome DevTools, ולגלות איך הן יכולות לתמוך בתהליך ניפוי הבאגים בכל הנוגע לעיצוב, לביצועים ועוד.
הסבר על ההודעות והשגיאות במסוף כלי הפיתוח, ואיך לתקן אותן – בלי העתקה והדבקה.

טיפים לכלי פיתוח

סדרת הסרטונים החודשית שלנו מסבירה איך משתמשים בכלי הפיתוח כדי לפתור בעיות נפוצות בפיתוח אינטרנט.
איך מתעדים מעקב ביצועים ב-DevTools ומנתחים אותו כדי לזהות בעיות בביצועים ולפתור אותן
ניפוי באגים של בעיות LCP ושימוש בנתוני CrUX כדי לבדוק אם אתם מנפים באגים של חוויה דומה למשתמשים
אנחנו בודקים את הסוגים השונים של מטמון הדפדפן ואת הדרכים לבדוק ולנהל אותם בכלי הפיתוח של Chrome.
ניסיתם לבדוק רכיב, והוא פשוט נעלם? זה כמו שהקוד משחק איתכם מחבואים!

קבלת תובנות לגבי הביצועים

מגוון רחב של כלים שיעזרו לכם למדוד ולבצע אופטימיזציה של היבטים שונים של ביצועי זמן הריצה: חלונית הביצועים, Lighthouse ועוד.
כאן מוסבר על כל התכונות בחלונית 'ביצועים': איך מתעדים מעקב ביצועים, איך מציגים ומנתחים את המעקב ועוד.
כבר כמעט 15 שנה שהחלונית 'ביצועים' עוזרת למפתחים למדוד ולבצע אופטימיזציה של ביצועי זמן הריצה שלהם. איך הוא יתפתח בהמשך?
הוספת הערות למעקב אחר נתונים במקום ושמירתן ישירות בקובץ המעקב, כדי לשתף אותן בקלות.

חדשות ועדכונים

בדיקה ועריכה של משאבים

מידע על כל התכונות שבחלונית Sources (מקורות): איך להציג ולערוך קבצים, לנפות באגים ב-JavaScript ולהגדיר סביבת עבודה.
מתחילים
בעזרת Workspace אפשר לשמור שינויים שביצעתם בכלי הפיתוח בקוד המקור שנשמר במחשב. איך מגדירים סביבת עבודה בפרויקטים שלכם
קריאת המדריך

ניתוח הפעילות ברשת

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

עוד כלים

כדאי לבדוק את כל התכונות והיכולות האחרות של כלי הפיתוח.
מידע נוסף על הצגה ושינוי של DOM של דף.
במאמר הזה מוסבר איך להציג ולשנות CSS בדף.
לעקוב אחר שינויים ב-HTML, ב-CSS וב-JavaScript.
לתעד הודעות ולהריץ JavaScript.
להעריך את ביצועי האתר.
איתור בעיות זיכרון שמשפיעות על ביצועי הדף, כולל דליפות זיכרון ועוד.
בדיקה, שינוי וניפוי באגים באפליקציות אינטרנט, בדיקת מטמון, הצגת נפח האחסון ועוד.
בדיקה ושינוי של אנימציות.
לתעד, להפעיל מחדש, למדוד את זרימות המשתמשים ולערוך את השלבים שלהם.
יש לנו מגוון אפשרויות שמשפיעות על הרינדור של תוכן מהאינטרנט.
בדיקה וניפוי באגים של כתובות שנשמרו.
איתור ותיקון בעיות באתר.
יש לוודא שהדף מוגן באופן מלא באמצעות HTTPS.
הצגת מידע וניפוי באגים בנגני מדיה בכל כרטיסייה בדפדפן.
אמולציה של חיישני המכשיר.
אמולציה של גורמי אימות.