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

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

Kayce Basques

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

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

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

תכונות חדשות

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

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

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

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

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

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

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

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

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

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

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

חסימת בקשות

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

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

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

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

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