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

Kayce Basques
Kayce Basques
X GitHub

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

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

הדמיה של מדדי ביצועים

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

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

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

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

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

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

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

העתקת נתיב JS

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

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

העתקת נתיב JS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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