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

Kayce Basques

התכונות החדשות והשינויים המשמעותיים שייכנסו ל-DevTools בגרסה 67 של Chrome כוללים:

גרסה של נתוני הגרסה בסרטון:

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

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

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

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

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

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

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

ממשק המשתמש הישן והחדש.

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

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

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

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

דוגמה לערכי צבעים של משתנה CSS.

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

העתקה כאחזור

לוחצים לחיצה ימנית על בקשת רשת ובוחרים באפשרות העתקה > העתקה כ-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"
});

עדכונים בחלונית הביקורת

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

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

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

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

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

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

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

הצגת נתוני מעקב

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

הלחצן 'הצגת נתוני מעקב'.

איור 7. הלחצן הצגת נתוני המעקב

איך מפסיקים לולאות אינסופיות

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

  1. פותחים את החלונית מקורות.
  2. לוחצים על השהיה השהיה. הלחצן ישתנה ל-המשך ביצוע הסקריפט המשך.
  3. לוחצים לחיצה ארוכה על המשך הפעלת הסקריפט המשך ואז בוחרים באפשרות הפסקת קריאת JavaScript הנוכחית עצירה.

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

'תזמון משתמש' בכרטיסיות 'ביצועים'

כשמציגים הקלטה של ביצועים, לוחצים על הקטע User Timing כדי להציג את המדדים של User Timing בכרטיסיות Summary (סיכום), Bottom-Up (מלמטה למעלה), Call Tree (עץ קריאות) ו-Event Log (יומן אירועים).

הצגת מדדי 'תזמון משתמש' בכרטיסייה 'מלמטה למעלה'.

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

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

בחירת מכונות VM ל-JavaScript בחלונית Memory

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

צילומי מסך של חלונית הזיכרון לפני ואחרי.

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

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

השם של הכרטיסייה 'רשת' השתנה לכרטיסייה 'דף'

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

שני חלונות של DevTools זה לצד זה, שמוצג בהם שינוי השם.

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

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

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

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

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

שקיפות אישורים בחלונית 'אבטחה'

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

פרטי שקיפות האישור בחלונית 'אבטחה'.

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

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

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

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

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

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

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

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

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

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

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