DevTools Terminal là một tiện ích mới của Công cụ của Chrome cho nhà phát triển, mang đến sức mạnh của thiết bị đầu cuối cho trình duyệt của bạn. Nếu từng phải chuyển đổi ngữ cảnh giữa Chrome và dòng lệnh cho các tác vụ như: tải các thành phần xuống, sử dụng git, grunt, wget hoặc thậm chí là vim, thì bạn có thể thấy tiện ích này là một công cụ hữu ích giúp tiết kiệm thời gian.
Tại sao nên sử dụng thiết bị đầu cuối trong trình duyệt?
Trong quá trình phát triển, có thể bạn đã quen với việc sử dụng một số công cụ khác nhau: trình soạn thảo văn bản để viết, trình duyệt để kiểm thử và gỡ lỗi, cũng như thiết bị đầu cuối để cập nhật gói, tiêu đề cuộn hoặc thậm chí là quy trình xây dựng bằng Grunt.
Việc phải chuyển đổi ngữ cảnh giữa các công cụ trong quá trình phát triển có thể gây mất tập trung và dẫn đến tình trạng kém hiệu quả. Trước đây, chúng ta đã thảo luận về cách (đối với một số loại dự án) bạn có thể gỡ lỗi và viết mã ngay bên trong Chrome DevTools bằng cách sử dụng Workspaces mà không cần rời khỏi trình duyệt.
Công cụ dòng lệnh DevTools (của Dmitry Filimonov) hoàn thành câu chuyện đó, cho phép bạn lập trình, gỡ lỗi và tạo bản dựng từ bên trong cùng một cửa sổ. Bạn có quyền truy cập vào thẻ, ctrl và thậm chí là màu Git, giúp bạn cảm thấy quen thuộc với dòng lệnh mà bạn thường sử dụng trong quy trình làm việc hằng ngày.
Luồng công việc
Quy trình làm việc cá nhân của tôi để soạn thảo trong Chrome hiện có dạng như sau:
- DevTools Terminal sử dụng nó để
git clonekho lưu trữ GitHub,touchtệp mới hoặc chạyyo (yeoman)để tạo ứng dụng. Nếu muốn, tôi cũng có thể khởi chạy một máy chủ mới để xem trước ứng dụng - Workspaces: chỉnh sửa và gỡ lỗi ứng dụng web của tôi bên trong Chrome. Nếu đã khởi chạy máy chủ trước đó, tôi có thể liên kết dự án cục bộ với các tệp mạng. Tôi có thể sử dụng Sass hoặc Less và ánh xạ các thay đổi của trình xử lý trước CSS trở lại các tệp CSS.
- DevTools Terminal: Giờ đây, tôi có thể cam kết kiểm soát nguồn, sử dụng trình quản lý gói (npm, bower) để tải các phần phụ thuộc xuống hoặc chạy quy trình xây dựng (grunt, make) để tạo phiên bản được tối ưu hoá của cùng một ứng dụng.
- Mặc dù có thể mất một chút thời gian để làm quen với cách sắp xếp cửa sổ, nhưng tôi rất vui khi có thể thực hiện hầu hết những gì mình cần ngay trong trình duyệt.
Cài đặt
Bạn có thể cài đặt DevTools Terminal từ Cửa hàng Chrome trực tuyến. Nếu là người dùng Mac hoặc Linux, sau khi thêm công cụ này vào Chrome, bạn chỉ cần "Kiểm tra phần tử" hoặc Ctrl + Shift + I để mở DevTools và bạn sẽ có thể truy cập vào công cụ này thông qua thẻ "Terminal" (Máy cuối) mới.
Người dùng Windows sẽ cần kết nối tiện ích với thiết bị đầu cuối hệ thống bằng proxy Node.js. Để thiết lập chế độ này, hãy cài đặt mô-đun devtools-terminal từ npm:
npm install -g devtools-terminal
Sau đó, hãy mở một cửa sổ dòng lệnh mới và chạy devtools-terminal. Tiếp theo, hãy mở DevTools và trong thẻ "Terminal" (Máy cuối), hãy kết nối với máy chủ bằng các tuỳ chọn cấu hình mặc định. Bạn có thể tuỳ chỉnh thêm cổng và địa chỉ nếu cần.
Các điểm hạn chế
Giao diện dòng lệnh DevTools có một số hạn chế đáng chú ý. Không giống như Terminal.app hoặc iTerm2 trên máy Mac, ứng dụng này chưa hỗ trợ thẻ, nhiều cửa sổ hoặc phát nhật ký. Tuy nhiên, bạn có thể mở bao nhiêu thẻ mới của Chrome tuỳ ý, mỗi thẻ có thể có một phiên bản Terminal của DevTools riêng. Bạn có thể thực hiện việc này trên màn hình Ứng dụng Chrome:
Tiện ích này hiện dựa vào NPAPI. API này sẽ ngừng hoạt động trong năm tới và thay vào đó là API nhắn tin gốc. Tác giả Dmitry Fillimonov của DevTools Terminal dự định sẽ chuyển từ NPAPI sang API này hoặc API ứng dụng gốc trong tương lai gần.
Kết luận
Giao diện dòng lệnh DevTools (và các tiện ích tương tự như Auxilio) có thể giúp bạn tránh phải chuyển đổi qua lại giữa trình chỉnh sửa, trình duyệt và dòng lệnh trong quá trình phát triển. Mặc dù không phải ai cũng thích sử dụng thiết bị đầu cuối trong trình duyệt, nhưng bạn có thể thấy tiện ích này là một phần bổ sung hữu ích cho quy trình làm việc của mình. Bạn nên dùng thử để xem mình có thích tiện ích này không!