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

Kayce Basques

התכונות החדשות והשינויים העיקריים בכלי הפיתוח ב-Chrome 67 כוללים:

• חיפוש בכל הכותרות של הרשת
• תצוגה מקדימה של ערכי משתנים ב-CSS בחלונית Styles
• העתקה כ-fetch
• בדיקות חדשות, אפשרויות הגדרה למחשב וצפייה בעקבות
• עצירת לולאות אינסופיות
• תזמוני משתמש בכרטיסיות ביצועים
• מכונות וירטואליות של JavaScript שמופיעות בבירור בחלונית זיכרון
• השם של הכרטיסייה רשת בחלונית מקורות השתנה לדף
• עדכונים בעיצוב הכהה
• מידע על שקיפות אישורים בחלונית אבטחה
• תכונות של בידוד אתרים בחלונית ביצועים

גרסת וידאו של נתוני הגרסה:

חיפוש בכל הכותרות והתגובות של הרשת

פותחים את החלונית רשת ולוחצים על Command+F (ב-Mac) או על Control+F (ב-Windows, ב-Linux וב-ChromeOS) כדי לפתוח את החלונית החדשה חיפוש ברשת. כלי הפיתוח מחפשים את השאילתה שסיפקתם בכותרות ובגוף של כל הבקשות לאחזור מהרשת.

איור 1. חיפוש הטקסט cache-control באמצעות חלונית החיפוש החדשה ברשת

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

איור 2. שאילתת ביטוי רגולרי בחלונית החיפוש של הרשת.

עדכונים בממשק המשתמש של חלונית החיפוש

ממשק המשתמש של החלונית Global Search תואם עכשיו לממשק המשתמש של החלונית החדשה Network Search. עכשיו הוא גם מדפיס את התוצאות בצורה יפה כדי שיהיה קל יותר לסרוק אותן.

איור 3. ממשק המשתמש הישן בצד ימין, וממשק המשתמש החדש בצד שמאל

מקישים על Command+Option+F (ב-Mac) או על Control+Shift+F (ב-Windows, ב-Linux וב-ChromeOS) כדי לפתוח את Global Search. אפשר לפתוח אותו גם דרך תפריט הפקודות.

תצוגות מקדימות של ערכי משתני CSS בחלונית סגנונות

כשהערך של מאפיין צבע ב-CSS, כמו background-color או color, מוגדר למשתנה CSS, כלי הפיתוח מציגים עכשיו תצוגה מקדימה של הצבע הזה.

איור 4. בממשק המשתמש הישן בצד ימין, אין תצוגה מקדימה של הצבע ליד color: var(--main-color), ואילו בממשק המשתמש החדש בצד שמאל, יש תצוגה מקדימה של הצבע.

העתקה כ-fetch

לוחצים לחיצה ימנית על בקשה לאחזור מהרשת ובוחרים באפשרות Copy (העתקה) > Copy As Fetch (העתקה כ-Fetch) כדי להעתיק ללוח את הקוד המקביל של fetch() לבקשה הזו.

איור 5. העתקת הקוד המקביל ל-fetch() של בקשה

כלי הפיתוח יוצרים קוד כמו זה:

fetch("https://preload.glitch.me/styles.css", {
  "credentials": "omit",
  "headers": {},
  "referrer": "https://preload.glitch.me/after/",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": null,
  "method": "GET",
  "mode": "cors"
});

עדכונים בחלונית Audits

ביקורות חדשות

בחלונית Audits יש 2 בדיקות חדשות, כולל:

• טעינה מראש של בקשות חשובות. בקשות לטעינה מראש יכולות לקצר את זמן הטעינה של הדף על ידי מתן רמזים לדפדפן להוריד משאבים שחשובים לנתיב העיבוד הקריטי (CRP) בהקדם האפשרי.
• מומלץ להימנע מטקסט בלתי נראה בזמן הטעינה של פונטים מסוג webfont. כדי שהדף יהיה שימושי יותר למשתמשים מהר יותר, חשוב לוודא שהטקסט גלוי בזמן שהפונטים מסוג webfont נטענים.

אפשרויות הגדרה חדשות

עכשיו אפשר להגדיר את החלונית ביקורות כך:

