DevTools
כלי הפיתוח ל-Chrome הוא קבוצת כלים למפתחי אתרים שמובנית ישירות בדפדפן Google Chrome. כלי הפיתוח מאפשרים לכם לערוך דפים באופן שוטף ולאבחן בעיות במהירות, וכך אתם יכולים לבנות אתרים טובים יותר, מהר יותר.
DevTools תומך במגוון רחב של משימות נפוצות בפיתוח אינטרנט. כדאי להמשיך לקרוא את הדף הזה כדי להכיר כמה מהתכונות העיקריות של כלי הפיתוח. לא יודעים מאיפה להתחיל או זו הפעם הראשונה שאתם משתמשים בכלי הפיתוח? לצפייה בהקדמה לכלי הפיתוח
קבלת עזרה מבוססת-AI
התובנות במסוף והסיוע מבוסס-ה-AI עוזרים לכם לנפות באגים ולתקן שגיאות, ביצועים וסגנונות של JavaScript בצורה יעילה יותר.
הסבר על הביצועים
קבלת תמונה מקיפה של ביצועי הדף, עם המלצות לפעולות שאפשר לבצע.
בדיקת משאבים
איך בודקים את המשאבים שהדף טוען ועורכים אותם מהדפדפן
ניתוח הרשת
ניתוח של בקשות רשת ותשובות עליהן, ושינוי שלהן בזמן אמת.
עזרה מ-AI ותובנות במסוף
איך חידושים בתחום ה-AI בכלי הפיתוח עוזרים לכם לעשות יותר מהר?
מתחילים
Gemini עוזר לנתח ולשפר את העיצוב, הרשת, המקורות והביצועים של האתר.
מקבלים השראה
כאן תוכלו לקרוא על תרחישים לדוגמה לשימוש בתכונות של AI Assistance ב-Chrome DevTools, ולגלות איך הן יכולות לתמוך בתהליך ניפוי הבאגים בכל הנוגע לעיצוב, לביצועים ועוד.
הסבר על הודעות במסוף
הסבר על ההודעות והשגיאות במסוף כלי הפיתוח, ואיך לתקן אותן – בלי העתקה והדבקה.
טיפים לכלי פיתוח
סדרת הסרטונים החודשית שלנו מסבירה איך משתמשים בכלי הפיתוח כדי לפתור בעיות נפוצות בפיתוח אינטרנט.
הקלטה וניתוח של עקבות ביצועים
איך מתעדים מעקב ביצועים ב-DevTools ומנתחים אותו כדי לזהות בעיות בביצועים ולפתור אותן
מעקב אחר מדדי הליבה לבדיקת חוויית המשתמש באתר (Core Web Vitals) בזמן אמת
ניפוי באגים של בעיות LCP ושימוש בנתוני CrUX כדי לבדוק אם אתם מנפים באגים של חוויה דומה למשתמשים
הסבר על שמירה במטמון
אנחנו בודקים את הסוגים השונים של מטמון הדפדפן ואת הדרכים לבדוק ולנהל אותם בכלי הפיתוח של Chrome.
הקפאת המסך ובדיקה של רכיבים שנעלמים
ניסיתם לבדוק רכיב, והוא פשוט נעלם? זה כמו שהקוד משחק איתכם מחבואים!
קבלת תובנות לגבי הביצועים
מגוון רחב של כלים שיעזרו לכם למדוד ולבצע אופטימיזציה של היבטים שונים של ביצועי זמן הריצה: חלונית הביצועים, Lighthouse ועוד.
סקירה כללית על כלי הביצועים
כאן מוסבר על כל התכונות בחלונית 'ביצועים': איך מתעדים מעקב ביצועים, איך מציגים ומנתחים את המעקב ועוד.
העתיד של הכלים לבדיקת ביצועים
כבר כמעט 15 שנה שהחלונית 'ביצועים' עוזרת למפתחים למדוד ולבצע אופטימיזציה של ביצועי זמן הריצה שלהם. איך הוא יתפתח בהמשך?
הוספת הערות לנתוני מעקב אחר ביצועים
הוספת הערות למעקב אחר נתונים במקום ושמירתן ישירות בקובץ המעקב, כדי לשתף אותן בקלות.
חדשות ועדכונים
בדיקה ועריכה של משאבים
הסבר על התכונות
מידע על כל התכונות שבחלונית Sources (מקורות): איך להציג ולערוך קבצים, לנפות באגים ב-JavaScript ולהגדיר סביבת עבודה.
הגדרה של סביבת עבודה
בעזרת Workspace אפשר לשמור שינויים שביצעתם בכלי הפיתוח בקוד המקור שנשמר במחשב. איך מגדירים סביבת עבודה בפרויקטים שלכם
ניתוח הפעילות ברשת
חלונית רשת
מידע על כל התכונות בחלונית 'רשת': בדיקת גוף התגובה והבקשה, שינוי של כותרות ועוד.
בדיקה של הפעילות ברשת
מדריך מעשי לביצוע משימות נפוצות בחלונית 'רשת'.
עוד כלים
כדאי לבדוק את כל התכונות והיכולות האחרות של כלי הפיתוח.
Elements
מידע נוסף על הצגה ושינוי של DOM של דף.
סגנונות
במאמר הזה מוסבר איך להציג ולשנות CSS בדף.
שינויים
לעקוב אחר שינויים ב-HTML, ב-CSS וב-JavaScript.
מסוף
לתעד הודעות ולהריץ JavaScript.
ביצועים
להעריך את ביצועי האתר.
זיכרון
איתור בעיות זיכרון שמשפיעות על ביצועי הדף, כולל דליפות זיכרון ועוד.
אפליקציה
בדיקה, שינוי וניפוי באגים באפליקציות אינטרנט, בדיקת מטמון, הצגת נפח האחסון ועוד.
אנימציות
בדיקה ושינוי של אנימציות.
מכשיר הקלטה
לתעד, להפעיל מחדש, למדוד את זרימות המשתמשים ולערוך את השלבים שלהם.
רינדור
יש לנו מגוון אפשרויות שמשפיעות על הרינדור של תוכן מהאינטרנט.
מילוי אוטומטי
בדיקה וניפוי באגים של כתובות שנשמרו.
בעיות
איתור ותיקון בעיות באתר.
פרטיות ואבטחה
יש לוודא שהדף מוגן באופן מלא באמצעות HTTPS.
מדיה
הצגת מידע וניפוי באגים בנגני מדיה בכל כרטיסייה בדפדפן.
חיישנים
אמולציה של חיישני המכשיר.
WebAuthn
אמולציה של גורמי אימות.