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

Kayce Basques

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

גרסה של נתוני הגרסה הזו בסרטון

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

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

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

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

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

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

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

איור 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.

העתקת נתיב JS

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

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

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

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

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

ספריות JavaScript שזוהו

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

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

הקלדה של 'lighthouse' בתפריט הפקודות

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

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

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

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

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

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

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