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

Kayce Basques

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

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

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

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

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

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