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

ניפוי באגים באמצעות AI

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

חידושים מבוססי-AI

‫Gemini יכול לעזור לכם לנתח ולשפר את הסגנון, הרשת, המקורות והביצועים של האתר. קבלת עזרה בשגיאות במסוף והצעות לקוד בחלוניות Console ו-Sources.
חידושים מבוססי-AI
אתם יכולים לתת לסוכני התכנות שלכם את אותם כלים מהימנים שבהם אתם משתמשים כדי לבדוק את הפעילות ברשת, לתעד עקבות ולפתור בעיות באפליקציות אינטרנט, במסגרת תהליך העבודה של ה-AI.

מחברים את השרת Chrome DevTools MCP (Model Context Protocol) לכלי הרצוי: Antigravity,‏ Claude Code,‏ Cline,‏ Copilot ועוד.

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

טיפים לשימוש בכלים למפתחים

מומלץ לצפות בסדרת הסרטונים החודשית שלנו, שבה אנחנו מסבירים בצורה משעשעת על תרחישי ניפוי באגים נפוצים בכלי הפיתוח.
כלי הפיתוח ל-Chrome לסוכנים מאפשרים לסוכן לאמת פריסות רספונסיביות, לבדוק ממשקי API מבוססי-מיקום ולבצע סימולציה של מהירויות שונות של מעבד או רשת.
‫Lighthouse בכלי הפיתוח ל-Chrome לסוכני AI מאפשר לסוכן התכנות להעריך את איכות האתר על ידי ביצוע בדיקות תקינות בזמן אמת של נגישות, אופטימיזציה למנועי חיפוש (SEO), שיטות מומלצות וגלישה באמצעות סוכן.
סיור מודרך בחלונית הביצועים המעודכנת, שבו נסביר איך למדוד את מדדי הליבה לבדיקת חוויית המשתמש באתר (LCP, ‏ CLS, ‏ INP) ואיך לקבל מ-Gemini עצות מותאמות אישית.
מרימים את המפרשים עם כלי הפיתוח והופכים לפיראטים של ניפוי באגים! במאמר הזה נסביר על טכניקות להדמיה של סגנונות מיקוד, לבדיקת טפסים עם מילוי אוטומטי ולפתרון שגיאות בשרת באמצעות החלפות של רשת.

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

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

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

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

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

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

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

עוד כלים

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