Nhiều trang web không hiện nút tải xuống dù ảnh hoặc video đang được trình duyệt mở. Cũng có lúc bạn chỉ lấy được ảnh thumbnail, muốn chụp cả trang nhưng công cụ chụp màn hình lại cắt mất phần bên dưới. Mình thường mở DevTools, còn gọi là Developer Tools hoặc công cụ dành cho nhà phát triển, để xử lý những việc này.
Đây không phải mẹo phá khóa nội dung. DevTools chỉ cho bạn nhìn những tài nguyên mà trình duyệt của bạn đã nhận được. Nếu tệp bị giới hạn quyền truy cập, nằm sau DRM hoặc chỉ dành cho tài khoản được phép xem, công cụ này không biến nó thành tệp có thể tải. Với nội dung của bạn hoặc nội dung được chủ sở hữu cho phép lưu, các bước dưới đây khá tiện. Nguồn của bài remake này là hướng dẫn về Element Inspector, đăng ngày 22/01/2025.
Mở DevTools và tìm đúng tài nguyên
Trên Chrome, Edge, Firefox và nhiều trình duyệt khác, bạn có thể nhấn F12 hoặc bấm chuột phải vào trang rồi chọn “Inspect”. Nếu máy dùng bàn phím nhỏ không có F12, hãy mở menu trình duyệt và tìm mục Developer Tools. Giao diện mỗi trình duyệt hơi khác, nhưng hai khu vực bạn cần nhớ là Elements và Network.
Elements cho biết cấu trúc của phần đang hiển thị. Network ghi lại các yêu cầu mà trang gửi đi để lấy ảnh, video, phông chữ và dữ liệu khác. Nếu bạn mở Network sau khi trang đã tải xong, danh sách có thể thiếu tài nguyên cũ. Vì vậy, hãy mở Network trước, sau đó tải lại trang bằng Ctrl+R.
Ví dụ, bạn mở một bài có ảnh lớn nhưng menu chuột phải chỉ cho lưu ảnh xem trước. Trong Network, chọn bộ lọc Images rồi tải lại trang. Danh sách lúc này sẽ có nhiều tệp hơn. Hãy nhìn kích thước, loại tệp và tên đường dẫn thay vì chọn mục đầu tiên. Một ảnh rộng 1.920 pixel thường đáng chọn hơn thumbnail rộng 320 pixel, nhưng đây chỉ là cách nhận biết tệp lớn hơn, không phải cam kết ảnh đó là bản gốc.
Lấy ảnh kích thước đầy đủ
Sau khi chọn Images và tải lại, di chuột lên từng dòng để xem xem trước cùng kích thước. Nhấp đúp vào tên tệp sẽ mở tài nguyên trong tab mới. Tại tab đó, bạn có thể bấm chuột phải và chọn lưu ảnh. Nếu đường dẫn trả về lỗi hoặc ảnh vẫn nhỏ, quay lại danh sách và thử một dòng khác; nhiều trang tải đồng thời ảnh nền, ảnh thumbnail và bản hiển thị.
Đừng lấy ảnh chỉ vì nó đang xuất hiện trên màn hình. Một số tệp có thể là ảnh quảng cáo, ảnh đại diện hoặc tài nguyên được cấp phép riêng. Mình thường kiểm tra lại ngữ cảnh bài viết, tên miền và quyền sử dụng trước khi lưu. Nếu bạn chỉ cần dùng làm tư liệu cá nhân, vẫn nên giữ URL nguồn trong tên ghi chú để sau này biết ảnh đến từ đâu.
Với video, quy trình gần giống nhưng chọn Media thay vì Images. Tải lại trang trong lúc video đã sẵn sàng phát, rồi xem các dòng tài nguyên được thêm vào. Nếu thấy một tệp video mở được trong tab mới, bạn có thể lưu nó bằng menu chuột phải. Cách này phù hợp hơn với video công khai được gửi dưới dạng tệp trực tiếp. Video chia thành nhiều mảnh, luồng phát thích ứng hoặc nội dung có DRM có thể không mở được thành một tệp hoàn chỉnh. Khi gặp trường hợp đó, đừng cố vượt giới hạn; hãy dùng nút tải chính thức hoặc xin tệp từ người đăng.
Nếu nhu cầu của bạn là lưu video nhúng để xem lại, hãy đọc thêm cách xử lý video nhúng khi trang không có nút tải. Dù dùng cách nào, chỉ lưu nội dung bạn có quyền sử dụng.
Chụp toàn bộ trang, không chỉ phần đang nhìn thấy
DevTools còn có lệnh chụp ảnh toàn trang. Trong Chrome hoặc Edge, mở DevTools rồi nhấn Ctrl+Shift+P để mở hộp lệnh. Gõ “Capture full size screenshot” và chọn đúng lệnh hiện ra. Trình duyệt sẽ tạo ảnh JPG gồm cả phần trang nằm bên dưới mép cửa sổ.
Hãy chờ ảnh, quảng cáo và nội dung tải chậm xuất hiện trước khi chụp. Nếu trang dùng cuộn vô hạn, ảnh toàn trang có thể chỉ chứa phần đã tải; cuộn xuống vài lần rồi thử lại. Với bài dài, PDF hoặc bản HTML thường dễ tìm kiếm hơn ảnh, còn ảnh toàn trang phù hợp khi bạn muốn lưu bố cục, lỗi hiển thị hoặc một bản tham khảo nhanh.
Kiểm tra giao diện trên điện thoại
Biểu tượng hình điện thoại ở góc trên của DevTools cho phép bạn mô phỏng màn hình nhỏ. Firefox gọi tính năng tương tự là Responsive Design Mode và thường mở bằng Ctrl+Shift+M. Chọn một kích thước có sẵn hoặc nhập chiều rộng, chiều cao thủ công. Bạn sẽ thấy trang thay đổi bố cục, đồng thời có thể kiểm tra thanh điều hướng, nút tải và phần chữ bị tràn.
Đây là mô phỏng kích thước và một phần thao tác chạm, không phải kiểm tra chính xác trên mọi mẫu điện thoại. Chẳng hạn, trang rộng 390 pixel có thể hiện đúng trên DevTools nhưng vẫn gặp lỗi thanh địa chỉ hoặc bàn phím trên máy thật. Dùng nó để phát hiện lỗi nhanh, sau đó kiểm tra lại trên thiết bị nếu việc tải video hoặc lưu file là quan trọng.
Tìm font và mã màu đang dùng
Muốn biết một trang dùng phông chữ nào, mở Network rồi chọn Fonts và tải lại trang. Các tệp thường có đuôi WOFF hoặc WOFF2. Bạn có thể nhấp đúp để xem tài nguyên, nhưng đừng mặc định rằng việc trình duyệt tải được font đồng nghĩa bạn có quyền dùng font đó cho dự án khác.
Để kiểm tra chính xác một đoạn chữ, chuyển sang Elements, chọn phần tử tương ứng rồi nhìn khu vực Styles hoặc Rules. Thuộc tính font-family cho biết danh sách font mà trang ưu tiên. Cùng khu vực này, thuộc tính color có ô màu nhỏ. Nhấp vào ô đó để mở bảng chọn màu; biểu tượng ống hút màu có thể lấy giá trị RGB hoặc HEX từ vị trí khác trên trang. Ví dụ, nếu màu hiển thị là RGB 34, 34, 34 thì mã HEX tương đương là #222222. Hãy coi đây là thông tin phục vụ việc học bố cục, không phải giấy phép sao chép thiết kế nguyên bản.
Ba lỗi hay gặp khi dùng DevTools
- Danh sách trống: Bạn có thể mở sai bộ lọc hoặc mở Network quá muộn. Chọn All, tải lại trang, rồi chuyển sang Images, Media hoặc Fonts.
- Tệp mở nhưng không lưu được: URL có thể hết hạn, yêu cầu phiên đăng nhập hoặc chỉ là một mảnh của luồng phát. Thử tài nguyên công khai khác, không nhập mật khẩu vào công cụ lạ.
- Ảnh lưu về bị mờ: Bạn đã chọn thumbnail hoặc ảnh được nén sẵn. So sánh kích thước và độ phân giải của vài dòng trong danh sách.
Nếu đang tải video từ một nền tảng cụ thể, bạn có thể xem trang tải video YouTube hoặc chọn đúng hướng dẫn theo nền tảng thay vì săn một đường dẫn tạm trong Network.
Câu hỏi thường gặp
DevTools có tải được mọi video không?
Không. Nó chỉ giúp bạn tìm tài nguyên mà trình duyệt đã nhận. Video DRM, luồng chia mảnh hoặc tệp yêu cầu quyền truy cập có thể không tải trực tiếp được.
Nhấn F12 có làm thay đổi trang web không?
Việc mở DevTools không sửa trang trên máy chủ. Bạn có thể chỉnh tạm chữ hoặc xóa một phần tử trong Elements, nhưng tải lại trang sẽ đưa giao diện về trạng thái ban đầu.
Có nên cài tiện ích tải video để thay cho DevTools không?
Không nhất thiết. Với một lần lưu ảnh hoặc kiểm tra lỗi giao diện, DevTools đã đủ. Nếu cài tiện ích, hãy xem kỹ quyền truy cập và nguồn phát hành; bạn có thể tham khảo cách chọn công cụ tải video an toàn trước khi cấp quyền.
Kết luận
DevTools hữu ích nhất khi bạn cần nhìn rõ những gì trình duyệt đang tải: ảnh nào là bản lớn, video nào là tệp trực tiếp, trang dài ra sao và giao diện phản ứng thế nào ở màn hình nhỏ. Hãy bắt đầu với Network, tải lại trang, chọn đúng bộ lọc rồi kiểm tra quyền sử dụng trước khi lưu. Khi gặp DRM, nội dung riêng tư hoặc đường dẫn không ổn định, dừng lại và dùng phương án chính thức. Làm vậy vừa đỡ mất thời gian, vừa tránh biến một mẹo kỹ thuật thành rắc rối bản quyền.