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

Kayce Basques

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

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

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

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

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

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

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

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 נמצאות בפיתוח.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

בקטע Background Services (שירותים ברקע) בחלונית Application (אפליקציה) יש עכשיו תמיכה בהודעות פוש ובהתראות. הודעות 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.

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

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