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

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

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

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

לאחר הקלדת &#39;מודגש&#39;, חלונית הסגנונות תשלים באופן אוטומטי את הערך &#39;font-weight: bold&#39;.

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

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

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

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

הגדרות רשת

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

האפשרויות הבאות עברו ל-Network Settings (הגדרות הרשת): Use Large Request Rows, Group by, 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 מופיעים בכלי הפיתוח כבר זמן מה. הלחצנים הגלויים יותר הם השינוי החדש.

לחצני ה-HAR החדשים.

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

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

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

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

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

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

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

ניתן לשלוח משוב על התכונה החדשה הזו לבעיה מס' 958177 ב-Chromium.

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

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

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

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

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

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

ניתן להשתמש בקטע החדש Background Services בחלונית Application כדי לעקוב אחרי אירועים של אחזור ברקע וסנכרון ברקע. מכיוון שאירועים מסוג 'אחזור ברקע' ו'סנכרון ברקע' מתרחשים ברקע... אז... לא יהיה שימושי אם כלי הפיתוח תיעדו רק אירועים של 'אחזור רקע' ו'סנכרון ברקע' בזמן שכלי הפיתוח היו פתוחים. לכן, ברגע שתתחילו להקליט, האירועים 'אחזור רקע' ו'סנכרון ברקע' ימשיכו להיות מוקלטים, גם אחרי שתסגרו את הכרטיסייה וגם אחרי שתסגרו את Chrome.

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

החלונית &#39;אחזור רקע&#39;.

איור 7. החלונית 'אחזור רקע'. הדגמה של מקסים סלניקוב.

החלונית &#39;סנכרון ברקע&#39;.

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

ניתן לשלוח משוב על התכונות החדשות האלה לבעיה מס' 927726 של Chromium.

Puppeteer ב-Firefox

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

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

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

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

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

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

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

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

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

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

Chrome 123

גרסה 122 של Chrome

גרסה 121 של Chrome

Chrome 120

גרסה 119 של Chrome

גרסה 118 של Chrome

גרסה 117 של Chrome

גרסה 116 של Chrome

Chrome 115

Chrome 114

גרסה 113 של Chrome

גרסה 112 של Chrome

גרסה 111 של Chrome

Chrome 110

Chrome 109

גרסה 108 של Chrome

גרסה 107 של Chrome

Chrome 106

Chrome 105

Chrome 104

גרסה 103 של Chrome

גרסה 102 של Chrome

גרסה 101 של Chrome

Chrome 100

גרסה 99 של Chrome

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

גרסה 92 של Chrome

גרסה 91 של Chrome

Chrome 90

גרסה 89 של Chrome

גרסה 88 של Chrome

גרסה 87 של Chrome

גרסה 86 של Chrome

גרסה Chrome 85

גרסה 84 של Chrome

גרסה 83 של Chrome

גרסה 82 של Chrome

Chrome 82 בוטל.

גרסה 81 של Chrome

גרסה 80 של Chrome

גרסה 79 של Chrome

גרסה 78 של Chrome

גרסה 77 של Chrome

גרסה 76 של Chrome

גרסה 75 של Chrome

גרסה 74 של Chrome

גרסה 73 של Chrome

גרסה 72 של Chrome

גרסה 71 של Chrome

גרסה 70 של Chrome

גרסה Chrome 68

Chrome גרסה 67

Chrome 66

גרסה Chrome 65

Chrome 64

Chrome 63

גרסה 62 של Chrome

גרסה 61 של Chrome

Chrome 60

Chrome 59