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

Kayce Basques

שלום! אלה החידושים בכלי הפיתוח של Chrome בגרסה 76 של Chrome.

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

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

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

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

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

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

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

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

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

אפשר לשלוח משוב על השינוי הזה בממשק המשתמש אל Chromium issue #892969.

הודעות 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.

אפשר לשלוח משוב על השינוי הזה בממשק המשתמש אל Chromium issue #904585.

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

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

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

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

אפשר לשלוח משוב על התכונה החדשה הזו אל Chromium issue #958177.

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

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

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

אפשר לשלוח משוב על השינוי הזה בממשק המשתמש אל Chromium issue #601286.

בדיקת אירועים של Background Fetch ו-Background Sync

משתמשים בקטע החדש Background Services (שירותים ברקע) בחלונית Application (אפליקציה) כדי לעקוב אחרי אירועים של Background Fetch (שליפה ברקע) ושל Background Sync (סנכרון ברקע). בהתחשב בכך שאירועים של Background Fetch ו-Background Sync מתרחשים ברקע, לא יהיה שימושי במיוחד אם כלי הפיתוח יתעדו רק אירועים של Background Fetch ו-Background Sync בזמן שכלי הפיתוח פתוחים. לכן, אחרי שתתחילו להקליט, אירועים של Background Fetch ו-Background Sync ימשיכו להיות מתועדים, גם אחרי שתסגרו את הכרטיסייה וגם אחרי שתסגרו את Chrome.

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

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

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

אתם יכולים לשלוח משוב על התכונות החדשות האלה אל Chromium issue #927726.

Puppeteer for Firefox

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

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

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

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

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

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

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

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

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

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