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

Kayce Basques

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

המיטב

תכונות חדשות

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

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

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

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

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

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

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

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

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

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

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

חסימת בקשות

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

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

דילוג על async await

עד עכשיו, ניסיון לעבור על קוד כמו קטע הקוד הבא היה כאב ראש. תהיה באמצע 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);
  }

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

השינויים

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

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

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

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

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

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

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

רשימה של כל מה שנדון בסדרה מה חדש ב-DevTools.