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

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

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

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

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

כדי להוסיף נקודת רישום (logpoint):

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

   

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

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

   

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

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

   

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

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

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

   

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

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

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

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

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

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

איור 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) כדי לפתוח את תפריט Command.

   

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

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

   

   איור 8. הצגת הסיקור

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

   

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

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

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

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

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

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

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

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

איור 11. מיקוד לקישור

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

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

הקשה על מקש החץ למעלה מתמקדת שוב בהודעה כולה.

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

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

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

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

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

   

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

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

   

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

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

   

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

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

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

   

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

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

קיפול קוד

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

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

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

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

כדי לקפל קטע קוד:

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

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

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

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

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

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

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

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

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

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

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

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

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