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

Kayce Basques

ריכזנו כאן את החידושים בכלי הפיתוח בגרסה 73 של Chrome.

גרסה של נתוני הגרסה הזו בסרטון

נקודות רישום (logpoints)

אפשר להשתמש ב-Logpoints כדי לתעד הודעות במסוף בלי להעמיס את הקוד בקריאות ל-console.log().

כדי להוסיף נקודת התחלה ביומן:

  1. לוחצים לחיצה ימנית על מספר השורה שבה רוצים להוסיף את נקודת ה-Logpoint.

    הוספת נקודת רישום (logpoint)

    איור 1. הוספת נקודת רישום (logpoint)

  2. בוחרים באפשרות הוספת נקודת רישום (logpoint). עורך נקודות העצירה יופיע.

    עורך נקודות העצירה

    איור 2. עורך נקודת העצירה (breakpoint)

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

    הקלדה של הביטוי של נקודת הרישום (logpoint)

    איור 3. הקלדה של ביטוי Logpoint

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

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

    תג Logpoint כתום בשורה 174

    איור 4. תג Logpoint כתום בשורה 174

בפעם הבאה שהשורה תבוצע, כלי הפיתוח ירשום ביומן של מסוף DevTools את התוצאה של ביטוי Logpoint.

התוצאה של הביטוי Logpoint במסוף

איור 5. התוצאה של הביטוי Logpoint במסוף

כדי לדווח על באגים או להציע שיפורים, ראו בעיה מס' 700519 ב-Chromium.

הסברים מפורטים על הבדיקה במצב בדיקה

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

בדיקת צומת

איור 6. בדיקת צומת

כדי לבדוק צומת:

  1. לוחצים על בדיקה בדיקת צומת.

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

  2. בחלון התצוגה, מעבירים את העכבר מעל הצומת.

ייצוא נתוני הכיסוי של הקוד

עכשיו אפשר לייצא נתונים של כיסוי קוד כקובץ JSON. קובץ ה-JSON נראה כך:

[
  {
    "url": "https://wndt73.glitch.me/style.css",
    "ranges": [
      {
        "start": 0,
        "end": 21
      },
      {
        "start": 45,
        "end": 67
      }
    ],
    "text": "body { margin: 1em; } figure { padding: 0; } h1 { color: #317EFB; }"
  },
  ...
]

url היא כתובת ה-URL של קובץ ה-CSS או ה-JavaScript ש-DevTools ניתח. ב-ranges מתוארים חלקי הקוד שהיו בשימוש. start הוא ההיסט ההתחלתי של טווח שנעשה בו שימוש. end הוא ההיסט הסופי. text הוא הטקסט המלא של הקובץ.

