אנחנו ממשיכים לפתח את Chrome DevTools במהירות, ורצינו להפנות את תשומת ליבכם לחלק מהפונקציונליות החדשה ולשיפורים שהוספנו לכמה רכיבים. נדבר על כמה שינויים בממשק המשתמש, על פרופיל JS ברזולוציה גבוהה ועל תכונות חדשות ב-Workspaces.
- יצירת פרופילים ברזולוציה גבוהה מגיעה עכשיו לרמת דיוק של 0 .1 אלפית השנייה
- סרגי הכלים הועברו לחלק העליון של DevTools והאפשרות 'עקיפה' הועברה למגירה של מסוף הפקודה
- נוספו כמה תכונות לסביבות עבודה כדי לתמוך בהוספה/הסרה/חיפוש של קבצים
יצירת פרופילים ברזולוציה גבוהה
ניתוח ביצועים של מעבד (CPU) הוא תכונה שימושית למדי שבעזרתה אפשר לראות את היעילות של JavaScript. בנוסף לתצוגות הפרופיל המסורתיות, הוספנו הקיץ תרשים אש שמייצג באופן חזותי את העיבוד של JavaScript בדף לאורך זמן. אפשר להשתמש בו כדי לראות בקלות את עומק סטאק הקריאות, וגם את משך הזמן הנדרש לעיבוד של כל פונקציה.
עד לאחרונה, גם התצוגות המסורתיות של 'כבד' (מלמטה למעלה) ו'עץ' (למעלה למטה), וגם תרשים הלהבה, הראו תהליכים ברמת דיוק של מיליסיקון אחד בלבד. ברוב האפליקציות זה בסדר. עם זאת, אם אתם עובדים על משהו שבו המהירות חשובה מאוד בממשק המשתמש, כמו משחק, רזולוציה של מילימטר שנייה אחת עשויה להיות גדולה מדי כדי לקבל תוצאות משמעותיות לגבי הגורם לכך שהאתר איטי או שהממשק המשתמש נראה עם השהיה. כדי להפעיל פרופיל ברזולוציה גבוהה (כרגע רק ב-Canary):
- פותחים את ההגדרות של DevTools.
- בכרטיסייה General, בקטע Profiler, מפעילים את האפשרות High resolution CPU profiling.
לפניכם דוגמה לתרשים אש שמוצג בפרופיל רגיל וברזולוציה גבוהה, שבו אנחנו מתעדים את טעינת דף הבית של HTML5Rocks.com:
ברזולוציה רגילה של פרופיל, משך הזמן של תהליך תמיד מעוגל למילישנייה הבאה, כך שתהליך שנמשך רק 0.1 מילישניות או פחות עדיין ידווח כמתמשך 1.0 מילישניות, ויכול להיות שתהליכים אחרים לא יוצגו בכלל בסטאק הקריאות.
ליצירת פרופילים ברזולוציה גבוהה יש תקורה גבוהה במכונה הווירטואלית של JavaScript, ולכן היא מושבתת כברירת מחדל. אמנם זה נראה מגניב יותר מהרזולוציה הרגילה של יצירת הפרופיל, אבל מומלץ להשתמש בה רק אם אתם באמת זקוקים לרמת הדיוק הזו.
שיפורים בממשק המשתמש של כלי הפיתוח
תמיד יש דברים חדשים שאנחנו משיקים ב-Canary, אבל רצינו להפנות את תשומת ליבכם לכמה שינויים משמעותיים בממשק המשתמש: הלחצנים עולים לחלק העליון של ממשק המשתמש באופן כללי, חלוניות המידע והניווט ב-Timeline וההעברה של החלפת הערכים המקוריים לתיבה הנשלפת של מסוף Chrome.
קודם כל, נבחן את המצב הנוכחי. מכיוון שאנחנו מדברים על ציר הזמן, אנסה להרוג את שני הציפורים הראשונות בצילום מסך אחד. כך נראה ציר הזמן כרגע ב-Chrome (בגרסת build היציבה):
כך נראה ציר הזמן עכשיו.
שימו לב לדברים הבאים:
- עכשיו כל סרחי הכלים והלחצנים נמצאים בחלק העליון של המסך, גם אלה שספציפיים ל-Timeline בצד ימין וגם אלה שספציפיים ל-DevTools בצד ימין.
- עכשיו יש מבנה עץ של הרשומות בציר הזמן בחלונית שמשמאל, ואפשר אפילו לגלול בהן באמצעות המקלדת. בנוסף למקשות למעלה ולמטה לגלילה למעלה ולמטה, אפשר גם להשתמש במקשים שמאלה וימינה כדי לפתוח ולסגור רשומות בתצוגת עץ.
- פרטי הזמן יוצגו עכשיו בחלונית בצד שמאל של הרשומה שבחרתם. (אפשר גם להעביר את העכבר מעל רשומות אחרות כדי לקבל את המידע שלהן).
עכשיו נסתכל על חלונית ההזזה של המסוף. כדי לפתוח את המגירה של המסוף, מקישים על מקש Escape בתוך DevTools או על הלחצן של המגירה של המסוף 
, והמגירה תתגלגל מלמטה.
כברירת מחדל, יופיעו הכרטיסיות מסוף וחיפוש. כדי לגשת לפונקציונליות שהייתה ידועה בעבר בתור 'החלפות', פותחים את ההגדרות של DevTools ומסמנים את התיבה לצד 'הצגת התצוגה 'הדמיה' בחלונית המסוף'. סוגרים את תיבת ההגדרות ותופיע הכרטיסייה Emulation בחלונית ההזזה של המסוף, כמו בצילום המסך הבא:
ושם תוכלו לבצע את כל ההדמיות.
הסיבה לשינוי הזה היא שבעבר הייתם צריכים להיכנס ולהיצא מההגדרות כדי לשנות את השינויים שמבטלים את ההדמיה, ואז לחזור ולראות את הדף. עכשיו אפשר לשנות את ההחרגות של ההדמיה ועדיין לשנות את הסגנונות.
סביבות עבודה משופרות
Workspaces היא תכונה ספציפית שיכולה לפשט את תהליך העבודה שלכם ככותבים, אבל היא לא זוכה לפופולריות שהיא ראויה לה. בעזרת Workspaces, במקום להתנסות ולבצע שינויים בכלי הפיתוח, ולאחר מכן להעתיק ולהדביק את השינויים בחזרה לקובצי המקור, אפשר לבצע שינויים בכלי הפיתוח, לראות אותם מוצגים בדפדפן ולשמור אותם בגרסה מקומית קבועה של הקבצים – והכול בלי לצאת מ-Chrome.
אם עדיין לא קראתם את המאמר התכונות החדשות של הכלים למפתחים ב-Chrome לשנת 2013, כדאי לכם לקרוא אותו ואז לחזור לכאן כדי לקרוא איך שיפרנו את התכונות האלה בחודשים האחרונים.
הוספת קבצים בקלות
בזמן פרסום המאמר ב-Revolutions 2013, כדי ליצור סביבת עבודה חדשה היה צריך להוסיף את התיקייה לסביבות העבודה ולאחר מכן למפות את התיקייה למשאב רשת. הפכנו את התהליך הזה לפשוט יותר, והוא מורכב עכשיו רק משלב אחד: פשוט לוחצים לחיצה ימנית בחלונית הימנית של מקורות הנתונים ובוחרים באפשרות הוספת תיקייה לסביבת העבודה. תוצג תיבת דו-שיח של קבצים שבה תוכלו לבחור תיקייה חדשה להוספה לסביבות העבודה. (הפעולה הזו לא מוסיפה את התיקייה המודגשת הנוכחית לסביבות העבודה שלכם).
יצירת קבצים והסרה שלהם
עכשיו אפשר להוסיף קבצים חדשים לספרייה המקומית שבה אתם משתמשים ב-Workspaces, ישירות מתוך Workspaces. פשוט לוחצים לחיצה ימנית על תיקייה בחלונית Sources (מקורות) שמשמאל ובוחרים באפשרות New File (קובץ חדש).
אפשר גם להסיר קבצים מתוך Workspaces. לוחצים לחיצה ימנית על קובץ בחלונית המקורות שמימין ובוחרים באפשרות Delete File (מחיקת הקובץ).
אפשר גם ליצור עותק כפול של קובץ על ידי בחירה באפשרות יצירת עותק כפול של הקובץ.
רענון
עכשיו אפשר ליצור קבצים חדשים (או למחוק קבצים) ישירות בסביבות העבודה, ולכן גם הספרייה Sources תתעדכן באופן אוטומטי ותציג את הקבצים החדשים האלה. אם לא, תמיד אפשר ללחוץ לחיצה ימנית על תיקייה ולבחור באפשרות רענון בתפריט הקופץ כדי לאלץ רענון.
האפשרות הזו שימושית גם אם אתם משנים את הקבצים שנפתחים בכלי עריכה אחר, ואתם רוצים שהשינויים יופיעו בכלי הפיתוח.
חיפוש בכל הקבצים
שיפרנו מעט את הממשק לחיפוש בקבצים, ועכשיו אפשר גם לחפש מחרוזות בכל הקבצים בסביבות העבודה שלכם, וגם בכל הקבצים שנטענים ב-DevTools. אפשר לחפש מחרוזת או ביטוי רגולרי, ואנחנו מתאימים לכל מופע בכל קובץ או דף. כדי לחפש כמה קבצים ב-Workspaces (כרגע בגרסת Canary):
- לוחצים על מקש Escape כדי לפתוח את המגירה של מסוף ה-CLI, ולוחצים על הכרטיסייה Search לצד Console כדי לפתוח את חלון החיפוש.
או
מקישים על Ctrl + Shift + F (Cmd + Opt + F ב-Mac) כדי לפתוח את חלון החיפוש.
- מקלידים את השאילתה בתיבה מקורות חיפוש ומקישים על Enter. אם השאילתה היא ביטוי רגולרי או שהיא צריכה להיות לא תלוית אותיות רישיות, לוחצים על התיבה המתאימה.
רשימות להתעלמות
אם יש לכם המון קבצים מסוג .git או קבצים מסוג README.md שמציפים את התוצאות, יכול להיות שהחיפוש בטקסט של הקבצים או הסינון לפי שמות הקבצים יהיה משעמם מאוד.
לכן הוספנו ל-Workspaces את התכונה 'רשימת התעלמות', כדי שתוכלו להחריג סוגים מסוימים של קבצים או תיקיות כשאתם צופים בסביבת העבודה ומחפשים בה.
כך אפשר להציג ולשנות את רשימת ההתעלמות המשותפת הנוכחית ב-Workspaces:
- פותחים את ההגדרות של כלי הפיתוח.
- לוחצים על Workspace.
- בקטע Common, בתיבה Folder exclude pattern, אפשר להציג או לערוך את התבניות.
אנחנו שולחים את תבניות החרגה הגלובליות הבאות כברירת מחדל:
ביטוי ה-regex הזה לא כולל מטא-נתונים מ-Git, SVN, Mercurial, קבצי פרויקטים מ-Eclipse ומ-IntelliJ, קבצים מסוג OS X DS_Store וקבצים בפח, ועוד כמה דברים שאפשר להתעלם מהם, כמו מטמון מ-Sass. כל התיקייה, כולל תיקיות הצאצאים, מוחרגת מממשק המשתמש כדי שלא תוצג בממשק המשתמש ולא תוצג בחיפוש הקבצים.
רשימות התעלמות ספציפיות לסביבת עבודה
כדי להגדיר חיפושים ספציפיים יותר, אפשר גם להחריג קבצים ותיקיות בסביבת העבודה הספציפית כדי לצמצם את העומס בחיפושים. גם תיקיות שהוחרגו לא יופיעו במאגר המקורות.
כדי להחריג תיקייה שלמה מסביבת העבודה, לוחצים לחיצה ימנית על התיקייה בחלונית Sources (מקורות) שמשמאל ובוחרים באפשרות Exclude Folder (החרגת תיקייה). כדי לראות את המיפויים ואת התיקיות שהוחרגו בתיקייה מסוימת בסביבת העבודה:
- פותחים את ההגדרות של DevTools.
- לוחצים על Workspace.
- מדגישים את התיקייה הרצויה.
- לוחצים על Edit (עריכה) וחלון Edit file system (עריכת מערכת הקבצים) מופיע. בחלון הזה אפשר להוסיף או להסיר מיפויים ו/או תיקיות מוחרגות.
