เทอร์มินัลสำหรับเครื่องมือสำหรับนักพัฒนาเว็บ

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

เหตุใดจึงใช้เทอร์มินัลในเบราว์เซอร์

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

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

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

ขั้นตอนการทำงาน

เวิร์กโฟลว์ส่วนตัวสำหรับการเขียนใน Chrome มีลักษณะเช่นนี้

• เทอร์มินัล DevTools ใช้เพื่อgit cloneที่เก็บ GitHub, touch ไฟล์ใหม่ หรือเรียกใช้ yo (yeoman) เพื่อสร้างแอป ฉันขอเปิดเซิร์ฟเวอร์ใหม่เพื่อแสดงตัวอย่างแอปได้ด้วย
• พื้นที่ทำงาน: แก้ไขและแก้ไขข้อบกพร่องของเว็บแอปใน Chrome ถ้าฉันเปิดตัวเซิร์ฟเวอร์ไปก่อนหน้านี้ ฉันจะแมปโปรเจ็กต์ในเครื่องกับไฟล์เครือข่ายได้ ฉันใช้ Sass หรือ Less แมปการเปลี่ยนแปลงตัวประมวลผล CSS กลับไปยังไฟล์ CSS ได้
• เทอร์มินัล DevTools: ตอนนี้ฉันสามารถคอมมิตการควบคุมแหล่งที่มา ใช้ตัวจัดการแพ็กเกจ (npm, boer) เพื่อดึงทรัพยากร Dependency ลง หรือเรียกใช้กระบวนการบิลด์ของฉัน (อัดเสียง สร้าง) เพื่อสร้างแอปเดียวกันในเวอร์ชันที่เพิ่มประสิทธิภาพ
• แม้จะใช้เวลานานในการทำความคุ้นเคยกับการจัดเรียงหน้าต่าง แต่การได้ทำสิ่งที่ฉันต้องการได้ส่วนใหญ่ในเบราว์เซอร์ก็เป็นเรื่องดี

การติดตั้ง

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

จากนั้นเปิดหน้าต่างบรรทัดคำสั่งใหม่และเรียกใช้ devtools-terminal จากนั้นเปิด DevTools และในแท็บ "Terminal" ให้เชื่อมต่อกับเซิร์ฟเวอร์โดยใช้ตัวเลือกการกำหนดค่าเริ่มต้น คุณจะปรับแต่งการโอนและที่อยู่เพิ่มเติมได้หากจำเป็น

ข้อจำกัด

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

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

บทสรุป

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