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

Kayce Basques

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

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

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

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

הצגת התוכן המשמעותי הראשון בקטע 'תזמון'

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

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

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

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

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

העתקת נתיב JS

נניח שאתם כותבים בדיקת אוטומציה שכוללת לחיצה על צומת (אולי באמצעות הפונקציה page.click() של Puppeteer) ואתם רוצים לקבל במהירות הפניה לצומת ה-DOM הזה. תהליך העבודה הרגיל הוא לעבור לחלונית הרכיבים, ללחוץ לחיצה ימנית על הצומת בעץ ה-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.