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

Kayce Basques

שלום! הנה מה שחדש בכלי הפיתוח ל-Chrome ב-Chrome 76.

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

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

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

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

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

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

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

האפשרויות הבאות הועברו אל הגדרות רשת: Use Large Request Rows, ‏ קיבוץ לפי Frame, ‏ Show Overview, ‏ Capture Screenshots. באיור 3 ממופים המיקומים הישנים למיקומים החדשים.

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

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

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

כשמייצאים קובץ HAR מחלונית "רשת" כדי לשתף יומני רשת עם הקולגות, קובץ ה-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.

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

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

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

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

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

מספרי יציאות לרישום של Service Worker

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

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

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

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

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

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

Puppeteer ל-Firefox

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

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

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

הורדת הערוצים בגרסת טרום-השקה (Preview)

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

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

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

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

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

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