דף זה תורגם על ידי Cloud Translation API.

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

Kayce Basques

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

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

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

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

אחרי שמתעדים טעינת דף, כלי הפיתוח מסמנים מדדי ביצועים כמו DOMContentLoaded ו-First-iveful Paint (LCP) בקטע Timings.

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

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

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

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

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

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

העתקת נתיב JS

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

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

העתקת נתיב JS

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

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

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

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

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

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

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

כמו כן, עכשיו אפשר לגשת לחלונית Audits (ביקורות) מתפריט הפקודות על ידי הקלדת Lighthouse או PWA.

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

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

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

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

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

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

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