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

אדי אוסמאני
אדי אוסמאני
Twitter GitHub

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

DevTools Terminal הוא כלי מצוין לביצוע שינויים מהירים בשורת הפקודה.
DevTools Terminal הוא כלי שימושי לביצוע שינויים מהירים בשורת הפקודה מתוך Chrome בזמן העבודה באפליקציית האינטרנט.
שימוש ב-cURL בטרמינל של כלי הפיתוח.
אחרי השימוש ב-Copy as cURL בחלונית Network, אוכל להדביק בקלות את הפקודה המלאה ב-DevTools Terminal ולהריץ אותה.

למה להשתמש במסוף בדפדפן?

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

מריץ את Graunt ב-DevTools Terminal.
להריץ משימות build עם Graunt, בלי לצאת מהדפדפן.

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

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

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

תהליך העבודה

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

תהליך העבודה האישי שלי לעריכה ב-Chrome נראה עכשיו בערך כך:

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

התקנה

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

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

מסוף כלי הפיתוח תומך בהתאמה אישית של פרטי החיבור במהלך ההגדרה.

מגבלות

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

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

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

מסקנות

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