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

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

Kayce Basques

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

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

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

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

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

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

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

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

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

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

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

העתקת נתיב JS

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

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

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

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

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