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

Kayce Basques
Kayce Basques
X GitHub

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

המיטב

תכונות חדשות

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

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

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

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

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

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

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

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

  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

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

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

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