טרמינל של כלי פיתוח

Addy Osmani

DevTools Terminal הוא תוסף חדש של כלי הפיתוח ל-Chrome שמביא את העוצמה של הטרמינל לדפדפן. אם תקל על עצמך לעבור בין Chrome לשורת הפקודה כדי לבצע משימות כמו: שליפת נכסים, שימוש ב-Git, נהיגת נתונים, wget או אפילו vim – יכול להיות שהתוסף הזה יחסוך לך זמן.

המסוף של כלי הפיתוח יעיל לביצוע שינויים מהירים בשורת הפקודה מתוך Chrome תוך כדי עבודה באפליקציית האינטרנט.

אחרי שמשתמשים באפשרות העתקה בתור cURL בחלונית הרשת, אפשר להדביק בקלות את הפקודה המלאה בטרמינל של כלי הפיתוח ולהריץ אותה.

למה כדאי להשתמש בטרמינל בדפדפן?

במהלך הפיתוח, סביר להניח שאתם רגילים לעבוד עם כמה כלים שונים: עורך הטקסט שלכם לכתיבת טקסט, דפדפן לבדיקה וניפוי באגים והטרמינל לעדכון חבילות, כותרות מתווספות ואפילו תהליך build באמצעות Graunt.

הרצת משימות build באמצעות Graunt בלי לצאת מהדפדפן.

המעבר בין הכלים במהלך הפיתוח יכול להסיח את הדעת ועלול להוביל לחוסר יעילות. בעבר דיברנו על האופן שבו (בפרויקטים מסוגים מסוימים) אפשר לנפות באגים ולכתוב קוד ישירות בתוך כלי הפיתוח ל-Chrome באמצעות סביבות עבודה בלי לצאת מהדפדפן.

אפשר גם לבצע תהליך עבודה מלא של Git. מעולה להבדלים ב-Git אחרי הכתיבה ב-Workspace.

המסוף של DevTools (מאת דמיטרי פילימונוב) משלים את הסיפור הזה ומאפשר לתכנת, לנפות באגים ולבנות מתוך אותו חלון. מקבלים גישה למקשים Tab, Ctrl ואפילו צבעי Git שתרגישו להכיר את הטרמינל שבו השתמשתם בו בתהליכי העבודה היומיומיים.

תהליך העבודה

מתחילים פרויקטים חדשים עם שכפול git, yeoman או כל כלי אחר שאפשר לגשת אליו דרך הטרמינל.

תהליך העבודה האישי שלי ליצירת פוסטים ב-Chrome נראה קצת כך:

• אפשר להשתמש במסוף של כלי פיתוחgit cloneבמאגר ב-GitHub,touchבקובץ חדש או ב-yo (yeoman) כדי ליצור אפליקציה. אם רוצים, אפשר להפעיל שרת חדש כדי להציג תצוגה מקדימה של האפליקציה.
• סביבות עבודה: עריכה וניפוי באגים באפליקציית האינטרנט שלי ב-Chrome. אם הפעלתי שרת מוקדם יותר, אפשר למפות את הפרויקט המקומי לקובצי הרשת שלי. אני יכול להשתמש ב-Sass או פחות, ולמפות את השינויים שלי במעבד מידע מקדים ל-CSS אל קובצי ה-CSS שלי.
• מסוף כלי פיתוח: עכשיו אפשר להתחייב לבקרת מקור, להשתמש במנהל חבילות (npm, באוור) כדי להסיר יחסי תלות או להריץ את תהליך ה-build שלי (grunt, make) כדי ליצור גרסה משופרת של אותה האפליקציה.
• אמנם יכול לקחת זמן להתרגל לסידור החלונות, אבל כיף להיות מסוגל להשיג את רוב מה שצריך מתוך הדפדפן.

הצגת רשימה של שמות הקבצים בספריית העבודה הנוכחית באמצעות ls. הצגה חזותית של ספריות מחוץ ל-Workspace.

התקנה

אפשר להתקין את הטרמינל של כלי הפיתוח מחנות האינטרנט של Chrome. אם אתם משתמשים ב-Mac או ב-Linux, אחרי שמוסיפים אותו ל-Chrome, אפשר פשוט לבצע 'בדיקת רכיב' או Ctrl + Shift + I כדי לפתוח את כלי הפיתוח, ולגשת אליהם דרך הכרטיסייה החדשה Terminal. משתמשי Windows יצטרכו לחבר את התוסף למסוף המערכת באמצעות שרת proxy של Node.js. כדי לבצע את ההגדרה הזו, מתקינים את המודול devtools-terminal מ-npm: npm install -g devtools-terminal

לאחר מכן פותחים חלון חדש של שורת הפקודה ומריצים את devtools-terminal. בשלב הבא, פותחים את כלי הפיתוח ובכרטיסייה "Terminal", מתחברים לשרת באמצעות אפשרויות ההגדרה שמוגדרות כברירת מחדל. תהיה לך אפשרות להתאים אישית עוד יותר את היציאה והכתובת במקרה הצורך.

מגבלות

יש כמה מגבלות שכדאי לציין במסוף DevTools. בניגוד ל-Terminal.app או iTerm2 ב-Mac, אתם עדיין לא תומכים בכרטיסיות, בחלונות מרובים או בהפעלת היסטוריה. עם זאת, אפשר לפתוח כמה כרטיסיות חדשות ב-Chrome שרוצים, ולכל אחת מהן יכולה להיות מופע משלה של Terminal Terminal. ניתן לעשות זאת מהמסך 'אפליקציות Chrome':

כרגע, התוסף תומך גם בעיצוב הבהיר שמוגדר כברירת מחדל וגם בעיצוב כהה.

התוסף הזה מבוסס כרגע על טכנולוגיית NPAPI, שהוצאה משימוש במהלך השנה הבאה לטובת Native Messaging API. דימיטרי פילימונוב, מחבר הטרמינל של כלי הפיתוח, מתכנן להפסיק את השימוש ב-NPAPI לטובת ה-API הזה או עדיף להשתמש ב-Native Client API בעתיד הקרוב.

מסקנות

הטרמינל של כלי הפיתוח (ותוספים שדומים לו כמו Auxilio) יכול לעזור לכם להימנע ממעברים בין העורך, הדפדפן ושורת הפקודה במהלך הפיתוח. אומנם טרמינל בדפדפן לא תמיד מעניין את כולם, אבל התוסף יכול להשלים את תהליך העבודה שלכם. אנחנו ממליצים לכם לנסות אותו ולראות איך הוא מוצא חן בעיניכם.