דף זה תורגם על ידי Cloud Translation API.

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

Kayce Basques

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

תוצאות נבחרות

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

תכונות חדשות

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

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

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

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

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

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

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

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

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

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

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

חסימת בקשות

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

חסימת כתובת ה-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);
  }

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

השינויים

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

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

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

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

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

אפשר לשלוח לנו הצעה או משוב דרך crbug.com.
כדי לדווח על בעיה בכלי הפיתוח, לוחצים על אפשרויות נוספות > עזרה > דיווח על בעיות בכלי הפיתוח בכלי הפיתוח.
שליחת ציוץ אל @ChromeDevTools.
נשמח לשמוע מה חדש בסרטונים ב-YouTube של כלי הפיתוח או בסרטונים ב-YouTube שקשורים לכלי פיתוח.