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

Kayce Basques

אנחנו שמחים שהצטרפת! התכונות החדשות והשינויים העיקריים הצפויים בכלי הפיתוח ב-Chrome 60 כוללים:

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

תכונות חדשות

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

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

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

דוח Lighthouse

איור 1. דוח Lighthouse

כדי לבדוק דף:

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

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

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

תרומה ל-Lighthouse

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

המשך ל'כאן'

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

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

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

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

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

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

השינויים

תצוגות מקדימות אינפורמטיביות יותר של אובייקטים ב- Console

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

אפשרויות פשוטות יותר לויסות רשת

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

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

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

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

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

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

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

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

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

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