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

Kayce Basques

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

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

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

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

תודה לאדם ארגייל ול-VisBug על ההשראה.

הצגה חזותית של התנודות בפריסה

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

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

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

שינוי בפריסה.

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

בעיה מס' 961846 ב-Chromium

Lighthouse 5.1 בחלונית Audits

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

כדי לנסות, אפשר לעיין בקטע הדגמה של שליפה מראש (prefetch).

בעיה מס' 935267 ב-Chromium

מאפיינים פרטיים בעת צפייה באובייקטים

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

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

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

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

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

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

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

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

בעיה מס' 927726 ב-Chromium

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

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

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

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

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

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

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

Chrome 123

גרסה 122 של Chrome

גרסה 121 של Chrome

Chrome 120

גרסה 119 של Chrome

גרסה 118 של Chrome

גרסה 117 של Chrome

גרסה 116 של Chrome

Chrome 115

Chrome 114

גרסה 113 של Chrome

גרסה 112 של Chrome

גרסה 111 של Chrome

Chrome 110

Chrome 109

גרסה 108 של Chrome

גרסה 107 של Chrome

Chrome 106

Chrome 105

Chrome 104

גרסה 103 של Chrome

גרסה 102 של Chrome

גרסה 101 של Chrome

Chrome 100

גרסה 99 של Chrome

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

גרסה 92 של Chrome

גרסה 91 של Chrome

Chrome 90

גרסה 89 של Chrome

גרסה 88 של Chrome

גרסה 87 של Chrome

גרסה 86 של Chrome

גרסה Chrome 85

גרסה 84 של Chrome

גרסה 83 של Chrome

גרסה 82 של Chrome

Chrome 82 בוטל.

גרסה 81 של Chrome

גרסה 80 של Chrome

גרסה 79 של Chrome

גרסה 78 של Chrome

גרסה 77 של Chrome

גרסה 76 של Chrome

גרסה 75 של Chrome

גרסה 74 של Chrome

גרסה 73 של Chrome

גרסה 72 של Chrome

גרסה 71 של Chrome

גרסה 70 של Chrome

גרסה Chrome 68

Chrome גרסה 67

Chrome 66

גרסה Chrome 65

Chrome 64

Chrome 63

גרסה 62 של Chrome

גרסה 61 של Chrome

Chrome 60

Chrome 59