איתור באגים יכול להיות מייגע ואף יותר מתסכל כאשר אינך יכול לאתר בקלות את הבאג. כלים למפתחים של Chrome 106 (devtools) מוגדרים כדי לפשט את תהליך איתור הבאגים, מה שהופך אותו לקל ומהיר.

כעת אתה יכול למיין בקלות קבצים, לבצע אופטימיזציה של החיפוש שלך, להסתיר סקריפטים של צד שלישי, לגשת לדוחות ביצועים מעמיקים ועוד הרבה יותר שנדון במאמר זה. כלים אלה חיוניים, במיוחד עבור מפתחים העובדים עם מסגרות JavaScript כגון Angular, React ו-Vue.js, שיש להם כעת קונסולה אינטראקטיבית ומפושטת להמחשה וניפוי באגים הקוד שלהם.

הבה נסתכל מקרוב על כמה מהתכונות החדשות הללו:

כדי להפיק תועלת מלאה מהעדכונים החדשים ב-Chrome 106, הורד את ה-Chrome כַּנָרִית, Dev, אוֹ בטא גרסאות כדפדפן הפיתוח המוגדר כברירת מחדל. תהיה לך גישה לכלי המפתחים העדכניים ביותר המאפשרים בדיקה של ממשקי API של פלטפורמת אינטרנט, וזיהוי מהיר של בעיות או באגים באתר שלך כדי להבטיח למשתמשים שלך את חווית הלקוח הטובה ביותר.

1. קבצים מקובצים לפי מורשים/פרוסים

כעת תוכל לנווט ישירות לרכיבי היישום שלך על ידי קיבוץ קבצים בכתובת נכתב/פרוס על מָקוֹר לוּחַ. לך ל מקור > תפריט 3 נקודות > קבץ לפי רשומים/פרוסים

instagram viewer
. כעת, כאשר אתה פותח את הקבצים, אתה יכול לראות רק את הקבצים הפרוסים שלך בלוח.

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

2. חיפוש קבצים פשוט יותר

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

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

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

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

4. עקבות מחסנית מפורטים

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

גוגל הגדירה את א console.createTask() שיטה ב-Chrome 106. שיטה זו מאפשרת למסגרות לבצע עקבות מחסנית בקונסולה. איתור באגים ב-JavaScript באמצעות devtools הוא קל לא פחות איתור באגים ב-CSS באמצעות כרום.

5. עקוב אחר אינטראקציות בחלונית הביצועים

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

6. תובנות תזמון LCP בלוח הביצועים

ה צבע התוכן הגדול ביותר פרטי תזמון (LCP) זמינים כעת ב- לוח תובנות ביצועים. LCP הוא מדד ביצועי אינטרנט חיוני המדווח על זמן העיבוד של תמונות או בלוקים של טקסט לטעינה בדף האינטרנט. 2.5 שניות ומטה הוא ציון ביצועים טוב.

כדי לראות את התובנות נווט אל לוח ביצועים>3-dot-menu-more tolls>תובנות ביצועים. כאשר אתה מנגן הקלטה חוזרת, ה פרטים הלוח יציג את תזמוני הטעינה.

עדכונים נוספים ב-Chrome 106

שיפורים נוספים ל-Chrome 106 כוללים:

  • אתה יכול לייצא את הקלטות הסקריפט שלך ללא בעיות מה- מַקלִיט לוּחַ. בלחצן הייצוא הייתה בעיה בגרסאות קודמות.
  • כעת יש לך בוחר צבעים ב- סגנונות רכיבי SVG בחלונית.
  • אתה יכול לזהות סקריפטים המעוותים את הפריסה שלך ב- תובנות ביצועים לוּחַ.
  • אתה יכול להציג נתיבים עבור גופני אינטרנט של LCP ב- תובנות ביצועים לוּחַ.

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

מה אתה מקבל מ-Chrome 106

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

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