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

Kayce Basques

שלום, התכונות החדשות והשינויים העיקריים שיחולו בקרוב בכלי הפיתוח ב-Chrome 60 כוללים:

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

תכונות חדשות

חלונית ביקורת חדשה, מופעלת על ידי Lighthouse

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

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

דוח Lighthouse

איור 1. דוח Lighthouse

כדי לבדוק דף:

  1. לוחצים על הכרטיסייה Audits.
  2. לוחצים על ביצוע בדיקה.
  3. לוחצים על הרצת בדיקה. מערכת Lighthouse מגדירה את כלי הפיתוח כדי לחקות מכשיר נייד, מבצעת כמה בדיקות בדף והתוצאות מוצגות בחלונית Audits.

מגדלור ב-Google I/O 2017

לקבלת מידע נוסף על השילוב של Lighthouse בכלי הפיתוח, קראו את השיחה של כלי הפיתוח מ-Google I/O '17' בהמשך.

הוספת תוכן ל-Lighthouse

Lighthouse הוא פרויקט בקוד פתוח. לקבלת מידע נוסף על אופן הפעולה ועל האופן שבו ניתן לתרום לכך, קראו את ההרצאה של Lighthouse מ-Google I/O 2017 בהמשך.

יש לכם רעיון לביקורת של Lighthouse? אפשר לפרסם אותו כאן!

תגים של צד שלישי

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

העברת העכבר מעל תג של צד שלישי בחלונית 'רשת'

איור 2. העברת העכבר מעל תג של צד שלישי בחלונית 'רשת'

העברת העכבר מעל תג של צד שלישי במסוף

איור 3. העברת העכבר מעל תג של צד שלישי במסוף

כדי להפעיל תגים של צד שלישי:

  1. פותחים את תפריט הפקודה.
  2. מריצים את הפקודה Show third party badges.

אפשר להשתמש באפשרות Group by product בכרטיסיות Call Tree ו מלמטה למעלה כדי לקבץ את הפעילות של הקלטת הביצועים על ידי הישויות של הצד השלישי שגרמו לפעילויות. במאמר תחילת העבודה עם ניתוח הביצועים של זמן הריצה מוסבר איך לנתח ביצועים באמצעות כלי פיתוח.

קיבוץ לפי מוצר בכרטיסייה 'למטה'

איור 4. קיבוץ לפי מוצר בכרטיסייה מלמטה למעלה

תנועה חדשה לאפשרות 'המשך לכאן'

נניח שאתם מושהית בשורה 25 של סקריפט ואתם רוצים לעבור לשורה 50. בעבר אפשר היה להגדיר נקודת עצירה בשורה 50 או ללחוץ לחיצה ימנית על הקו ולבחור באפשרות Continue to here (המשך לכאן). אבל עכשיו יש תנועה מהירה יותר לטיפול בתהליך העבודה הזה.

כשאתם עוברים על הקוד, מחזיקים את Command (ב-Mac) או את Control (ב-Windows, ב-Linux) ולוחצים כדי להמשיך לשורת הקוד הזו. כלי הפיתוח מדגישים בצבע כחול את היעדים שניתן לדלג עליהם.

המשך לכאן

איור 5. המשך לכאן

במאמר תחילת העבודה עם ניפוי באגים ב-JavaScript מפורט מידע בסיסי על ניפוי באגים בכלי הפיתוח.

נכנסים למצב אסינכרוני

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

התנועה החדשה 'המשך לכאן' פועלת גם עם קוד אסינכרוני. כשמחזיקים את הפקודה Command (ב-Mac) או Control (ב-Windows וב-Linux), כלי הפיתוח מדגישים בצבע ירוק יעדים אסינכרוניים שניתן לדלג עליהם.

אפשר לראות דוגמה להדגמה שמופיעה בהמשך בשיחה על כלי הפיתוח בכנס I/O.

השינויים

תצוגה מקדימה אינפורמטיבית יותר של אובייקטים במסוף

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

איך נעשה שימוש במסוף לתצוגה מקדימה של אובייקטים

איור 6. איך נעשה שימוש במסוף לתצוגה מקדימה של אובייקטים

איך התצוגה המקדימה של האובייקטים מתבצעת עכשיו במסוף

איור 7. איך התצוגה המקדימה של האובייקטים מתבצעת עכשיו במסוף

תפריט אינפורמטיבי יותר לבחירת הקשר במסוף

בתפריט 'בחירת הקשר' במסוף יש עכשיו מידע נוסף על ההקשרים הזמינים.

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

התפריט החדש 'בחירת הקשר'

איור 8. העברת העכבר מעל iframe בתפריט החדש 'בחירת הקשר' תדגיש אותו באזור התצוגה

עדכונים בזמן אמת בכרטיסייה 'כיסוי'

כשמקליטים את הכיסוי של הקוד ב-Chrome 59, בכרטיסייה Cover יופיע רק הכיתוב 'Recording...', ללא הרשאות גישה לקוד שבו נעשה שימוש. עכשיו תוכלו לראות בכרטיסייה כיסוי בזמן אמת באיזה קוד משתמשים.

טעינת דף ואינטראקציה איתו באמצעות הכרטיסייה הישנה 'כיסוי'

איור 9. טעינת דף ואינטראקציה איתו באמצעות הכרטיסייה הישנה כיסוי

טעינת דף ואינטראקציה איתו באמצעות הכרטיסייה החדשה 'כיסוי'

איור 10. טעינת דף ואינטראקציה איתו באמצעות הכרטיסייה החדשה כיסוי

אפשרויות פשוטות יותר לויסות רשת (throttle)

תפריטי ויסות הרשת (throttling) בחלוניות רשת וביצועים פשוט יותר וכוללים רק שלוש אפשרויות: אופליין, 3G איטי, שנפוצה במקומות כמו הודו, ו-3G מהיר, שנפוץ במקומות כמו ארצות הברית.

האפשרויות החדשות לויסות רשת

איור 11. האפשרויות החדשות לויסות רשת

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

מקבץ אסינכרוני פועל כברירת מחדל

תיבת הסימון אסינכרונית הוסרה מהחלונית מקורות. דוחות הקריסות האסינכרוניים מופעלים עכשיו כברירת מחדל. בעבר, הייתה אפשרות להביע הסכמה לשימוש באפשרות הזו בגלל תקורת הביצועים. מעכשיו, התקורה קטנה מספיק כדי להפעיל את התכונה כברירת מחדל. אם אתם מעדיפים להשבית את דוחות הקריסות האסינכרוניים, תוכלו להשבית אותם בהגדרות או באמצעות הפקודה Do not capture async stack traces בתפריט הפקודה.

כלי פיתוח ב-Google I/O 2017

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

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

כדאי להשתמש ב-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