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

Kayce Basques

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

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

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

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

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

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

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

סביבות עבודה 2.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    הסימולציה של ההתראה

    איור 2. הסימולציה של ההתראה

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

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

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

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

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

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

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

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

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

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

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

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