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

Kayce Basques

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

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

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

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

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

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

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

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

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

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

עיינו בחלק "Authoring" (בסביבות 14:28) בהרצאה של כלי הפיתוח מ-CDS 2016 כדי לראות את הביצוע של Workspaces 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 עם נתונים מותאמים אישית באמצעות תיבת הטקסט Push בחלונית Service Worker

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 בוטל.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59