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

Kayce Basques

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

המיטב

• רמת הכיסוי של קוד CSS ו-JS. אפשר למצוא קובצי CSS ו-JS שלא נמצאים בשימוש באמצעות הכרטיסייה החדשה Coverage.
• צילומי מסך של דף מלא. מצלמים צילום מסך של הדף כולו, מהחלק העליון של אזור התצוגה ועד החלק התחתון.
• חסימת בקשות. משביתים ידנית בקשות ספציפיות בחלונית הרשת.
• דילוג על async await. התקדמות צפויה בפונקציות אסינכרוניות.
• תפריט פקודות מאוחד. להריץ פקודות ולפתוח קבצים מתפריט הפקודות החדש והמאוחד.

תכונות חדשות

רמת הכיסוי של קוד CSS ו-JS

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

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

כל שורת קוד מקודדת בצבע:

• קו ירוק מלא מציין ששורה מסוימת של קוד הופעלה.
• אדום מלא מציין שהפעולה לא בוצעה.
• שורה של קוד שמוצגת גם באדום וגם בירוק, כמו שורה 3 בצילום המסך שלמעלה, מציינת שרק חלק מהקוד בשורה הזו בוצע. לדוגמה, ביטוי טרנרי כמו var b = (a > 0) ? a : 0 צבוע באדום וגם בירוק.

כדי לפתוח את הכרטיסייה כיסוי:

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

צילומי מסך של דף מלא

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

חסימת בקשות

רוצים לראות איך הדף מתנהג כשסקריפט, גיליון סגנונות או משאב אחר לא זמינים? לוחצים לחיצה ימנית על הבקשה בחלונית Network (רשת) ובוחרים באפשרות Block Request URL (חסימת כתובת האתר של הבקשה). במגירה יופיע חלון קופץ עם כרטיסייה חדשה בשם Request blocking (חסימת בקשות), שבה תוכלו לנהל את הבקשות החסומות.

דילוג על await אסינכרוני

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

  function wait(ms) {
    return new Promise(r => setTimeout(r, ms)).then(() => "Yay");
  }

  // do some work in background.
  setInterval(() => 42, 200);

  async function test() {
    debugger;
    const hello = "world";
    const response = await fetch('index.html');
    const tmp = await wait(1000);
    console.log(tmp);
    return hello;
  }

  async function runTest() {
    let result = await test();
    console.log(result);
  }

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

• איך מתחילים בניפוי באגים ב-JS
• השהיית הקוד באמצעות נקודות עצירה
• חומר עזר בנושא ניפוי באגים ב-JS

השינויים

תפריט פקודות מאוחד

כשפותחים עכשיו את תפריט הפקודות, אפשר לראות שלפני הפקודה מופיע התו "גדול מ" (>). הסיבה לכך היא שתפריט הפקודות אוחד עם התפריט פתיחת קובץ, שמופיע כשמקישים על Command+O (ב-Mac) או על Control+O (ב-Windows וב-Linux).

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

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

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

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

• אתם מוזמנים לשלוח לנו משוב ובקשות להוספת תכונות בכתובת crbug.com.
• אפשר לדווח על בעיה בכלי פיתוח באמצעות הסמל more_vert אפשרויות נוספות > עזרה > דיווח על בעיה בכלי פיתוח בכלי הפיתוח.
• שולחים ציוץ אל ‎@ChromeDevTools.
• אפשר להוסיף תגובות לסרטונים What's new in DevTools YouTube videos או DevTools Tips YouTube videos.

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

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