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

Kayce Basques
Kayce Basques
X GitHub

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

המיטב

תכונות חדשות

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

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

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

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

פירוט של כיסוי הקוד בחלונית 'מקורות'

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

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

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

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

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

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

חסימת בקשות

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

חסימת כתובת ה-URL של הבקשה

דילוג על 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);
  }

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

השינויים

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

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

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

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

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

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

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

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