DevTools Terminal הוא תוסף חדש של כלי הפיתוח ל-Chrome שמאפשר לכם להשתמש בכוח של מסוף בשילוב עם הדפדפן. אם אתם צריכים לעבור בין Chrome לבין שורת הפקודה כדי לבצע משימות כמו הורדת נכסים, שימוש ב-git, grunt, wget או אפילו vim, התוסף הזה יכול לחסוך לכם זמן.
למה כדאי להשתמש במסוף בדפדפן?
במהלך הפיתוח, סביר להניח שאתם רגילים לעבוד עם כמה כלים שונים: עורך הטקסט לכתיבה, דפדפן לבדיקה ולניפוי באגים והמסוף לעדכון חבילות, ליצירת כותרות ב-curl או אפילו לתהליך build באמצעות Grunt.
הצורך לעבור בין כלים במהלך הפיתוח עלול להסיח את הדעת ולהוביל לחוסר יעילות. בעבר דיברנו על האופן שבו (בסוגי פרויקטים מסוימים) אפשר לנפות באגים ולכתוב קוד ישירות ב-Chrome DevTools באמצעות Workspaces, בלי לצאת מהדפדפן.
הכלי DevTools Terminal (של Dmitry Filimonov) משלים את התמונה הזו, ומאפשר לכתוב קוד, לנפות באגים ולבנות מתוך אותו חלון. יש לכם גישה למקשות Tab, Ctrl ואפילו לצבעים של Git, כך שהטרמינל מרגיש מוכר כמו הטרמינל שבו אתם משתמשים בתהליך העבודה היומי.
תהליך עבודה
תהליך העבודה האישי שלי ליצירת תוכן ב-Chrome נראה עכשיו כך:
- DevTools Terminal משמש ל
git cloneמאגר GitHub, לtouchקובץ חדש או להרצה שלyo (yeoman)כדי ליצור אפליקציה. אם רוצים, אפשר גם להפעיל שרת חדש כדי להציג תצוגה מקדימה של האפליקציה - מרחבי עבודה: עריכה ותיקון באגים באפליקציית האינטרנט שלי ב-Chrome. אם הפעלתי שרת מקודם, אוכל למפות את הפרויקט המקומי שלי לקבצים ברשת. אפשר להשתמש ב-Sass או ב-Less ולמפות את השינויים במעבד ה-CSS חזרה לקובצי ה-CSS.
- מסוף DevTools: עכשיו אפשר לבצע השמירה במערכת בקרת הגרסאות, להשתמש במנהל חבילות (npm, bower) כדי להוריד יחסי תלות או להריץ את תהליך ה-build (grunt, make) כדי ליצור גרסה אופטימיזציה של אותה אפליקציה.
- יכול להיות שייקח קצת זמן להתרגל לסדר החלונות, אבל נחמד לדעת שאפשר לבצע את רוב הפעולות שדרושות לי מתוך הדפדפן.
התקנה
אפשר להתקין את DevTools Terminal מחנות האינטרנט של Chrome. משתמשים ב-Mac או ב-Linux יכולים פשוט ללחוץ על 'בדיקת רכיב' או על Ctrl + Shift + I כדי לפתוח את כלי הפיתוח אחרי שמוסיפים אותו ל-Chrome. לאחר מכן, אפשר לגשת אליו דרך הכרטיסייה החדשה 'מסוף'.
משתמשי Windows יצטרכו לחבר את התוסף לטרמינל המערכת באמצעות שרת proxy של Node.js. כדי להגדיר את זה, מתקינים את המודול devtools-terminal מ-npm:
npm install -g devtools-terminal
לאחר מכן פותחים חלון חדש של שורת הפקודה ומריצים את הפקודה devtools-terminal. בשלב הבא, פותחים את כלי הפיתוח ובכרטיסייה Terminal מתחברים לשרת באמצעות אפשרויות התצורה שמוגדרות כברירת מחדל. אם צריך, תוכלו להתאים אישית את היציאה והכתובת.
מגבלות
ל-DevTools Terminal יש כמה מגבלות שחשוב לשים לב אליהן. בניגוד ל-Terminal.app או ל-iTerm2 ב-Mac, עדיין אין תמיכה בכרטיסיות, בכמה חלונות או בהפעלת היסטוריה. עם זאת, אתם יכולים לפתוח כמה כרטיסיות חדשות של Chrome שתרצו, וכל אחת מהן יכולה לכלול מכונה משלה של מסוף DevTools. אפשר לעשות זאת במסך 'אפליקציות Chrome':
התוסף הזה מסתמך כרגע על NPAPI, שאנחנו מוציאים משימוש במהלך השנה הבאה לטובת Native Messaging API. דמיטרי פילימונוב (Dmitry Fillimonov), המחבר של DevTools Terminal, מתכנן לעבור בעתיד הקרוב מ-NPAPI ל-API הזה או ל-Native Client API.
מסקנות
באמצעות מסוף DevTools (ותוספים דומים, כמו Auxilio) תוכלו להימנע מהמעבר שוב ושוב בין העורך, הדפדפן ושורת הפקודה במהלך הפיתוח. יכול להיות שטרמינל בדפדפן לא יתאים לכולם, אבל יכול להיות שהתוסף יעזור לכם לשפר את תהליך העבודה. מומלץ לנסות אותו ולראות אם הוא מתאים לכם.