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

Kayce Basques

התכונות החדשות והשינויים המשמעותיים בכלי הפיתוח ל-Chrome בגרסה 72 של Chrome כוללים:

• הצגה חזותית של מדדי הביצועים בחלונית 'ביצועים'.
• הדגשת צמתי טקסט בעץ ה-DOM.
• מעתיקים את נתיב ה-JS לצומת DOM מעץ ה-DOM.
• עדכונים בחלונית Audits, כולל ביקורת חדשה שמזהה ספריות JS ומילות מפתח חדשות לגישה לחלונית Audits מתפריט הפקודות.

גרסת וידאו של נתוני הגרסה האלה

הצגה חזותית של מדדי ביצועים

אחרי הקלטת טעינת דף, כלי הפיתוח מסמנים עכשיו מדדי ביצועים כמו DOMContentLoaded והצגת התוכן העיקרי (FMP) בקטע Timings.

איור 1. המדד 'הצגת התוכן העיקרי (FMP)' בקטע 'תזמון'

הדגשת צמתי טקסט

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

איור 2. הדגשה של צומת טקסט

העתקת נתיב JS

נניח שאתם כותבים בדיקת אוטומציה שכוללת קליק על צומת (באמצעות הפונקציה page.click() של Puppeteer, למשל) ואתם רוצים לקבל במהירות הפניה לצומת DOM הזה. תהליך העבודה הרגיל הוא לעבור לחלונית Elements (רכיבים), ללחוץ לחיצה ימנית על הצומת בעץ ה-DOM, לבחור באפשרות Copy (העתקה) > Copy selector (העתקת הסלקטור), ואז להעביר את הסלקטור ב-CSS אל document.querySelector(). אבל אם הצומת נמצא ב-Shadow DOM, הגישה הזו לא תעבוד כי הבורר מחזיר נתיב מתוך עץ הצללים.

כדי לקבל במהירות הפניה לצומת DOM, לוחצים לחיצה ימנית על צומת ה-DOM ובוחרים באפשרות העתקה > העתקת נתיב JS. כלי DevTools מעתיק ללוח הביטוי document.querySelector() שמצביע על הצומת. כמו שצוין למעלה, הפונקציה הזו שימושית במיוחד כשעובדים עם Shadow DOM, אבל אפשר להשתמש בה לכל צומת DOM.

איור 3. העתקת נתיב JS

כלי הפיתוח מעתיקים ללוח ביטוי כמו זה שמופיע למטה:

document.querySelector('#demo1').shadowRoot.querySelector('p:nth-child(2)')

עדכונים בחלונית הביקורות

החלונית Audits (ביקורות) מריצה עכשיו את Lighthouse 3.2. גרסה 3.2 כוללת בדיקה חדשה שנקראת ספריות JavaScript שזוהו. בביקורת הזו מפורטות ספריות ה-JS שזוהו בדף על ידי Lighthouse. אפשר למצוא את הביקורת הזו בדוח בקטע שיטות מומלצות > ביקורות שעברו.

איור 4. ספריות JavaScript שזוהו

בנוסף, עכשיו אפשר לגשת לחלונית 'ביקורות' מתפריט הפקודות על ידי הקלדה של Lighthouse או PWA.

איור 5. הקלדת lighthouse בתפריט הפקודות

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

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

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

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

• אתם מוזמנים לשלוח לנו משוב ובקשות להוספת תכונות בכתובת crbug.com.
• כדי לדווח על בעיה בכלי הפיתוח, לוחצים על more_vert אפשרויות נוספות > עזרה > דיווח על בעיה בכלי הפיתוח בכלי הפיתוח.
• שולחים ציוץ אל @ChromeDevTools.
• אפשר להוסיף תגובות לסרטונים מה חדש בכלי הפיתוח של YouTube או טיפים לשימוש בכלי הפיתוח של YouTube.

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

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