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

Kayce Basques

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

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

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

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

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

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

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

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

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

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

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

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

    הקלדה של ביטוי Logpoint

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

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

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

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

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

בפעם הבאה שהשורה תבוצע, כלי הפיתוח ירשום ביומן את התוצאה של ביטוי 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, בוחרים באפשרות הצגת הכיסוי ומקישים על Enter.

    הצגת כלי ה-Coverage

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

איור 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. בקטע Geolocation (מיקום גיאוגרפי), לוחצים על Manage (ניהול). הדף הגדרות > מיקומים גיאוגרפיים נפתח.

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

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

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

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

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

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

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

קיפול קוד

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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