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

Kayce Basques

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

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

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

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

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

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

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

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

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

שינוי פריסה.

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

בעיה ב-Chromium מס' 961846

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium מס' 935267

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

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

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

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

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

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

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

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

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

בעיה מס' 927726 ב-Chromium

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

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

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

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

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

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

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 בוטל.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59