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

Kayce Basques

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

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

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

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

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

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

   

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

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

   

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

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

   

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

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

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

   

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

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

   

   איור 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.

איור 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.

קיפול קוד

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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