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

Kayce Basques

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

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

תכונות חדשות

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

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

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

דוח Lighthouse

איור 1. דוח Lighthouse

כדי לבדוק דף:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

המשך לכאן

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

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

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

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

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

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

השינויים

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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