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

Kayce Basques

אלה החידושים בכלי הפיתוח ב-Chrome 73.

גרסת וידאו של נתוני הגרסה האלה

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

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

כדי להוסיף נקודת רישום ביומן:

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

   

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

2. לוחצים על הוספת נקודת רישום. מופיע הכלי לעריכת נקודות עצירה (breakpoint).

   

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

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

   

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

   טיפ! כשמוציאים משתנה (למשל TodoApp) מהלולאה, צריך להוסיף אותו לאובייקט (למשל {TodoApp}) כדי להוציא את השם והערך שלו מהלולאה ב-Console. מידע נוסף על התחביר הזה זמין במאמרים Always Log Objects ו-Object Property Value Shorthand.

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

   

   איור 4. תג כתום של נקודת רישום בשורה 174

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

איור 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 שנותח בכלי הפיתוח. ‫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.

   

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

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

   

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

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

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

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

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

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

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

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

איור 11. הדגשת קישור

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

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

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

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

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

איור 14. הרחבת דוח קריסות מכווץ

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

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

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

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

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

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

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

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

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

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

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

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

   

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

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

   

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

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

   

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

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

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

   

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

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

הפרדת קוד

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

איור 20. שורות 54 עד 65 כווצו

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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