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

Kayce Basques

העתקת הסגנונות של הרכיב

לוחצים לחיצה ימנית על צומת בעץ ה-DOM כדי להעתיק את ה-CSS של צומת ה-DOM הזה ללוח.

Figure 1. העתקת סגנונות של רכיבים.

תודה ל-Adam Argyle ול-VisBug על ההשראה.

הדמיה של שינויים בפריסה

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

כלי הפיתוח יכולים לעזור לכם לזהות שינויים בפריסה:

1. פותחים את תפריט הפקודות.
2. מתחילים להקליד Rendering.
3. מריצים את הפקודה הצגת הרינדור.
4. מסמנים את תיבת הסימון אזורים שהוזזו בפריסה. במהלך האינטראקציה עם הדף, שינויי הפריסה מודגשים בכחול.

איור 2. שינוי פריסה.

בעיה מספר 961846 ב-Chromium

‫Lighthouse 5.1 בחלונית Audits (ביקורות)

בחלונית Audits (ביקורות) פועלת עכשיו Lighthouse 5.1. הביקורות החדשות כוללות:

• האתר מכיל apple-touch-icon תקין. בודק שאפשר להוסיף PWA למסך הבית ב-iOS.
• צריך לצמצם ככל האפשר את מספר הבקשות ואת גודל הקבצים. הדוח מציג את המספר הכולל של בקשות הרשת ואת גדלי הקבצים בקטגוריות שונות, כמו מסמכים, סקריפטים, גיליונות סגנונות, תמונות וכו'.
• השהיה פוטנציאלית מקסימלית לאחר קלט ראשוני. המדד הזה מודד את הזמן המקסימלי הפוטנציאלי שעובר מהאינטראקציה הראשונה של המשתמש עם הדף ועד לתגובה של הדפדפן לאינטראקציה הזו. שימו לב שהמדד הזה מחליף את המדד 'חביון משוער של קלט'. המדד 'השהיה פוטנציאלית מרבית לאחר קלט ראשוני' לא נכלל בציון של קטגוריית הביצועים.

איור 3. ממשק המשתמש החדש של חלונית הביקורות.

בגרסאות Node ו-CLI של Lighthouse 5.1 יש 3 תכונות חדשות וחשובות שכדאי לבדוק:

• תקציבי ביצועים. כדי למנוע ירידה בביצועי האתר לאורך זמן, אפשר לציין את מספר הבקשות ואת גודלי הקבצים שדפים לא צריכים לחרוג מהם.
• פלאגינים. אפשר להרחיב את Lighthouse באמצעות ביקורות מותאמות אישית משלכם.
• חבילות Stack. הוספת ביקורות שמותאמות לחבילות טכנולוגיות ספציפיות. חבילת WordPress Stack Pack הייתה הראשונה שהושקה. חבילות React ו-AMP נמצאות בפיתוח.

סנכרון של ערכת הצבעים של מערכת ההפעלה

אם אתם משתמשים בעיצוב הכהה של מערכת ההפעלה, כלי הפיתוח עוברים עכשיו אוטומטית לעיצוב כהה משלהם.

מקש קיצור לפתיחת הכלי לעריכת נקודות עצירה

כשהמיקוד נמצא בכלי העריכה של החלונית Sources (מקורות), מקישים על Control+Alt+B או על Command+Option+B (ב-Mac) כדי לפתוח את Breakpoint Editor (כלי העריכה של נקודות עצירה). משתמשים בכלי לעריכת נקודות עצירה כדי ליצור נקודות עצירה לרישום ביומן ונקודות עצירה מותנות.

איור 4. עורך נקודות העצירה.

מטמון של שליפה מראש בחלונית 'רשת'

בעמודה Size בחלונית Network מופיע עכשיו הערך (prefetch cache) כשמשאב נטען ממטמון השליפה מראש. Prefetch היא תכונה חדשה יחסית בפלטפורמת האינטרנט שמיועדת להאצת טעינות עתידיות של דפים. בדוחות של Can I use... מצוין שהתמיכה בו קיימת ב-83.33% מהדפדפנים בעולם נכון ליולי 2019.

איור 5. בעמודה גודל אפשר לראות שהפריטים prefetch2.html ו-prefetch2.css הגיעו מ-(prefetch cache).

כדי לנסות את התכונה, אפשר לעיין בהדגמה של אחזור מראש.

בעיה מספר 935267 ב-Chromium

מאפיינים פרטיים כשמציגים אובייקטים

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

איור 6. בגרסה הישנה של Chrome בצד ימין לא מופיע השדה #color כשבודקים את האובייקט, אבל בגרסה החדשה בצד שמאל הוא מופיע.

התראות והודעות פוש בחלונית Application (אפליקציה)

בקטע Background Services (שירותים ברקע) בחלונית Application (אפליקציה) יש עכשיו תמיכה בהודעות Push ובהתראות. הודעות Push מתרחשות כששרת שולח מידע ל-service worker. ההתראות מופיעות כשסקריפט של דף או של Service Worker מציג מידע למשתמש.

בדומה לתכונות Background Fetch ו-Background Sync מגרסה 76 של Chrome, אחרי שתתחילו להקליט, הודעות פוש והתראות בדף הזה יוקלטו למשך 3 ימים, גם כשהדף סגור וגם כש-Chrome סגור.

איור 7. החלוניות החדשות Push Messages (הודעות פוש) ו-Notifications (התראות) בחלונית Application (אפליקציה).

בעיה מספר 927726 ב-Chromium

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

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

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

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

• אתם מוזמנים לשלוח לנו משוב ובקשות להוספת תכונות בכתובת crbug.com.
• אפשר לדווח על בעיה בכלי פיתוח באמצעות הסמל more_vert אפשרויות נוספות > עזרה > דיווח על בעיה בכלי פיתוח בכלי הפיתוח.
• שולחים ציוץ אל ‎@ChromeDevTools.
• להשאיר תגובות בסרטונים What's new in DevTools YouTube videos או DevTools Tips YouTube videos.

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

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