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

Kayce Basques

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

המיטב

תכונות חדשות

כיסוי של קוד CSS וקוד JS

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

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

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

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

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

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

כדי לפתוח את הכרטיסייה דפים הנכללים באינדקס:

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

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

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

חסימת בקשות

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

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

מעבר אסינכרוני בהמתנה

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

  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 או בטא כדפדפן הפיתוח שמוגדר כברירת מחדל. הערוצים לתצוגה מקדימה אלה מעניקים לך גישה לתכונות החדשות של כלי הפיתוח, מאפשרים לך לבדוק ממשקי API מתקדמים של פלטפורמות אינטרנט ולעזור לך לגלות בעיות באתר שלך לפני שהמשתמשים עושים זאת.

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

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

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

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