בדוגמה שלמעלה, הטווח בין 0 ל-21 תואם ל-body { margin: 1em; } והטווח 45 עד 67 תואם ל-h1 { color: #317EFB; }. במילים אחרות, המערכת השתמשה בקבוצת הכללים הראשונה והאחרונה, ובקבוצה האמצעית לא.

כדי לנתח את כמות הקוד שנעשה בו שימוש בזמן טעינת הדף ולייצא את הנתונים:

  1. כדי לפתוח את תפריט הפקודות, מקישים על Control+Shift+P או על Command+Shift+P (ב-Mac).

    תפריט הפקודות

    איור 7. תפריט הפקודות

  2. מתחילים להקליד coverage, בוחרים באפשרות Show Coverage ומקישים על Enter.

    הצגת כלי ה-Coverage

    איור 8. הצגת כלי ה-Coverage

    הכרטיסייה כיסוי תיפתח.

    הכרטיסייה 'כיסוי'

    איור 9. הכרטיסייה 'כיסוי'

  3. לוחצים על טעינה מחדש טעינה מחדש. DevTools מטעין מחדש את הדף ומתעדות את כמות הקוד שנעשה בו שימוש בהשוואה לכמות הקוד שנשלח.

  4. לוחצים על ייצוא ייצוא כדי לייצא את הנתונים כקובץ JSON.

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

אפשר לדווח על באגים או להציע שיפורים בבעיה מס' 717195 ב-Chromium.

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

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

הקשה על Shift‎ + Tab מעבירה את המיקוד להודעה האחרונה (או לתוצאה של ביטוי שעבר הערכה). אם ההודעה מכילה קישורים, הקישור האחרון יודגש קודם. הקשה על Enter פותחת את הקישור בכרטיסייה חדשה. לחיצה על מקש החץ שמאלה מדגישה את ההודעה כולה (ראו איור 13).

התמקדות בקישור

איור 11. התמקדות בקישור

לחיצה על מקש החץ למעלה תתמקד בקישור הבא.

מיקוד לקישור אחר

איור 12. התמקדות בקישור אחר

לחיצה חוזרת על מקש החץ למעלה תתמקד שוב בהודעה כולה.

העברת המיקוד להודעה כולה

איור 13. העברת המיקוד להודעה כולה

לחיצה על מקש החץ ימינה מרחיבת את מעקב הסטאק המכווץ (או אובייקט, מערך וכו').

הרחבה של דוח קריסות מכווץ

איור 14. הרחבה של נתיב קריאה ב-stack שמקופל

לחיצה על מקש החץ שמאלה מכווצת הודעה או תוצאה מורחבות.

כדי לדווח על באגים או להציע שיפורים, יש לעיין בבעיה מס' 865674 ב-Chromium.

קו של יחס ניגודיות AAA בכלי לבחירת צבעים

עכשיו מוצג קו שני בבורר הצבעים כדי לציין אילו צבעים עומדים בהמלצה ליחס ניגודיות של AAA. קו AA קיים מאז גרסה 65 של Chrome.

קו AA (למעלה) וקו AAA (למטה)

איור 15. השורה AA (למעלה) והשורה AAA (למטה)

צבעים שנמצאים בין שני הקווים מייצגים צבעים שעומדים בהמלצה ל-AA אבל לא עומדים בהמלצה ל-AAA. כשצבע עומד בהמלצה של AAA, כל צבע באותו צד של הצבע הזה עומד גם הוא בהמלצה. לדוגמה, באיור 15 כל מה שמתחת לשורה התחתונה הוא AAA, וכל דבר מעל השורה העליונה אפילו לא עומד בהמלצה של AA.

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

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

אפשר לדווח על באגים או להציע שיפורים בבעיה מס' 879856 ב-Chromium.

שמירת שינויים מותאמים אישית במיקום הגיאוגרפי

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

  1. כדי לפתוח את תפריט הפקודות, מקישים על Control+Shift+P או על Command+Shift+P (ב-Mac).

    תפריט הפקודות

    איור 16. תפריט הפקודות

  2. מקלידים sensors, בוחרים באפשרות Show Sensors (הצגת חיישנים) ומקישים על Enter. הכרטיסייה חיישנים תיפתח.

    הכרטיסייה 'חיישנים'

    איור 17. הכרטיסייה 'חיישנים'

  3. בקטע מיקום גיאוגרפי, לוחצים על ניהול. הדף הגדרות > מיקומים גיאוגרפיים נפתח.

    הכרטיסייה 'מיקומים גיאוגרפיים' בהגדרות

    איור 18. הכרטיסייה 'מיקומים גיאוגרפיים' בהגדרות

  4. לוחצים על הוספת מיקום.

  5. מזינים שם, קו רוחב וקו אורך של מיקום ולוחצים על הוספה.

    הוספת מיקום גיאוגרפי מותאם אישית

    איור 19. הוספת מיקום גיאוגרפי מותאם אישית

אפשר לדווח על באגים או להציע שיפורים בבעיה מס' 649657 ב-Chromium.

קיפול קוד

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

שורות 54 עד 65 מקופלות

איור 20. השורות 54 עד 65 מקופלות

כדי להפעיל את הפרדת הקוד:

  1. מקישים על F1 כדי לפתוח את הגדרות.
  2. בקטע הגדרות > העדפות > מקורות מפעילים את האפשרות קיפול קוד.

כדי לכווץ בלוק קוד:

  1. מעבירים את העכבר מעל מספר השורה שבה מתחיל הבלוק.
  2. לוחצים על Fold קפל.

אפשר לדווח על באגים או להציע שיפורים בבעיה מס' 328431 ב-Chromium.

הכרטיסייה 'הודעות'

השם של הכרטיסייה מסגרות השתנה להודעות. הכרטיסייה הזו זמינה רק בחלונית Network כשבודקים חיבור של Web Socket.

הכרטיסייה 'הודעות'

איור 21. הכרטיסייה 'הודעות'

אפשר לדווח על באגים או להציע שיפורים בבעיה מס' 802182 ב-Chromium.

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

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

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

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

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

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