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

Kayce Basques

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

העתקה כאחזור

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

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

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

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

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

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

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

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

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

הצגת עקבות

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

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

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

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

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

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

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

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

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

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

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

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

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

בחלונית Memory מופיעות עכשיו בבירור כל מכונות ה-VM של 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. בממשק המשתמש הישן בצד שמאל, הכרטיסייה שבה מוצגים המשאבים שבדף נקראת רשת, ואילו בממשק המשתמש החדש בצד שמאל היא נקראת דף.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 בוטל.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59