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

Kayce Basques

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

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

Performance Monitor

בעזרת Performance Monitor תוכלו לראות בזמן אמת היבטים שונים של טעינת הדף או הביצועים שלו בסביבת זמן הריצה, כולל:

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

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

למה ביצועי הטעינה חשובים: חברת BookMyShow רשמה עלייה של 80% בהמרות אחרי שיצרה אפליקציית Progressive Web App שהתמקדה במהירות. מידע נוסף

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

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

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

    צג הביצועים איור 1. צג הביצועים

  3. לוחצים על מדד כדי להציג או להסתיר אותו. באיור 1 מוצגים התרשימים שימוש במעבד, גודל הערימה של JS ופונקציות event listener של JS.

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

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

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

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

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

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

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

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

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

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

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

עכשיו, הודעות דומות מקובצות יחד במסוף כברירת מחדל. לדוגמה, באיור 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

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

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

רשימה של כל מה שנדון בסדרה מה חדש ב-DevTools.