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

Kayce Basques

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

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

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

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

אחרי תיעוד של טעינת דף, כלי הפיתוח מסמנים עכשיו מדדי ביצועים כמו 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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