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

Kayce Basques
Kayce Basques
X GitHub

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

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

העתקת הסגנונות.

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

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

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

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

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

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

שינוי פריסה.

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

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

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

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

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

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

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

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

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

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

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

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

הכלי לעריכת נקודות עצירה (breakpoint).

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

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

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

העמודה 'גודל' מראה שהמשאבים הגיעו ממטמון השליפה מראש.

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

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

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

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

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

כשבודקים אובייקט, במסוף מוצגים עכשיו שדות פרטיים כמו '#color'.

איור 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

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

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

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