Thiết bị đầu cuối cho Công cụ cho nhà phát triển

Addy Osmani

Twitter GitHub

Thiết bị đầu cuối của công cụ cho nhà phát triển là một tiện ích mới của Công cụ của Chrome cho nhà phát triển mang lại nguồn lực của thiết bị đầu cuối cho trình duyệt của bạn. Nếu bạn muốn chuyển đổi ngữ cảnh giữa Chrome và dòng lệnh cho các tác vụ như: kéo xuống các thành phần, sử dụng git, grunt, wget hoặc thậm chí vim - bạn có thể thấy tiện ích này là một trình tiết kiệm thời gian hữu ích.

Thiết bị đầu cuối DevTools rất hữu ích để chỉnh sửa nhanh dòng lệnh từ bên trong Chrome khi đang làm việc trên ứng dụng web của bạn.

Sau khi sử dụng tính năng Sao chép dưới dạng cURL trong Bảng điều khiển mạng, tôi có thể dễ dàng dán lệnh hoàn chỉnh vào Thiết bị đầu cuối cho nhà phát triển và chạy lệnh đó.

Tại sao nên sử dụng cửa sổ dòng lệnh trong trình duyệt?

Trong quá trình phát triển, bạn có thể đã quen làm việc với một số công cụ: trình chỉnh sửa văn bản để biên soạn, trình duyệt để thử nghiệm và gỡ lỗi và thiết bị đầu cuối để cập nhật gói, cuộn tiêu đề hoặc thậm chí là quy trình xây dựng sử dụng Grunt.

Chạy các tác vụ xây dựng bằng Grunt mà không phải rời khỏi trình duyệt.

Việc phải thay đổi bối cảnh giữa các công cụ trong quá trình phát triển có thể gây phân tâm và dẫn đến kém hiệu quả. Trước đây, chúng ta đã nói về cách (đối với một số loại dự án nhất định) bạn có thể gỡ lỗi và soạn mã ngay bên trong Công cụ của Chrome cho nhà phát triển bằng Không gian làm việc mà không cần rời khỏi trình duyệt.

Bạn cũng có thể thiết lập quy trình git hoàn chỉnh. Thật tuyệt với git diff sau khi biên soạn trong Workspace.

Thiết bị cho nhà phát triển (của Dmitry Filimonov) hoàn thành câu chuyện đó, giúp bạn có thể lập trình, gỡ lỗi và xây dựng từ bên trong cùng một cửa sổ. Bạn có quyền sử dụng thẻ, ctrl và thậm chí cả màu Git để cảm thấy quen thuộc với thiết bị đầu cuối mà bạn thường sử dụng trong quy trình làm việc hàng ngày của mình.

Quy trình làm việc

Bắt đầu dự án mới bằng một bản sao git, yeoman hoặc bất kỳ công cụ nào khác có thể truy cập được qua thiết bị đầu cuối.

Quy trình làm việc cá nhân của tôi về việc biên soạn trong Chrome giờ đây giống như sau:

• Thiết bị đầu cuối cho nhà phát triển sử dụng công cụ này cho git clone kho lưu trữ GitHub, touch một tệp mới hoặc chạy yo (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
• Không gian làm việc: 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ột máy chủ sớm hơn, tôi có thể ánh xạ dự án cục bộ với các tệp mạng. Tôi có thể sử dụng Sass hoặc Ít hơn và các thay đổi của bộ xử lý trước CSS được ánh xạ ngược trở lại các tệp CSS của tôi.
• Thiết bị đầu cuối cho nhà phát triển: 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) để kéo các phần phụ thuộc xuống hoặc chạy quy trình xây dựng (gỗ, tạo) để tạo phiên bản được tối ưu hoá cho 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 việc sắp xếp cửa sổ, nhưng thật dễ chịu khi có thể đạt được hầu hết những gì tôi cần từ bên trong trình duyệt.

Liệt kê các tên tệp trong thư mục đang làm việc bằng ls. Phù hợp để trực quan hoá các thư mục bên ngoài Workspace.

Cài đặt

Bạn có thể cài đặt Thiết bị đầu cuối cho nhà phát triển 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 phần tử này vào Chrome, bạn chỉ cần "Kiểm tra phần tử" hoặc Ctrl + Shift + I để mở Công cụ cho nhà phát triển và bạn sẽ có thể truy cập công cụ này thông qua thẻ "Thiết bị đầu cuối" mới. Người dùng Windows sẽ cần kết nối tiện ích này với thiết bị đầu cuối của hệ thống bằng cách sử dụng proxy Node.js. Để thiết lập, hãy cài đặt mô-đun devtools-terminal từ npm: npm install -g devtools-terminal

Sau đó, mở một cửa sổ dòng lệnh mới và chạy devtools-terminal. Tiếp theo, mở Công cụ cho nhà phát triển và trong thẻ "Thiết bị đầu cuối", kết nối với máy chủ bằng cách sử dụng các tùy 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ế

Thiết bị đầu cuối cho Công cụ cho nhà phát triển có một số hạn chế cần lưu ý. 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 tính năng phát nhật ký. Tuy nhiên, bạn có thể mở bao nhiêu thẻ mới trên Chrome tuỳ thích, mỗi thẻ có thể có phiên bản Thiết bị đầu cuối cho Công cụ cho nhà phát triển của riêng họ. Bạn có thể thực hiện thao tác này từ màn hình Ứng dụng Chrome:

Hiện tại, tiện ích này hỗ trợ cả giao diện sáng và giao diện tối mặc định.

Tiện ích này hiện dựa trên LAMBDA, sẽ được loại bỏ dần trong năm tới để thay thế cho API Nhắn tin gốc. Tác giả của Thiết bị đầu cuối Công cụ cho nhà phát triển Dmitry Fillimonov dự định ngừng sử dụng hreflang để thay thế bằng API này hoặc API ứng dụng khách gốc trong tương lai gần.

Kết luận

Thiết bị đầu cuối cho nhà phát triển (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ù thiết bị đầu cuối trong trình duyệt có thể không phải là tiện ích chung của mọi người, nhưng bạn có thể thấy tiện ích này là một bổ sung hữu ích cho quy trình làm việc của mình và chúng tôi khuyến khích bạn dùng thử để xem bạn thích tiện ích này như thế nào!