הכלים למפתחים ב-Chrome פועלים במהירות, ורצינו להסב את תשומת לבכם לפונקציות ושיפורים חדשות שהצגנו בכמה רכיבים. לסיום, נדבר על כמה שינויים בממשק המשתמש, על יצירת פרופילים של JS ברזולוציה גבוהה ועל תכונות חדשות של סביבות העבודה.
- עכשיו הפרופיילינג ברזולוציה גבוהה מגיע לדיוק של 0 .1 אלפית שנייה
- סרגלי הכלים עלו לחלק העליון של כלי הפיתוח, והכלי Overrides הועברו לחלונית ההזזה במסוף
- נוספו ל-Workspace כמה תכונות לתמיכה בהוספה, בהסרה או בחיפוש של קבצים
יצירת פרופילים ברזולוציה גבוהה
פרופיל המעבד (CPU) הוא תכונה שימושית למדי שמאפשרת לראות עד כמה JavaScript יעיל. בנוסף לתצוגות המסורתיות של הפרופיל, השקנו בקיץ הזה תרשים תרשים (Flame Chart), שמייצג באופן חזותי את עיבוד ה-JavaScript של דף לאורך זמן. אפשר להשתמש בה כדי לראות בקלות את העומק של מחסנית השיחות ואת משך העיבוד של פונקציות ספציפיות.
עד לאחרונה, גם בתרשים הכבד (מלמעלה למטה) ותרשים העץ (מלמעלה למטה) המסורתיים, וגם בתרשים הלהבות, הציגו תהליכים עד לרמת דיוק של אלפית שנייה בלבד. זה בסדר, לרוב האפליקציות. אבל אם אתם עובדים על משהו שבו המהירות באמת חשובה בממשק המשתמש, כמו משחק - הרזולוציה של אלפית שנייה עשויה להיות נמוכה מדי מכדי לקבל תוצאות משמעותיות ביחס למה שגורם לאתר להיות איטי או בממשק המשתמש שנראה איטי. כדי להפעיל פרופיילינג ברזולוציה גבוהה (רק Canary בשלב זה):
- פותחים את ההגדרות של כלי הפיתוח.
- בכרטיסייה General, בקטע Profiler, מפעילים את פרופיל המעבד (CPU) ברזולוציה גבוהה.
הנה דוגמה לתרשים להבות שמופיע בפרופיל רגיל וברזולוציה גבוהה, שבו אנחנו טוענים את דף הבית של HTML5Rocks.com:
ברזולוציה רגילה של יצירת פרופילים, זמן העיבוד תמיד יעוגל לאלפית השנייה הבאה, כך שתהליך שנמשך רק 0.1 אלפיות השנייה או פחות עדיין מדווח כ-1.0 אלפיות השנייה, ויכול להיות שתהליכים אחרים לא יוצגו בכלל במקבץ השיחות.
לפרופיל ברזולוציה גבוהה יש תקורה גדולה במכונה הווירטואלית של JavaScript, ולכן היא מושבתת כברירת מחדל. זה בהחלט נראה מגניב יותר מרזולוציה רגילה של יצירת פרופילים, אבל אנחנו ממליצים להשתמש בה רק אם אתם ממש צריכים את הדיוק.
שיפורים בממשק המשתמש של Devtools
אמנם תמיד אנחנו משיקים דברים חדשים ב-Canary, אבל רצינו להסב את תשומת לבכם לכמה שינויים חשובים בממשק המשתמש: לחצנים שעולים לחלק העליון של ממשק המשתמש באופן כללי, חלונית הניווט וחלוניות המידע בציר הזמן והעברת המיקום של Overrides לחלונית ההזזה בקונסולה.
קודם נסתכל על המקום שממנו אנחנו מגיעים. בגלל שאנחנו בכל זאת מדברים על ציר הזמן, אנסה להרוג את שתי הציפורים הראשונות באמצעות זוג אחד של צילומי מסך. כך נראה ציר הזמן ב-Chrome (היציב) כרגע:
כך נראה ציר הזמן עכשיו.
שימו לב לדברים הבאים:
- סרגלי הכלים והלחצנים נמצאים כולם בחלק העליון של המסך עכשיו, גם לציר הזמן הספציפי בצד ימין וגם לסרגלים הכלליים של כלי הפיתוח בצד שמאל.
- המבנה של רשומות ציר הזמן מופיע עכשיו בחלונית שבצד ימין, ואפשר אפילו להשתמש במקלדת כדי לגלול ביניהן. בנוסף לשימוש במקשים למעלה ולמטה כדי לגלול למעלה ולמטה, אפשר גם להשתמש במקשים שמאלה וימינה כדי לפתוח ולסגור רשומות בתוך רשומות.
- פרטי השעה מוצגים בחלונית משמאל, עבור כל רשומה שבחרתם. (אפשר גם להעביר את העכבר מעל רשומות אחרות כדי לראות את הפרטים שלהן).
עכשיו נסתכל על חלונית ההזזה של המסוף. כדי לפתוח את חלונית ההזזה של המסוף, מקישים על
Escape מתוך כלי הפיתוח או לוחצים על לחצן חלונית ההזזה במסוף
וחלונית ההזזה של המסוף מופיעה מלמטה.
כברירת מחדל, הכרטיסיות מסוף וחיפוש יופיעו שם. כדי להיכנס לפונקציונליות שנקראה בעבר Overrides, פותחים את ההגדרות של כלי הפיתוח ומסמנים את התיבה ליד האפשרות 'הצגת התצוגה 'אמולציה' בחלונית ההזזה במסוף'. סוגרים את תיבת ההגדרות, ובחלונית ההזזה של המסוף תופיע הכרטיסייה אמולציה, כמו בצילום המסך כאן:
שם תוכלו לבצע את כל האמולציה שלכם.
הסיבה לשינוי הזה היא שבעבר הייתם צריכים להיכנס ולצאת מ'הגדרות' כדי לשנות את ביטולי האמולציה, ואז לחזור אחורה ולהציג את הדף. עכשיו אפשר לשנות את הגדרות ההדמיה לשנות ועדיין לבצע מניפולציות על הסגנונות.
סביבות עבודה משופרות
ספציפית, סביבות העבודה הן פיצ'ר שיכול לפשט קצת את תהליך העבודה בעבודה, אבל עדיין לא נהנית כמעט במידה מספקת. במקום להתנסות עם סביבות עבודה ולבצע שינויים בכלי הפיתוח, ואתם צריכים להעתיק ולהדביק את השינויים בחזרה לקובצי המקור, אפשר לבצע שינויים בכלי הפיתוח, להציג אותם בדפדפן ולשמור אותם בגרסה מקומית קבועה של הקבצים – והכל בלי לצאת מ-Chrome.
אם עדיין לא קראת את המאמר הכלים למפתחים ב-Chrome Revolutions 2013, מומלץ לעיין בו ולאחר מכן לחזור לכאן כדי ללמוד איך שיפרנו את התכונות האלה בחודשים האחרונים.
קל יותר להוסיף קבצים
בזמן שבמאמר בנושא Revolutions 2013, יצירת סביבת עבודה חדשה הייתה צריכה להוסיף את התיקייה לסביבות העבודה ולאחר מכן למפות את התיקייה למשאב רשת. הפכנו את התהליך הזה לשלב אחד פשוט: לוחצים לחיצה ימנית בחלונית הימנית על 'מקורות' ובוחרים באפשרות הוספת תיקייה ל-Workspace. פעולה זו תציג לכם תיבת דו-שיח של קובץ שבה תוכלו לבחור תיקייה חדשה להוספה לסביבות העבודה. (התיקייה לא מוסיפה את התיקייה המודגשת לסביבות העבודה).
יצירה והסרה של קבצים
כבר עכשיו אפשר להוסיף קבצים חדשים לספרייה המקומית שמשמשת אותך לסביבות עבודה. פשוט לוחצים לחיצה ימנית על תיקייה בחלונית 'מקורות' השמאלית ובוחרים באפשרות קובץ חדש.
אתם יכולים גם להסיר קבצים מתוך סביבות העבודה. לחצו לחיצה ימנית על קובץ בחלונית 'מקורות' השמאלית ובחרו באפשרות מחיקת קובץ.
אפשר גם לשכפל קובץ על ידי בחירה באפשרות עותק כפול.
רענון
עכשיו, אחרי שתוכלו ליצור קבצים חדשים (או למחוק קבצים) ישירות בסביבות עבודה, גם ספריית המקורות תרענן באופן אוטומטי את הקבצים החדשים ותציג אותם באופן אוטומטי. אם לא, תמיד אפשר ללחוץ לחיצה ימנית על תיקייה ולבחור באפשרות רענון מהתפריט הקופץ כדי לאלץ רענון.
זו אפשרות שימושית גם אם שיניתם את הקבצים שפותחים בכלי עריכה אחר ורוצים שהשינויים יופיעו בכלי הפיתוח.
חיפוש בכל הקבצים
שיפרנו את הממשק לחיפוש בין קבצים, ועכשיו אפשר גם לחפש מחרוזות בכל הקבצים בסביבת העבודה וגם בכל הקבצים שנטענו בכלי הפיתוח. תוכלו לחפש מחרוזת או ביטוי רגולרי, ואנחנו מתאימים כל אירוע בכל קובץ או דף. כדי לחפש כמה קבצים ב-Workspaces (כרגע ב-Canary):
- כדי לפתוח את חלונית ההזזה של המסוף, מקישים על מקש Escape, ואז לוחצים על הכרטיסייה חיפוש לצד מסוף כדי לפתוח את חלון החיפוש.
או
מקישים על Ctrl + Shift + F (Cmd + Opt + F ב-Mac) כדי לפתוח את חלון החיפוש.
- מקלידים את השאילתה בתיבה מקורות חיפוש ומקישים על Enter. אם השאילתה היא ביטוי רגולרי או שהיא צריכה להיות לא תלוית אותיות רישיות, לחץ על התיבה המתאימה.
רשימות התעלמות
חיפוש בטקסט של קבצים או סינון לפי שמות קבצים עלול להיות מסובך מאוד אם יש לכם המון קובצי git או קובצי README.md שעומסים על התוצאות.
לכן הוספנו לסביבות העבודה את התכונה של רשימת קטעי הקוד להתעלמות, כדי שתוכלו להחריג תיקיות או סוגי קבצים מסוימים כשאתם מציגים את סביבת העבודה ומחפשים בה.
כדי לראות ולשנות את רשימת ההתעלמות הנוכחית המשותפת ב-Workspace:
- פותחים את ההגדרות של כלי הפיתוח.
- לוחצים על סביבת עבודה.
- בקטע נפוצות, בתיבה דפוס אי הכללה של תיקייה, אפשר להציג ו/או לערוך את הדפוסים.
אנחנו שולחים את המוצרים עם דפוסי ההחרגה הגלובליים הבאים שמוגדרים כברירת מחדל:
הביטוי הרגולרי הזה לא כולל מטא-נתונים מ-Git, SVN, Mercurial, קובצי פרויקט מקובצי Eclipse ו-IntelliJ, OS X DS_Store ו-Trash, ועוד כמה דברים נוספים שכדאי להתעלם מהם, כמו מטמון מ-Sass. התיקייה כולה, כולל ילדים, לא נכללת בממשק המשתמש כדי שלא יופיעו בממשק המשתמש ולא יופיעו כשמבצעים חיפוש בקבצים.
רשימות התעלמות ספציפיות ל-Workspace
כדי להיות ספציפיים יותר, אפשר גם להחריג קבצים ותיקיות בסביבת העבודה הספציפית כדי למנוע עומס בחיפושים. התיקיות שלא נכללו לא יופיעו גם בספריית המקורות.
כדי להחריג תיקייה שלמה מסביבת העבודה, לוחצים לחיצה ימנית על התיקייה בחלונית 'מקורות' שמימין ובוחרים באפשרות Exclude Folder (החרגת התיקייה). כדי לראות את המיפויים ואת התיקיות המוחרגים לתיקייה נתונה של סביבת העבודה:
- פותחים את ההגדרות של כלי הפיתוח.
- לוחצים על סביבת עבודה.
- מדגישים את התיקייה הרצויה.
- לוחצים על עריכה והחלון 'עריכת מערכת הקבצים' מופיע. ניתן להוסיף או להסיר מיפויים ו/או תיקיות שהוחרגו מהחלון הזה.
