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

Kayce Basques

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

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

מעתיקים את הסגנונות.

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

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

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

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

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

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

שינוי פריסה.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

בעיה מס' 935267 ב-Chromium

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

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

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

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

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

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

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

החלוניות החדשות של ההתראות וההודעות ב-Push.

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

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

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

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

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

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

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

רשימה של כל מה שנדון בסדרה מה חדש ב-DevTools.