15 Lệnh dòng đồ họa (GCLI) trong Firefox dành cho nhà phát triển Front-End
Cho dù chúng tôi có bao nhiêu nút và menu ưa thích, luôn có những lập trình viên đánh giá cao truy cập dòng lệnh trong môi trường làm việc của họ, đặc biệt là khi nó loại bỏ việc săn tìm nút hoặc menu bên phải hiển thị các thiết lập cần thiết trong tầm nhìn của chúng tôi.
Firefox đã có một Phiên dịch dòng lệnh đồ họa, hoặc trong ngắn hạn GCLI trong một thời gian bây giờ, và đã mở rộng bộ lệnh của nó theo thời gian. Các lệnh GCLI cung cấp cho các nhà phát triển một truy cập nhanh vào các công cụ phát triển và cấu hình. Nó cũng có một tính năng tự động hoàn thành; nếu bạn nhấn Tab trong khi gõ bất kỳ lệnh nào, các lệnh được đề xuất bởi GCLI sẽ được nhập.
Thanh công cụ
Firefox GCLI còn được gọi là Thanh công cụ dành cho nhà phát triển. Có ba cách mở nó ra:
- Nhấn phím tắt Shift + F2.
- Nhấn vào “Mở thực đơn” biểu tượng (hamburger) ở phía bên phải của thanh địa chỉ (bên phải nút Home), sau đó nhấp vào biểu tượng Nhà phát triển> Thanh công cụ dành cho nhà phát triển menu phụ.
- Trong thanh menu trên cùng, đánh dấu vào Công cụ> Nhà phát triển web> Thanh công cụ dành cho nhà phát triển Tùy chọn.
Khi Thanh công cụ dành cho nhà phát triển mở, bạn có thể thấy nó ở dưới cùng của cửa sổ trình duyệt. Nếu bạn đã quyết định làm việc với GCLI, Tôi khuyên bạn nên để nó mở mọi lúc trong khi làm việc.
Bây giờ hãy xem một số tác vụ hữu ích bạn có thể thực hiện trong Firefox sử dụng GCLI của nó.
1. Xóa phần tử trang
Chỉ huy: yếu tố loại bỏ pagemod
Khi bạn cần có cái nhìn khác về bố cục của một trang web với một số yếu tố bị loại bỏ, chỉ cần gõ lệnh yếu tố loại bỏ pagemod vào Dòng lệnh Firefox để xóa các thành phần đó khỏi trang.
Giá trị của .btn, lệnh được viết là: pagemod loại bỏ phần tử a.btn.
Nói chung, lệnh chùa được sử dụng để sửa đổi một trang, bằng cách loại bỏ hoặc thay thế các yếu tố hoặc thuộc tính được chọn.
2. Các yếu tố đo lường
Chỉ huy: đo
Nếu bạn muốn biết đo lường của bất kỳ mô-đun hình ảnh nào trên một trang web, có một công cụ cho việc đó. Các “đo” công cụ có thể truy cập thông qua cả bộ công cụ phát triển web điển hình và GCLI.
Nhập và nhập đo lệnh vào dòng lệnh và con trỏ sẽ biến thành một crosshair. Các phép đo sẽ là hiển thị bằng pixel bên cạnh con trỏ hình tròn và là của chiều rộng, chiều cao và chiều dài đường chéo của khu vực được chọn. Để vô hiệu hóa công cụ, chạy lại đo chỉ huy.
3. Chỉnh sửa tập tin nhanh chóng
Chỉ huy: chỉnh sửa
Khởi đầu chỉnh sửa tài nguyên trang của bạn với chỉnh sửa chỉ huy. Trong khi gõ lệnh, bạn sẽ thấy URI của tất cả các tài nguyên có sẵn từ trang đó, bạn có thể duyệt bằng các phím mũi tên lên và xuống. Khi bạn đã chọn tài nguyên bạn muốn chỉnh sửa, hãy nhấn Tab để tự động hoàn thành đề xuất và nhấn Enter và công cụ biên tập của trình duyệt sẽ mở với tập tin đã chọn.
4. Tra cứu các thuộc tính CSS lạ
Chỉ huy: mss css
Đây là một lệnh khá tuyệt vời - nó là một loại từ điển bật lên cho các thuộc tính CSS. Nếu bạn gặp một thuộc tính CSS lạ và muốn kiểm tra xem nó đại diện cho cái gì, hãy chạy lệnh mss css trong GCLI với
Một cửa sổ bật lên sẽ xuất hiện với “Định nghĩa” cho thuộc tính CSS đó ngay trên thanh công cụ. Định nghĩa là một trích xuất từ trang Mạng chính thức của Nhà phát triển Mozilla (MDN) của tài sản nhất định. Bảng chú giải các thuộc tính CSS, các thành phần HTML và API web của MDN được trích dẫn cao.
Nếu văn bản hiển thị trong cửa sổ bật lên là không đủ, và bạn Bạn muốn biết thêm, bạn có thể nhấp vào liên kết Truy cập trang MDN bên trong cửa sổ bật lên và trang MDN tương ứng cho thuộc tính đó sẽ được mở. Ngay bây giờ, lệnh này chỉ có sẵn cho các thuộc tính CSS.
5. Thay đổi kích thước trang
Chỉ huy: thay đổi kích thước để
Công cụ thay đổi kích thước cho phép bạn xem trang của bạn trông như thế nào thay đổi kích thước theo kích thước cụ thể, có thể hữu ích khi bạn muốn xem trước sự xuất hiện của trang trong các thiết bị có kích thước khác với kích thước bạn đang làm việc.
Firefox cũng có một phím tắt để mở công cụ này: Ctrl + Shift + M (Cmd + Alt + M cho Mac). Nhưng nếu bạn đã biết kích thước chính xác được sử dụng để thay đổi kích thước, cách nhanh nhất là chạy thay đổi kích thước lệnh với kích thước bạn cần.
Kích thước là diễn giải bằng pixel. Khi lệnh được chạy, bạn sẽ thấy trang đã thay đổi kích thước.
6. Khởi động lại trình duyệt
Chỉ huy: khởi động lại
Lệnh này là hiển nhiên. Để khởi động lại Firefox, chỉ cần gõ khởi động lại vào dòng lệnh và nhấn Enter-can có ích khi bạn cài đặt các tiện ích bổ sung hoặc plugin yêu cầu khởi động lại.
7. Mở thư mục hồ sơ Firefox của bạn
Chỉ huy: thư mục openprofile
Mọi người dùng Firefox đều nhận được thư mục hồ sơ địa phương cái đó lưu trữ các tập tin người dùng, chẳng hạn như dấu trang và / chrome thư mục. Khi bạn cá nhân hóa Firefox, bạn có thể cần phải xem và sửa đổi nội dung của thư mục này.
Cách khác để mở thư mục này là nhấp vào nút Hiển thị thư mục trên về: hỗ trợ trang. Bằng cách chạy lệnh thư mục openprofile trong Dòng lệnh Firefox, bạn sẽ thấy thư mục hồ sơ của mình mở ngay lập tức.
8. Sao chép giá trị màu
Chỉ huy: thuốc nhỏ mắt
Khác với thực tế là nó chỉ hỗ trợ định dạng hex, Eyedropper là một công cụ tuyệt vời cho sao chép giá trị màu của bất kỳ màu sắc có thể nhìn thấy trên một trang web. Nhập lệnh thuốc nhỏ mắt vào GCLI để chuyển đổi hoạt động của công cụ.
9. Kiểm tra thư viện bên ngoài
Chỉ huy: tiêm
Nếu bạn muốn kiểm tra một số thư viện bên ngoài trên trang web của bạn, thay vì đi sâu vào mã nguồn để thực hiện các bổ sung tạm thời, chỉ cần sử dụng tiêm lệnh để chèn các thư viện. Chẳng hạn, để bao gồm jQuery chỉ cần gõ tiêm jQuery.
Khi thực hiện lệnh, tài nguyên sẽ là nhập vào trang bằng cách chèn một >
10. Chụp ảnh màn hình
Chỉ huy: ảnh chụp màn hình
Các công cụ chụp ảnh màn hình tích hợp trong Firefox khá mạnh. Chẳng hạn, bạn có thể nhắm mục tiêu các yếu tố riêng lẻ bằng cách sử dụng bộ chọn CSS, sử dụng bộ đếm thời gian, áp dụng một dpr. Bạn thậm chí có thể chụp ảnh màn hình của chỉ là phần chrome của trình duyệt (khu vực xung quanh nội dung người dùng) bằng cách sử dụng ảnh chụp màn hình - màu chỉ huy.
Các ảnh chụp màn hình được lưu trong Thư mục tải về của trình duyệt ở định dạng PNG.
11. Thước kẻ mở
Chỉ huy: người cai trị
Một công cụ tuyệt vời khác của Firefox có thể truy cập dễ dàng thông qua GCLI. Các người cai trị chỉ huy hiển thị thước kẻ ngang và dọc xung quanh trang. Các phép đo của những người cai trị là tính bằng pixel. Chạy cùng một lệnh để hủy kích hoạt thước.
12. Mở bàn điều khiển và trình gỡ lỗi
Chỉ huy: giao diện điều khiển mở và mở dbg
Nếu bàn phím bị thiếu mở bảng điều khiển web hoặc công cụ gỡ lỗi đã trượt tâm trí của bạn, không phải lo lắng, chỉ cần gõ lệnh đơn giản giao diện điều khiển mở hoặc là mở dbg vào Dòng lệnh Firefox để mở công cụ tương ứng.
13. Đếm các yếu tố trang
Chỉ huy: qsa
Lệnh tiện lợi này từ GCLI sẽ điều tra nhanh các yếu tố trong một trang web phù hợp với bất kỳ bộ chọn CSS đã cho. Ví dụ, để có được tất cả các yếu tố trên một trang, sử dụng qsa a chỉ huy.
14. Kích hoạt hoặc vô hiệu hóa các tiện ích bổ sung
Chỉ huy: danh sách bổ trợ
Nếu bạn cần khảo sát và quản lý các tiện ích Firefox của mình, tôi khuyên bạn nên sử dụng các lệnh GCLI thay vì menu Tiện ích bởi vì phiên bản GCLI liệt kê tất cả các tiện ích bổ sung và plugin, bao gồm những cái được cài đặt sẵn, có thể không được liệt kê trong menu Tiện ích.
Bạn có thể chuyển trạng thái bổ trợ trong GCLI bằng lệnh thêm vao theo sau là lệnh phụ có liên quan cho phép hoặc là vô hiệu hóa.
Trên bản demo bên dưới, bạn có thể thấy Làm thế nào để nhanh chóng vô hiệu hóa Pocket trong Firefox.
15. Quản lý cài đặt
Chỉ huy: chương trình trước
Có hàng tấn cài đặt tùy chỉnh Người dùng có thể truy cập qua Firefox về: cấu hình trang. Các cài đặt tương tự cũng có thể được xem và sửa đổi bằng GCLI.
Sử dụng GCLI để truy cập cài đặt tùy chỉnh là tùy chọn nhanh hơn nếu bạn đã biết cấu hình nào bạn muốn xem hoặc thay đổi. Đến đặt giá trị cho cài đặt, sử dụng thiết lập trước chỉ huy và đặt lại cài đặt, kiểu thiết lập lại trước .
Trên bản demo bên dưới, bạn có thể thấy cách kiểm tra URI các tiêm jQuery lệnh đã được đưa vào trang (xem phần 9 trong bài viết này):
