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

Kayce Basques

טוב לראות אותך שוב! התכונות החדשות שיתווספו ל-DevTools בגרסה 63 של Chrome כוללות:

כדי לקבל מידע נוסף, אפשר להמשיך לקרוא או לצפות בסרטון שבהמשך.

תמיכה בניפוי באגים מרחוק במספר לקוחות

אם ניסיתם פעם לנפות באגים באפליקציה מ-IDE כמו VS Code או WebStorm, סביר להניח שגיליתם שפתיחתו של DevTools מפריעה לסשן ניפוי הבאגים. הבעיה הזו גם מנעה שימוש בכלי הפיתוח לניפוי באגים בבדיקות WebDriver.

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

ניפוי באגים מרחוק בכמה לקוחות הייתה הבעיה הפופולרית ביותר ב-DevTools ב-crbug.com, והבעיה השלישית בפרויקט Chromium כולו. תמיכה בכמה לקוחות גם פותחת כמה הזדמנויות מעניינות לשילוב כלים אחרים עם DevTools, או לשימוש בכלים האלה בדרכים חדשות. לדוגמה:

  • לקוחות פרוטוקול כמו ChromeDriver או התוספים לניפוי באגים ב-Chrome ל-VS Code ול-Webstorm, וגם לקוחות WebSocket כמו Puppeteer, יכולים לפעול עכשיו בו-זמנית עם DevTools.
  • עכשיו אפשר לחבר בו-זמנית שני לקוחות נפרדים של פרוטוקול WebSocket, כמו Puppeteer או chrome-remote-interface, לאותה כרטיסייה.
  • עכשיו אפשר להריץ תוספים ל-Chrome שמשתמשים ב-API ‏chrome.debugger באותו זמן עם DevTools.
  • עכשיו אפשר להשתמש בו-זמנית בממשק ה-API chrome.debugger בכמה תוספים שונים ל-Chrome באותו כרטיסייה.

Workspaces 2.0

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

גרסת 2.0 של Workspaces מבוססת על גרסת 1.0, עם חוויית משתמש שימושית יותר ומיפוי אוטומטי משופר של קוד שעבר טרנספיליציה. התכונה הזו תוכננה במקור להשקה זמן קצר אחרי כנס Chrome Developer Summit‏ (CDS) 2016, אבל הצוות דחה אותה כדי לפתור כמה בעיות.

כדי לראות את Workspaces 2.0 בפעולה, מומלץ לצפות בקטע 'כתיבה' (בסביבות 14:28) מההרצאה על DevTools מ-CDS 2016.

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

בגרסה 63 של Chrome, בחלונית בדיקות יש 4 בדיקות חדשות:

  • הצגת תמונות בפורמט WebP.
  • השתמשו בתמונות עם יחס גובה-רוחב מתאים.
  • הימנעו משימוש בספריות JavaScript חזיתיות עם פגיעויות ידועות באבטחה.
  • שגיאות דפדפן שנרשמו במסוף.

במאמר הפעלת Lighthouse בכלי הפיתוח ל-Chrome מוסבר איך להשתמש בחלונית בדיקות כדי לשפר את האיכות של הדפים.

ב-Lighthouse אפשר לקרוא מידע נוסף על הפרויקט שמפעיל את החלונית ביקורות.

הדמיה של התראות עם נתונים מותאמים אישית

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

  1. עוברים אל הדגמה פשוטה של Push.
  2. לוחצים על הפעלת התראות.
  3. לוחצים על אישור כשמוצגת ב-Chrome בקשה לאשר את ההתראות.
  4. פותחים את כלי הפיתוח.
  5. עוברים לחלונית Service Workers.

  6. כותבים משהו בתיבת הטקסט Push.

    הדמיה של התראה ב-push עם נתונים מותאמים אישית.

    איור 1. סימולציה של התראה ב-push עם נתונים מותאמים אישית באמצעות תיבת הטקסט Push בחלונית Service Worker

  7. לוחצים על Push כדי לשלוח את ההתראה.

    ההתראה המדומה

    איור 2. ההתראה המדומה

הפעלת אירועי סנכרון ברקע באמצעות תגים מותאמים אישית

האפשרות להפעיל אירועי סנכרון ברקע הייתה זמינה כבר זמן מה בחלונית Service Workers, אבל עכשיו אפשר לשלוח תגים מותאמים אישית:

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

הפעלת אירוע מותאם אישית של סנכרון ברקע

איור 3. אחרי שלוחצים על סנכרון, כלי הפיתוח שולחים ל-service worker אירוע סנכרון ברקע עם התג המותאם אישית update-content.

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

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

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

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

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

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