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