DevTools Terminal คือส่วนขยายใหม่ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ที่จะนำประสิทธิภาพของเทอร์มินัลมาไว้ในเบราว์เซอร์ หากพบว่าตัวเองต้องสลับใช้บริบทระหว่าง Chrome กับบรรทัดคำสั่งสำหรับงานต่างๆ เช่น การดึงข้อมูลชิ้นงาน การใช้ git, grunt, wget หรือแม้แต่ vim คุณอาจพบว่าส่วนขยายนี้ช่วยประหยัดเวลาได้
เหตุผลที่ควรใช้เทอร์มินัลในเบราว์เซอร์
ในระหว่างการพัฒนา คุณอาจคุ้นเคยกับการใช้เครื่องมือต่างๆ เช่น เครื่องมือแก้ไขข้อความสำหรับการเขียน เบราว์เซอร์สำหรับการทดสอบและการแก้ไขข้อบกพร่อง และเทอร์มินัลสำหรับการอัปเดตแพ็กเกจ การส่งผ่านข้อมูลส่วนหัว หรือแม้แต่กระบวนการบิลด์โดยใช้ Grunt
การต้องสลับบริบทระหว่างเครื่องมือต่างๆ ในระหว่างการพัฒนาอาจทำให้เสียสมาธิและทําให้ทำงานอย่างไม่มีประสิทธิภาพ ก่อนหน้านี้เราได้พูดถึงวิธีแก้ไขข้อบกพร่องและเขียนโค้ดในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome โดยตรงโดยใช้ Workspaces (สำหรับโปรเจ็กต์บางประเภท) โดยไม่ต้องออกจากเบราว์เซอร์
เครื่องมือสำหรับนักพัฒนาเว็บเทอร์มินัล (โดย Dmitry Filimonov) ช่วยให้คุณเขียนโค้ด แก้ไขข้อบกพร่อง และสร้างจากในหน้าต่างเดียวกันได้ คุณจะมีสิทธิ์เข้าถึงแท็บ, Ctrl และแม้แต่สี Git ซึ่งทำให้รู้สึกคุ้นเคยกับเทอร์มินัลที่คุณเคยใช้ในเวิร์กโฟลว์ประจำวัน
ขั้นตอนการทำงาน
ตอนนี้เวิร์กโฟลว์ส่วนตัวของฉันสำหรับการเขียนใน Chrome มีลักษณะดังนี้
- เทอร์มินัล DevTools ใช้เพื่อ
git cloneที่เก็บ GitHub,touchไฟล์ใหม่ หรือเรียกใช้yo (yeoman)เพื่อสร้างแอป หากต้องการ ฉันจะเปิดเซิร์ฟเวอร์ใหม่เพื่อแสดงตัวอย่างแอปได้ด้วย - เวิร์กスペース: แก้ไขและแก้ไขข้อบกพร่องเว็บแอปใน Chrome หากเปิดเซิร์ฟเวอร์ไว้ก่อนหน้านี้ ฉันจะแมปโปรเจ็กต์ในเครื่องกับไฟล์เครือข่ายได้ ฉันสามารถใช้ Sass หรือ Less และแมปการเปลี่ยนแปลงใน CSS Preprocessor กลับไปยังไฟล์ CSS ได้
- เทอร์มินัล DevTools: ตอนนี้ฉันสามารถคอมมิตในการควบคุมแหล่งที่มา ใช้เครื่องมือจัดการแพ็กเกจ (npm, bower) เพื่อดึงข้อมูล Dependency หรือเรียกใช้กระบวนการบิลด์ (grunt, make) เพื่อสร้างแอปเดียวกันในเวอร์ชันที่เพิ่มประสิทธิภาพแล้ว
- แม้ว่าอาจใช้เวลาสักพักกว่าจะคุ้นเคยกับการจัดเรียงหน้าต่าง แต่ฉันก็รู้สึกดีที่ได้ดำเนินการส่วนใหญ่ที่ต้องการจากในเบราว์เซอร์
การติดตั้ง
คุณติดตั้ง DevTools Terminal ได้จาก Chrome เว็บสโตร์ หากคุณเป็นผู้ใช้ Mac หรือ Linux เมื่อเพิ่มลงใน Chrome แล้ว เพียง "ตรวจสอบองค์ประกอบ" หรือ Ctrl + Shift + I เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ และคุณจะเข้าถึงเครื่องมือดังกล่าวผ่านแท็บ "เทอร์มินัล" ใหม่ได้
ผู้ใช้ Windows จะต้องเชื่อมต่อส่วนขยายกับเทอร์มินัลของระบบโดยใช้พร็อกซี Node.js หากต้องการตั้งค่านี้ ให้ติดตั้งโมดูล devtools-terminal จาก npm โดยทำดังนี้
npm install -g devtools-terminal
จากนั้นเปิดหน้าต่างบรรทัดคำสั่งใหม่และเรียกใช้ devtools-terminal จากนั้นเปิดเครื่องมือสำหรับนักพัฒนาเว็บ และในแท็บ "เทอร์มินัล" ให้เชื่อมต่อกับเซิร์ฟเวอร์โดยใช้ตัวเลือกการกําหนดค่าเริ่มต้น คุณจะปรับแต่งพอร์ตและที่อยู่เพิ่มเติมได้หากจำเป็น
ข้อจำกัด
เทอร์มินัลของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์มีข้อจำกัดบางประการที่ควรทราบ ซึ่งแตกต่างจาก Terminal.app หรือ iTerm2 ใน Mac ตรงที่ไม่รองรับแท็บ หน้าต่างหลายรายการ หรือการเล่นประวัติ อย่างไรก็ตาม คุณสามารถเปิดแท็บ Chrome ใหม่กี่แท็บก็ได้ โดยแต่ละแท็บจะมีอินสแตนซ์ของเครื่องมือสำหรับนักพัฒนาเว็บในเทอร์มินัลเป็นของตัวเอง ซึ่งทำได้จากหน้าจอแอป Chrome
ปัจจุบันส่วนขยายนี้ใช้ NPAPI ซึ่งจะเลิกใช้งานในปีหน้าเพื่อเปลี่ยนไปใช้ Native Messaging API Dmitry Fillimonov ผู้เขียน DevTools Terminal วางแผนที่จะเลิกใช้ NPAPI และใช้ API นี้หรือ Native Client API แทนในอนาคตอันใกล้
สรุป
เทอร์มินัล DevTools (และส่วนขยายที่คล้ายกัน เช่น Auxilio) ช่วยให้คุณไม่ต้องสลับไปมาระหว่างเครื่องมือแก้ไข เบราว์เซอร์ และบรรทัดคำสั่งในระหว่างการพัฒนา แม้ว่าเทอร์มินัลในเบราว์เซอร์อาจไม่ใช่สิ่งที่ทุกคนต้องการใช้ แต่คุณอาจพบว่าส่วนขยายนี้ช่วยเสริมเวิร์กโฟลว์ของคุณได้ เราจึงขอแนะนำให้ลองใช้ดู