מה חדש בכלי הפיתוח (Chrome 64)

Kayce Basques
Kayce Basques
X GitHub

טוב לראות אותך שוב! התכונות החדשות שיתווספו לכלי הפיתוח ב-Chrome 64 כוללות:

בהמשך מופיעה גרסת הווידאו של הערות הגרסה האלה.

מעקב אחר ביצועים

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

  • שימוש במעבד.
  • גודל הערימה (heap) של JavaScript.
  • המספר הכולל של צמתי DOM,‏ JavaScript event listeners, מסמכים ומסגרות בדף.
  • חישובים מחדש של פריסות וסגנונות בשנייה.

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

למה ביצועי הטעינה חשובים: חברת BookMyShow נהנתה מעלייה של 80% בהמרות כשבנתה אפליקציית אינטרנט מתקדמת (PWA) שהתמקדה במהירות. מידע נוסף

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

  1. פותחים את תפריט הפקודות.

  2. מתחילים להקליד Performance ואז בוחרים באפשרות Show Performance Monitor.

    הכלי 'מעקב אחר ביצועים' איור 1. הכלי 'מעקב אחר ביצועים'

  3. לוחצים על מדד כדי להציג או להסתיר אותו. באיור 1 מוצגים התרשימים CPU Usage,‏ JS heap size ו-JS event listeners.

תכונות קשורות:

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

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

סרגל הצד של המסוף

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

שימוש בסרגל הצד של המסוף כדי להציג רק הודעות שגיאה

איור 2. שימוש בסרגל הצד של המסוף כדי להציג רק הודעות שגיאה

כברירת מחדל, סרגל הצד של המסוף מוסתר. כדי להציג אותו, לוחצים על הצגת סרגל הצד של המסוף הצגת סרגל הצד של המסוף

תכונות קשורות:

קיבוץ הודעות דומות במסוף

כברירת מחדל, המסוף מקבץ עכשיו הודעות דומות. לדוגמה, באיור 3 יש 27 מקרים של ההודעה [Violation] Avoid using document.write().

דוגמה לקיבוץ הודעות דומות בקונסולה

איור 3. דוגמה לקיבוץ הודעות דומות בקונסולה

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

דוגמה לקבוצה מורחבת של הודעות בקונסולה

איור 4. דוגמה לקבוצה מורחבת של הודעות בקונסולה

כדי להשבית את התכונה הזו, מבטלים את סימון התיבה קיבוץ פנים דומות.

תכונות קשורות:

  • אפשר לקבץ את ההודעות שלכם במסוף באמצעות console.group().

ביטולים מקומיים

אופס! התכנון המקורי היה להשיק את התכונה הזו ב-Chrome 64, אבל ביטלנו את ההשקה סמוך למועד האחרון כדי לשפר כמה נקודות. כנראה שממשק המשתמש של'מה חדש' לא עודכן בזמן. סליחה.

התכונה הזו תושק ב-Chrome 65, כ-6 שבועות אחרי השקת Chrome 64. מידע נוסף זמין במאמר בנושא שינויים מקומיים. אם אתם משתמשים ב-Windows או ב-Mac, אתם יכולים לנסות את Chrome 65 עכשיו על ידי הורדה של Chrome Canary.

הורדת ערוצי התצוגה המקדימה

מומלץ להשתמש ב-Chrome Canary,‏ Dev או Beta כדפדפן ברירת המחדל לפיתוח. ערוצי התצוגה המקדימה האלה מאפשרים לכם לגשת לתכונות העדכניות ביותר של DevTools, לבדוק ממשקי API מתקדמים של פלטפורמות אינטרנט ולמצוא בעיות באתר לפני שהמשתמשים שלכם ייתקלו בהן.

יצירת קשר עם הצוות של כלי הפיתוח ל-Chrome

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

מה חדש בכלי הפיתוח

רשימה של כל הנושאים שמופיעים בסדרת המאמרים מה חדש בכלי הפיתוח.