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

Kayce Basques

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

• חיפוש בכל הכותרות של הרשת
• תצוגה מקדימה של ערכי משתני CSS בחלונית Styles
• העתקה כאחזור
• ביקורות חדשות, אפשרויות הגדרה למחשב ואפשרות לצפייה בנתוני מעקב
• איך מפסיקים לולאות אינסופיות
• תזמוני משתמש בכרטיסיות ביצועים
• מופעי VM של JavaScript מופיעים בבירור בחלונית Memory
• הכרטיסייה Network בחלונית Sources קיבלה את השם החדש Page
• עדכונים בעיצוב הכהה
• מידע על שקיפות אישורים בחלונית אבטחה
• תכונות של בידוד אתרים בחלונית Performance

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

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

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

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

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

איור 2. שאילתת ביטוי רגולרי בחלונית Network Search (חיפוש ברשת).

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

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

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

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

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

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

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

העתקה כאחזור

לוחצים לחיצה ימנית על בקשת רשת ואז בוחרים באפשרות העתקה > העתקה כ-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 ביקורות חדשות, כולל:

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

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

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

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

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

צפייה בפרטי ההעברה

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

איור 7. הלחצן צפייה בעקבות

הפסקת לולאות אינסופיות

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

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

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

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

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

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

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

בחירת מופעי VM של JavaScript בחלונית Memory

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

איור 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• אתם מוזמנים לשלוח לנו משוב ובקשות להוספת תכונות בכתובת crbug.com.
• אפשר לדווח על בעיה בכלי פיתוח באמצעות הסמל more_vert אפשרויות נוספות > עזרה > דיווח על בעיה בכלי פיתוח בכלי הפיתוח.
• שולחים ציוץ אל ‎@ChromeDevTools.
• אפשר להוסיף תגובות לסרטונים What's new in DevTools YouTube videos או DevTools Tips YouTube videos.

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

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