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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

הצגת עקבות

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

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

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

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

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

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

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

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

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

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

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

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

בחירת מכונות VM של JavaScript בחלונית הזיכרון

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

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

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

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

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

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

שני חלונות של כלי פיתוח זה לצד זה להדגמה של שינוי השם.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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