เทอร์มินัลเครื่องมือสำหรับนักพัฒนาเว็บคือส่วนขยายใหม่ของ Chrome สำหรับนักพัฒนาเว็บที่นำพลังของเทอร์มินัลมาใช้ในเบราว์เซอร์ หากคุณพบว่าตัวเองต้องสลับบริบทระหว่าง Chrome กับบรรทัดคำสั่งสำหรับงานต่างๆ เช่น การดึงเนื้อหา, การใช้ git, grunt, wget หรือ vim คุณอาจพบว่าส่วนขยายนี้ช่วยประหยัดเวลาได้


เหตุใดจึงควรใช้เทอร์มินัลในเบราว์เซอร์
ระหว่างการพัฒนา คุณอาจคุ้นเคยกับการใช้เครื่องมือหลายๆ อย่าง เช่น เครื่องมือแก้ไขข้อความสำหรับการเขียน เบราว์เซอร์สำหรับการทดสอบและการแก้ไขข้อบกพร่อง และเทอร์มินัลสำหรับการอัปเดตแพ็กเกจ การเคอร์ลิ่ง หรือแม้กระทั่งกระบวนการสร้างโดยใช้ Grunt

การต้องสลับบริบทระหว่างการพัฒนาเครื่องมืออาจทำให้เสียสมาธิและอาจนำไปสู่การด้อยประสิทธิภาพ ก่อนหน้านี้เราได้พูดถึงวิธี (สำหรับโปรเจ็กต์บางประเภท) ในการแก้ไขข้อบกพร่องและเขียนโค้ดภายในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome โดยตรงด้วยพื้นที่ทำงานโดยไม่ต้องออกจากเบราว์เซอร์

DevTools Terminal (โดย Dmitry Filimonov) ทำให้เรื่องราวเสร็จสมบูรณ์ โดยทำให้สามารถเขียนโค้ด แก้ไขข้อบกพร่อง และสร้างจากภายในหน้าต่างเดียวกันได้ คุณสามารถเข้าถึงแท็บ, Ctrl และสีต่างๆ ของ Git เพื่อทำให้รู้สึกคุ้นเคยกับเทอร์มินัลที่เคยใช้ในการทำงานประจำวัน
ขั้นตอนการทำงาน

เวิร์กโฟลว์ส่วนตัวของฉันสำหรับการเขียนใน Chrome จะมีลักษณะคล้ายๆ กันนี้:
- เทอร์มินัลเครื่องมือสำหรับนักพัฒนาเว็บใช้เพื่อ
git clone
ที่เก็บ GitHub,touch
ไฟล์ใหม่ หรือเรียกใช้yo (yeoman)
เพื่อสร้างแอป ถ้าฉันต้องการ ฉันสามารถเปิดเซิร์ฟเวอร์ใหม่เพื่อแสดงตัวอย่างแอปได้ด้วย - พื้นที่ทำงาน: แก้ไขและแก้ไขข้อบกพร่องของเว็บแอปภายใน Chrome หากฉันเปิดใช้เซิร์ฟเวอร์ไปก่อนหน้า ฉันสามารถแมปโปรเจ็กต์ที่อยู่ในเครื่องเข้ากับไฟล์เครือข่ายได้ ฉันสามารถใช้ Sass หรือ Never และให้การเปลี่ยนแปลงโปรเซสเซอร์ CSS ล่วงหน้าที่แมปกลับไปยังไฟล์ CSS ของฉัน
- เทอร์มินัลเครื่องมือสำหรับนักพัฒนาเว็บ: ตอนนี้ฉันสามารถกำหนดการควบคุมแหล่งที่มา ใช้ตัวจัดการแพ็กเกจ (npm, Bower) เพื่อดึงทรัพยากร Devend หรือเรียกใช้กระบวนการบิลด์ (Grunt, make) เพื่อสร้างเวอร์ชันที่มีการเพิ่มประสิทธิภาพของแอปเดียวกัน
- แม้ว่าจะต้องใช้เวลาสักครู่ในการทำความคุ้นเคยกับการจัดหน้าต่าง แต่ก็เป็นเรื่องดีที่สามารถทำสิ่งต่างๆ ที่ต้องการมากที่สุดจากภายในเบราว์เซอร์ได้

บริการติดตั้ง
ติดตั้งเทอร์มินัลเครื่องมือสำหรับนักพัฒนาเว็บได้จาก Chrome เว็บสโตร์ หากคุณเป็นผู้ใช้ Mac หรือ Linux เมื่อเพิ่มลงใน Chrome แล้ว ก็เพียง "ตรวจสอบองค์ประกอบ" หรือ Ctrl + Shift + I
เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ แล้วคุณจะสามารถเข้าถึงเครื่องมือดังกล่าวได้ผ่านแท็บ "เทอร์มินัล" ใหม่
ผู้ใช้ Windows จะต้องเชื่อมต่อส่วนขยายกับเทอร์มินัลของระบบโดยใช้พร็อกซี Node.js ในการตั้งค่านี้ ให้ติดตั้งโมดูล devtools-terminal
จาก NPM ดังนี้
npm install -g devtools-terminal
จากนั้นเปิดหน้าต่างบรรทัดคำสั่งใหม่และเรียกใช้ devtools-terminal
จากนั้นให้เปิดเครื่องมือสำหรับนักพัฒนาเว็บและในแท็บ "Terminal" ให้เชื่อมต่อกับเซิร์ฟเวอร์โดยใช้ตัวเลือกการกำหนดค่าเริ่มต้น คุณจะปรับแต่งพอร์ตและที่อยู่เพิ่มเติมได้หากจำเป็น

ข้อจำกัด
เทอร์มินัลเครื่องมือสำหรับนักพัฒนาเว็บมีข้อจำกัดบางประการที่ควรทราบ แอปยังไม่รองรับแท็บ หน้าต่างหลายหน้าต่าง หรือการเล่นประวัติการเข้าชม ซึ่งต่างจาก Terminal.app หรือ iTerm2 บน Mac อย่างไรก็ตาม คุณจะเปิดแท็บใหม่ของ Chrome ได้มากเท่าที่ต้องการ โดยแต่ละแท็บจะมีอินสแตนซ์เทอร์มินัลของเครื่องมือสำหรับนักพัฒนาเว็บเป็นของตัวเองได้ ซึ่งดำเนินการจากหน้าจอแอป Chrome ได้ดังนี้

ปัจจุบันส่วนขยายนี้ใช้ NPAPI ซึ่งจะถูกเลิกใช้ในช่วงปีหน้าเพื่อเปลี่ยนไปใช้ Native Messaging API แทน Dmitry Fillimonov ผู้เขียน DevTools Terminal วางแผนที่จะเลิกใช้ NPAPI เพื่อเปลี่ยนไปใช้ API นี้หรือ Native Client API ในอนาคตอันใกล้
บทสรุป
เทอร์มินัลของเครื่องมือสำหรับนักพัฒนาเว็บ (และส่วนขยายที่คล้ายกัน เช่น Auxilio) จะช่วยให้คุณหลีกเลี่ยงการสลับไปมาระหว่างเครื่องมือแก้ไข เบราว์เซอร์ และบรรทัดคำสั่งระหว่างการพัฒนาได้ ถึงแม้ว่าเทอร์มินัลในเบราว์เซอร์อาจไม่ใช่ถ้วยชาสำหรับทุกคน แต่คุณอาจพบว่าส่วนขยายเป็นส่วนเสริมที่มีประโยชน์สำหรับขั้นตอนการทำงานของคุณ และเราสนับสนุนให้คุณลองใช้งานแล้วดูว่าคุณถูกใจหรือไม่