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

Kayce Basques

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

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

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

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

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

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

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

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

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

העתקת נתיב JS

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

כדי לקבל במהירות הפניה לצומת DOM, לוחצים לחיצה ימנית על צומת ה-DOM ובוחרים באפשרות Copy > העתקת JS . כלי הפיתוח מעתיק ללוח העריכה ביטוי 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 או בטא כדפדפן הפיתוח שמוגדר כברירת מחדל. הערוצים לתצוגה מקדימה אלה מעניקים לך גישה לתכונות החדשות של כלי הפיתוח, בודקים ממשקי API מתקדמים של פלטפורמות אינטרנט ומוצאים בעיות באתר שלך לפני שהמשתמשים עושים זאת.

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

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

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

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

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