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

Kayce Basques

שלום! התכונות החדשות והשינויים המשמעותיים שייכנסו ל-DevTools ב-Chrome 60 כוללים:

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

תכונות חדשות

לוח ביקורות חדש שמבוסס על Lighthouse

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

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

דוח Lighthouse

איור 1. דוח Lighthouse

כדי לבדוק דף:

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

Lighthouse ב-Google I/O 2017

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

תרומה ל-Lighthouse

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

המשך ל'כאן'

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

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

מדריך למתחילים בנושא אסינכרוניזציה

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

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

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

השינויים

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

אפשרויות פשוטות יותר של הגבלת רוחב פס

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

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

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

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

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

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

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

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

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

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

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

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

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

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