Tôi muốn chia sẻ với các bạn một thủ thuật hay cho Mozilla Firefox có thể tăng năng suất và tiết kiệm thời gian của bạn. Trong khi lướt web, đôi khi bạn muốn chia sẻ điều gì đó với bạn bè bằng cách chụp ảnh màn hình của nó. Nhưng phải mất một số bước để chụp ảnh màn hình của toàn bộ trang, lưu nó, cắt nó, v.v. Trong bài viết này, chúng ta sẽ thấy cách trực tiếp chụp ảnh màn hình của một phần tử cụ thể trên trang web mà không cần sử dụng tiện ích bổ sung.
Quảng cáo
Khi một trang web được tải, trình duyệt web của bạn sẽ tạo Mô hình Đối tượng Tài liệu của trang. DOM được xây dựng dưới dạng cấu trúc cây, trong đó mỗi nút là một đối tượng đại diện cho một phần của tài liệu.
Hãy xem cách bạn có thể sử dụng điều này để chỉ chụp một phần tử cụ thể vào ảnh chụp màn hình của bạn.
Đến chụp ảnh màn hình của một phần tử trang web cụ thể trong Firefox , hãy thực hiện các bước sau:
- Mở trang mong muốn trong Firefox và nhấp chuột phải vào phần tử bạn muốn chụp.
- Từ menu ngữ cảnh, chọn 'Kiểm tra phần tử':
- Công cụ thanh tra sẽ được mở. Lưu ý rằng nó có một điều khiển breadcrumb cho các nút cây DOM:
- Ở đó, bạn có thể nhấp chuột phải vào bất kỳ phần tử nào và chọn Nút chụp màn hình từ menu ngữ cảnh:Đây chính là thứ chúng ta cần.
Điều tuyệt vời về tính năng này là nó cũng chụp các phần tử dài, bao gồm hầu hết các phần tử yêu cầu cuộn. Trong trường hợp của tôi, đây là cách ảnh chụp màn hình trông như thế nào:
Ngoài ra, bạn có thể sử dụng ảnh chụp màn hình chỉ huy. Trước đó, tôi đã viết Cách chụp ảnh màn hình của trang đã mở trong Firefox . Trong bài viết đã đề cập, chúng tôi đã sử dụng lệnh 'screenshot' tích hợp trong Firefox để chụp toàn bộ trang. Chức năng tương tự có thể được sử dụng để chụp màn hình một phần tử cụ thể trên trang đã mở.
- Mở Firefox và nhấn Shift + F2 trên bàn phím. Firefox sẽ mở một bảng điều khiển / dòng lệnh ở cuối màn hình.
- Nhập lệnh sau vào bên trong nó:
ảnh chụp màn hình --selector 'name'
Thay thế tên 'phần' bằng tên bộ chọn thích hợp. Trong trường hợp của tôi, nó phải
ảnh chụp màn hình --selector '# widget-apps> .iconlist> .iconlist-content> ul'
Phương pháp thứ hai hữu ích cho các nhà phát triển web biết đường dẫn chính xác của phần tử DOM. Người dùng bình thường rõ ràng sẽ thích phương pháp đầu tiên để chụp ảnh màn hình của một phần tử trang web cụ thể.