מה חדש בכלי הפיתוח (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

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

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.
• להשאיר תגובות בסרטונים What's new in DevTools YouTube videos או DevTools Tips YouTube videos.

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

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