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

Kayce Basques

שלום! ריכזנו כאן את החידושים ב-Chrome DevTools בגרסה 76 של Chrome.

השלמה אוטומטית עם ערכים של CSS

כשמוסיפים הצהרות סגנון לצומת DOM, לפעמים קל יותר לזכור את ערך ההצהרה מאשר את שם ההצהרה. לדוגמה, כשמשנים את העמודה של הצומת <p> לעמודה מודגשת, קל יותר לזכור את הערך bold מאשר את השם font-weight. ממשק המשתמש של המילוי האוטומטי בחלונית הסגנונות תומך עכשיו בערכי CSS. אם אתם זוכרים את ערך מילת המפתח הרצוי אבל לא זוכרים את שם המאפיין, נסו להקליד את הערך והשלמה אוטומטית אמורה לעזור לכם למצוא את השם שאתם מחפשים.

איור 1. אחרי שמקלידים bold, font-weight: bold מופיע בתיבה 'סגנונות'.

אפשר לשלוח משוב על התכונה החדשה הזו בבעיה מספר 931145 ב-Chromium.

ממשק משתמש חדש להגדרות הרשת

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

איור 2. הגדרות רשת.

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

איור 3. מיפוי המיקומים הישנים למיקומים החדשים.

אפשר לשלוח משוב על השינוי בממשק המשתמש הזה בבעיה מס' 892969 ב-Chromium.

הודעות WebSocket בייצוא של קובצי HAR

כשמייצאים קובץ HAR מהחלונית Network כדי לשתף יומני רשת עם עמיתים, קובץ ה-HAR כולל עכשיו הודעות WebSocket. המאפיין _webSocketMessages מתחיל בקו תחתון כדי לציין שהוא שדה מותאם אישית.

...
"_webSocketMessages": [
  {
    "type": "send",
    "time": 1558730482.5071473,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  },
  {
    "type": "receive",
    "time": 1558730482.5883863,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  }
]
...

אפשר לשלוח משוב על התכונה החדשה הזו בבעיה מספר 496006 ב-Chromium.

לחצני ייבוא וייצוא של HAR

עכשיו קל יותר לשתף יומני רשת עם עמיתים באמצעות הלחצנים החדשים ייצוא הכול כ-HAR עם תוכן וייבוא קובץ HAR . האפשרות לייבא ולייצא קבצי HAR הייתה קיימת בכלי הפיתוח כבר זמן מה. הלחצנים שקל יותר למצוא הם השינוי החדש.

איור 4. לחצני HAR החדשים.

אפשר לשלוח משוב על השינוי הזה בממשק המשתמש בבעיה מס' 904585 ב-Chromium.

שימוש כולל בזיכרון בזמן אמת

בחלונית Memory מוצג עכשיו השימוש הכולל בזיכרון בזמן אמת.

איור 5. בחלק התחתון של חלונית הזיכרון מוצג שהדף משתמש ב-43.4MB של זיכרון בסך הכול. הערך 209KB/s מציין שהשימוש הכולל בזיכרון גדל ב-209KB לשנייה.

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

אפשר לשלוח משוב על התכונה החדשה הזו בבעיה מספר 958177 ב-Chromium.

מספרי יציאות לרישום של קובצי שירות (service worker)

הכרטיסייה Service Workers כוללת עכשיו את מספרי היציאות בשמות שלה, כדי שיהיה קל יותר לעקוב אחרי ה-service worker שעבורו מבצעים ניפוי באגים.

איור 6. יציאות של קובצי שירות (service worker).

אפשר לשלוח משוב על השינוי בממשק המשתמש הזה בבעיה מס' 601286 ב-Chromium.

בדיקת אירועי אחזור ברקע וסנכרון ברקע

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

עוברים לחלונית Application, פותחים את הכרטיסייה Background Fetch או Background Sync ולוחצים על Record כדי להתחיל לתעד אירועים. אפשר ללחוץ על אירוע כדי לראות מידע נוסף עליו.

איור 7. החלונית 'אחזור ברקע'. הדגמה מאת Maxim Salnikov.

איור 8. החלונית 'סנכרון ברקע'.

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

Puppeteer ל-Firefox

Puppeteer ל-Firefox הוא פרויקט ניסיוני חדש שמאפשר להפוך את Firefox לאוטומציה באמצעות Puppeteer API. במילים אחרות, עכשיו אפשר להפוך את Firefox ו-Chromium לאוטומטיים באמצעות אותו Node API, כפי שמוצג בסרטון שבהמשך.

אחרי שמריצים את הפקודה node example.js, הדפדפן Firefox נפתח והטקסט page מוכנס לתיבת החיפוש באתר המסמכים של Puppeteer. לאחר מכן, אותה משימה חוזרת על עצמה ב-Chromium.

כדאי לצפות בהרצאה של Joel ו-Andrey בנושא Puppeteer מ-Google I/O 2019 כדי לקבל מידע נוסף על Puppeteer ועל Puppeteer ל-Firefox. ההודעה על Firefox תופיע בסביבות השעה 4:05.

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

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

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

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

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

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

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