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

Addy Osmani

Thiết bị đầu cuối cho DevTools là tiện ích mới của Công cụ cho nhà phát triển của Chrome giúp mang sức mạnh của thiết bị đầu cuối cho trình duyệt của bạn. Nếu bạn thấy mình phải 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 nội dung, sử dụng git, grunt, wget hoặc thậm chí là vim - bạn có thể thấy tiện ích này là một công cụ tiết kiệm thời gian hữu ích.

DevTools Terminal rất hữu ích để điều chỉnh nhanh dòng lệnh từ bên trong Chrome trong khi 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 trong Công cụ 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, có thể bạn đã quen làm việc với một số công cụ khác nhau: trình chỉnh sửa văn bản dùng để ghi nhận tác giả, trình duyệt để kiểm thử và gỡ lỗi và cửa sổ dòng lệnh để 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.

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 chuyển đổi bối 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à 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 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ể sử dụng quy trình git hoàn chỉnh. Thích hợp cho git diff sau khi biên soạn trong Workspace.

Công cụ cho nhà phát triển (của Dmitry Filimonov) hoàn thành câu chuyện đó, giúp bạn có thể viết mã, gỡ lỗi và xây dựng từ bên trong cùng một cửa sổ. Bạn có thể sử dụng các màu tab, ctrl và thậm chí cả Git, tạo cảm giác quen thuộc với thiết bị đầu cuối mà bạn từ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 git Sao chép, yeoman hoặc bất kỳ công cụ nào khác có thể truy cập qua cửa sổ dòng lệnh.

Quy trình viết bài của cá nhân tôi trong Chrome giờ đây có dạng như sau:

• Thiết bị đầu cuối cho DevTools sử dụng nó để 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ể 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 trong Chrome. Nếu đã chạy 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 của mình. Tôi có thể sử dụng Sass trở xuống và ánh xạ các thay đổi của bộ tiền xử lý CSS vào tệp CSS của tôi.
• 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) để kéo xuống các phần phụ thuộc hoặc chạy quy trình xây dựng của tôi (grunt, make) nhằm tạo ra phiên bản tối ưu hóa 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ể đạt được hầu hết những gì mình cần từ bên trong trình duyệt.

Liệt kê tên tệp trong thư mục đang làm việc bằng ls. Đây là tính năng tuyệt vời để 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 Công cụ cho nhà phát triển từ Cửa hàng Chrome trực tuyến. Nếu là người dùng máy Mac hoặc Linux, thì 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à có thể truy cập vào 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 hệ thống bằng proxy Node.js. Để thực hiện quy trình thiết lập này, 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, hãy 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ác tuỳ chọn cấu hình mặc định. Bạn có thể tuỳ chỉnh cổng và địa chỉ thêm nếu cần.

Các điểm hạn chế

Thiết bị đầu cuối trong Công cụ cho nhà phát triển có một vài hạn chế đáng lưu ý. Không giống như Terminal.app hoặc iTerm2 trên máy Mac, công cụ này chưa hỗ trợ các 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ỳ 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 riêng. Bạn có thể thực hiện việ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 mặc định và giao diện tối.

Tiện ích này hiện dựa vào NPAPI và sẽ bị loại bỏ dần trong năm tới để thay thế bằng API gửi thông báo gốc. Dmitry Fillimonov, tác giả của Thiết bị đầu cuối cho Công cụ cho nhà phát triển, dự định chuyển sang NPAPI là API này hoặc API Native Client trong tương lai gần.

Kết luận

Công cụ cho nhà phát triển (và các tiện ích tương tự, chẳng hạn như Auxilio) có thể giúp bạn tránh 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à tách trà của tất cả mọi người, bạn có thể thấy tiện ích này 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ử và xem cách bạn muốn!