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

Kayce Basques

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

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

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

איור 1. העתקת סגנונות רכיב.

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

המחשה חזותית של שינויי פריסה

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

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

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

שינוי פריסה.

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

בעיה ב-Chromium מס' 961846

Lighthouse 5.1 בחלונית הביקורות

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

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

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

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

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

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

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

מקש קיצור לפתיחת עורך נקודת העצירה (breakpoint)

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

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

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

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

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

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

איור 5. בעמודה גודל מצוין שהמקור prefetch2.html ו-prefetch2.css הוא (prefetch cache)

אפשר להיעזר במאמר שליפה מראש של ההדגמה (דמו) כדי לנסות אותה.

בעיה ב-Chromium מס' 935267

מאפיינים פרטיים בזמן צפייה באובייקטים

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

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

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

התראות והודעות בדחיפה בחלונית האפליקציה

הקטע 'שירותי רקע' בחלונית האפליקציה תומך עכשיו בהודעות דחיפה התראות. הודעות דחיפת הודעות מתרחשות כאשר שרת שולח מידע ל-Service Worker. התראות מתרחשות כאשר Service Worker או סקריפט דף מציגים מידע למשתמש.

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

החלוניות החדשות של התראות ו-Push Messages

איור 7. החלוניות החדשות 'הודעות דחיפה' ו'התראות' בחלונית האפליקציה.

בעיה מס' 927726 ב-Chromium

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

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

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

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

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

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

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