• שמירה על הגדרות אזור התצוגה וסוכן המשתמש של המחשב. במילים אחרות, אתם יכולים למנוע מהחלונית Audits לדמות מכשיר נייד.
• משביתים את ויסות הנתונים ברשת ובמעבד (CPU).
• שמירת האחסון, כמו LocalStorage ו-IndexedDB, בין בדיקות.

איור 6. אפשרויות חדשות להגדרת ביקורת

הצגת המעקבים

אחרי בדיקת הדף, לוחצים על View Trace כדי לראות בחלונית Performance את נתוני הביצועים של הטעינה שעליהם מבוססת הבדיקה.

איור 7. הכפתור הצגת המעקב

עצירת לולאות אינסופיות

אם אתם עובדים הרבה עם לולאות for, לולאות do...while או רקורסיה, כנראה שהפעלתם לולאה אינסופית בטעות בזמן שפיתחתם את האתר. כדי לעצור את הלולאה האינסופית, אתם יכולים:

1. פותחים את החלונית מקורות.
2. לוחצים על השהיה . הכפתור משתנה ל-Resume Script Execution .
3. לוחצים לחיצה ארוכה על Resume Script Execution (המשך הרצת הסקריפט) ובוחרים באפשרות Stop Current JavaScript Call (עצירת הקריאה הנוכחית ל-JavaScript) .

בסרטון שלמעלה, השעון מתעדכן באמצעות טיימר של setInterval(). לחיצה על Start Infinite Loop מריצה לולאת do...while שלא נעצרת אף פעם. המרווח ממשיך כי הוא לא פעל כשנבחרה האפשרות עצירת הקריאה הנוכחית ל-JavaScript .

תזמוני משתמש בכרטיסיות הביצועים

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

איור 8. צפייה במדדי תזמוני המשתמש בכרטיסייה מלמטה למעלה. הפס הכחול שמימין לקטע תזמוני משתמש מציין שהוא נבחר.

באופן כללי, עכשיו אפשר לבחור כל אחד מהקטעים (Main Thread,‏ תזמוני משתמש,‏ GPU,‏ ScriptStreamer וכו') ולראות את הפעילות של הקטע הזה בכרטיסיות.

בחירת מכונות וירטואליות של JavaScript בחלונית Memory

בחלונית Memory (זיכרון) מוצגות עכשיו באופן ברור כל המכונות הווירטואליות של JavaScript שמשויכות לדף, במקום להסתיר אותן מאחורי התפריט הנפתח Target (יעד) כמו קודם.

איור 9. בממשק המשתמש הישן שמוצג מימין, המכונות הווירטואליות של JavaScript מוסתרות מאחורי התפריט הנפתח Target, ואילו בממשק המשתמש החדש שמוצג משמאל הן מוצגות בטבלה Select JavaScript VM Instance.

ליד המופע של developers.google.com יש 2 ערכים: 8.7 MB ו-13.3 MB. הערך השמאלי מייצג את הזיכרון שהוקצה בגלל JavaScript. הערך הימני מייצג את כל הזיכרון של מערכת ההפעלה שמוקצה בגלל מכונת ה-VM הזו. הערך בצד ימין כולל את הערך בצד שמאל. במנהל המשימות של Chrome, הערך השמאלי תואם ל-JavaScript Memory והערך הימני תואם ל-Memory Footprint.

הכרטיסייה "רשת" נקראת עכשיו "דף"

בחלונית מקורות, הכרטיסייה רשת נקראת עכשיו דף.

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

עדכונים בעיצוב הכהה

בגרסה 67 של Chrome יש כמה שינויים קלים בערכת הצבעים של העיצוב הכהה. לדוגמה, הסמלים של נקודות העצירה ושורת ההרצה הנוכחית מוצגים עכשיו בירוק.

איור 11. צילום מסך של הסמל החדש של נקודת העצירה וערכת הצבעים של שורת ההרצה הנוכחית

שקיפות אישורים בחלונית Security (אבטחה)

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

איור 12. מידע על שקיפות אישורים בחלונית האבטחה

בידוד של אתר בחלונית הביצועים

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

איור 13. תרשימי להבות לכל תהליך בהקלטת ביצועים

הורדת הערוצים בגרסת טרום-השקה (Preview)

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

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

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

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

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

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