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

Addy Osmani

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

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

หลังจากใช้คัดลอกเป็น cURL ในแผงเครือข่าย ฉันสามารถวางคำสั่งที่สมบูรณ์ลงในเทอร์มินัลเครื่องมือสำหรับนักพัฒนาเว็บและเรียกใช้ได้อย่างง่ายดาย

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

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

เรียกใช้งานบิลด์ด้วย Grunt โดยไม่ต้องออกจากเบราว์เซอร์

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

นอกจากนี้ ยังเวิร์กโฟลว์ของ Git ที่สมบูรณ์ได้ด้วย เหมาะสำหรับ Git Diff หลังจากเขียนใน Workspace

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

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

เริ่มโปรเจ็กต์ใหม่ด้วย git clone, yeoman หรือเครื่องมืออื่นๆ ที่เข้าถึงได้ผ่านเทอร์มินัล

เวิร์กโฟลว์ส่วนตัวของฉันสำหรับการเขียนใน Chrome จะมีลักษณะคล้ายๆ กันนี้:

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

แสดงชื่อไฟล์ในไดเรกทอรีการทำงานปัจจุบันโดยใช้ ls เหมาะอย่างยิ่งสำหรับการแสดงภาพไดเรกทอรีที่อยู่นอก Workspace

บริการติดตั้ง

ติดตั้งเทอร์มินัลเครื่องมือสำหรับนักพัฒนาเว็บได้จาก 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) จะช่วยให้คุณหลีกเลี่ยงการสลับไปมาระหว่างเครื่องมือแก้ไข เบราว์เซอร์ และบรรทัดคำสั่งระหว่างการพัฒนาได้ ถึงแม้ว่าเทอร์มินัลในเบราว์เซอร์อาจไม่ใช่ถ้วยชาสำหรับทุกคน แต่คุณอาจพบว่าส่วนขยายเป็นส่วนเสริมที่มีประโยชน์สำหรับขั้นตอนการทำงานของคุณ และเราสนับสนุนให้คุณลองใช้งานแล้วดูว่าคุณถูกใจหรือไม่