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

Kayce Basques

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

המיטב

רמת הכיסוי של קוד CSS ו-JS. אפשר למצוא קובצי CSS ו-JS שלא נמצאים בשימוש באמצעות הכרטיסייה החדשה Coverage.
צילומי מסך של דף מלא. מצלמים צילום מסך של הדף כולו, מהחלק העליון של אזור התצוגה ועד החלק התחתון.
חסימת בקשות. משביתים ידנית בקשות ספציפיות בחלונית הרשת.
Step over async await (דילוג על פעולת await אסינכרונית). הפעלה של פונקציות אסינכרוניות באופן צפוי.
תפריט פקודות מאוחד. להריץ פקודות ולפתוח קבצים מתפריט הפקודות החדש והמאוחד.

תכונות חדשות

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

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

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

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

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

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

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

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

פותחים את תפריט הפקודות.
מתחילים להקליד 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

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

אתם מוזמנים לשלוח לנו משוב ובקשות להוספת תכונות בכתובת crbug.com.
אפשר לדווח על בעיה בכלי פיתוח באמצעות הסמל אפשרויות נוספות > עזרה > דיווח על בעיה בכלי פיתוח בכלי הפיתוח.
שולחים ציוץ אל ‎@ChromeDevTools.
להשאיר תגובות בסרטונים What's new in DevTools YouTube videos או DevTools Tips YouTube videos.