חדשות של כלי פיתוח, עדכניות ככל האפשר
החדשות הראשונות בפוסט הזה הן קצת מטא – הן העדכון הזה עצמו! מדי פעם, אבל לפחות פעם בחודש, אנסה לסכם את מה שקורה בעולם של Chrome DevTools, טרי מהמדפסת.
וכשאני אומר 'רעננה', אני אדבר על תכונות חדשות שהגיעו עכשיו ל-Chrome Canary, כך שאם אתם מעדיפים להישאר בשטח יציב, זה גם מגניב. אבל אם אתם אוהבים הרפתקאות ואתם רוצים להישאר מעודכנים, הפוסטים האלה בשבילכם. בנוסף לתכונות ולתיקוני הבאגים האחרונים, בסוף כל פוסט תמצאו את הקטע דופק הקהילה, שבו נסקור את התכנים הכי טובים שהמשתמשים האהובים שלנו תרמו.
בלי יותר מילים, נעבור לחדשות האמיתיות.
מה חדש בכלי הפיתוח
צילומי מסך שדומים לסרט צילום ברשת ובציר הזמן
רק לפני שבוע הוצאנו מסטטוס הניסוי תכונה חדשה ומשמעותית: היכולת לצלם צילומי מסך של הדף גם בכרטיסייה 'רשת' וגם בכרטיסייה 'ציר זמן'.
בלוח הרשת, לוחצים על סמל המצלמה הקטן כדי להפעיל את הצילום של התמונות, ואז טוענים מחדש את הדף כדי להפעיל את הצילום. פרט לצילומי מסך שנוצרו באמצעות כלים אחרים כמו WebPageTest, בשלב הזה אנחנו מציגים רק פריימים שהגיעו בפועל מ-painting.
לחיצה כפולה על אחד מהפריימים מציגה תצוגה מוגדלת (ואז אפשר להשתמש בחצים שמאלה/ימינה כדי לנווט). כשמעבירים את העכבר מעל הפריים, מופיעות קווים בחלונית ובציר הזמן כדי להמחיש מתי בדיוק הפריימים צולמו, וכך תוכלו למצוא התאמה לרצף הטעינה. כך קל יותר לנפות באגים מבעיות טעינה נפוצות, כמו חסימת גופן אינטרנט שחוסמים עיבוד.
בלוח ציר הזמן, אפשר להפעיל את צילום המסך על ידי החלפת המצב של התיבה 'צילומי מסך' בסרגל הכלים העליון. הדברים עובדים כאן בצורה קצת שונה, בהשוואה לחלונית 'רשת': במקרה הזה, אנחנו מנסים לצלם בתדירות גבוהה ככל האפשר, ללא קשר לצבעים בפועל – כדי שנוכל להסיר את צילומי המסך האלה בטווח זמן לינארי שתואם לשורות האחרות בציר הזמן. במקום ללחוץ פעמיים כדי להציג תצוגה מקדימה, כשמעבירים את העכבר מעל התמונות הן מוצגות בהגדלה.
מכיוון שהשניים קצת לא מסונכרנים מבחינת הפונקציונליות וחוויית המשתמש, נשמח להציע לכם לנסות את התכונות ולשלוח משוב על הכרטיסים crbug.com/new או באמצעות ציוץ אל @ChromeDevTools.
הגבלת רוחב פס בחלונית 'רשת'
הגבלת התעבורה ברשת, תכונה שהוספנו כשהשקנו את מצב המכשיר, עברה לבית השני שלה בסרגל הכלים של חלונית הרשת, כדי שתוכלו להתמקד באופטימיזציות של הרשת במקום אחד.
עם זאת, דף הבית החדש הוא רק רפליקת דף הבית הקודם: הוא עדיין זמין מחוץ למצב מכשיר, כי חשוב מאוד לדמות חיבור לקוי כשעובדים על תגובה מהירה של האתר.
לסיום, האם אתם מהאנשים האלה ששואלים את עצמם למה החיבור לאינטרנט לא עובד אחרי יום ארוך בעבודה, רק כדי לגלות ששכחתם להשבית את הבקרה על קצב הנתונים ברשת? בכרטיסייה של חלונית הרשת מוצג עכשיו סמל אזהרה כשהגבלת רוחב הפס מופעלת.
טיפים שונים
- לא אהבתם את העיגולים המוזרים בציר הזמן של הרשת? גם אנחנו. אלה נקודות הזמן שבהן צילמתם פריים (בפס הקול החדש). עכשיו הם מופיעים כקווים כשמעבירים את העכבר מעליהם.
- מצב המכשיר שומר עכשיו על הכיוון כשעוברים בין מכשירים
פעימת הלב של הקהילה
כלי הפיתוח ל-Chrome – מידע מעמיק
Bret Little פרסם את הקורס הקטן והנחמד הזה שמלמד על הפונקציונליות הבסיסית של DevTools, אבל גם מציע הרבה טיפים וטריקים מעמיקים. יש שם מידע שימושי, ותוכלו למצוא מסמכים נוספים של DevTools.
סביבת פיתוח משולבת (IDE) של DevTools…?!
Kenneth Auchenberg, מפתח אתרים ומומחה ב-DevTools, פיתח לפני כמה חודשים אפליקציית DevTools עצמאית להוכחת היתכנות, ובאופן כלשהו פוסט הבלוג שלו שוב פורסם השבוע בחדשות (האקרים).
הפיכת DevTools לסביבת פיתוח משולבת (IDE) מלאה היא רעיון מהנה, שרבים מחברי הצוות שלנו חלמו עליו בעבר, אבל זה גם יהיה פרויקט בפרופורציות עצומות.
מה דעתך? האם סביבת הפיתוח המשולבת של DevTools היא חלום בלתי אפשרי, או שאפשר לראות אותה פועלת? איך זה אמור להיראות? נשמח לשמוע ממך בתגובות!
נתראה בקרוב!
פול באקאוס (Paul Bakaus) וצוות כלי הפיתוח