Công cụ nhà phát triển (Developer Tools), hay thường được gọi là Inspect Element, tích hợp sẵn trong mọi trình duyệt web hiện đại, có vẻ như chỉ dành riêng cho các lập trình viên hoặc chuyên gia công nghệ. Tuy nhiên, suy nghĩ đó hoàn toàn sai lầm. Dù bạn không biết một dòng code nào, Element Inspector vẫn là một kho tàng tiện ích ẩn giấu, cho phép bạn thực hiện vô số thủ thuật hữu ích, khám phá sâu hơn về cách website hoạt động và thậm chí can thiệp tạm thời vào chúng.
Từ việc tải xuống hình ảnh, video bị khóa, đến chụp màn hình toàn trang, giả lập trải nghiệm di động, hay đơn giản là kiểm tra font chữ và mã màu, các tính năng của công cụ này có thể giúp ích rất nhiều cho công việc hàng ngày của bạn hoặc chỉ đơn thuần là thỏa mãn sự tò mò. Bài viết này sẽ hướng dẫn bạn cách tận dụng 8 thủ thuật cơ bản nhưng cực kỳ mạnh mẽ của Inspect Element, biến bạn thành một “người dùng quyền năng” ngay lập tức.
1. Tải ảnh chất lượng cao từ mọi website
Đã bao giờ bạn cố gắng lưu một hình ảnh từ website nhưng gặp phải tình trạng nút “Lưu hình ảnh thành…” bị vô hiệu hóa, hoặc chỉ tải được ảnh thumbnail kích thước nhỏ? Các nhà phát triển đôi khi chủ đích ngăn chặn việc tải xuống trực tiếp, hoặc hệ thống website sử dụng các framework không hỗ trợ tính năng này. Đừng lo lắng, Inspect Element sẽ giúp bạn vượt qua rào cản đó để lấy về bất kỳ hình ảnh nào với chất lượng gốc chỉ trong ba bước đơn giản.
Lưu ý: Một số hình ảnh có thể bị khóa vì lý do bản quyền hoặc cấp phép. Hãy sử dụng các thủ thuật này một cách có trách nhiệm và tuân thủ nguyên tắc sử dụng hợp lý để tránh các rắc rối pháp lý.
Bước 1: Mở Công cụ nhà phát triển
Bạn có thể mở cửa sổ Inspect Element bằng cách nhấp chuột phải vào bất kỳ đâu trên trang web và chọn “Inspect” (Kiểm tra) hoặc “Inspect Element” (Kiểm tra phần tử). Cách nhanh hơn là sử dụng phím tắt F12 (hoạt động trên hầu hết các trình duyệt và hệ điều hành). Trong ví dụ này, chúng tôi sử dụng Firefox, nhưng các bước thực hiện trên Chrome, Edge hay Opera đều tương tự.
Bước 2: Truy cập tab “Network” và lọc “Images”
Trong cửa sổ Công cụ nhà phát triển, hãy nhấp vào tab “Network” (Mạng). Tab này có thể nằm trong menu phụ hoặc cần nhấp vào biểu tượng mũi tên để mở rộng. Sau đó, chọn mục “Images” (Hình ảnh) để lọc và chỉ hiển thị các tệp hình ảnh.
Tiếp theo, hãy tải lại trang web (nhấn nút làm mới bên cạnh thanh địa chỉ hoặc dùng phím tắt Ctrl+R) để tất cả các tài nguyên hình ảnh được tải lại và hiển thị trong danh sách “Images”.
Hình ảnh minh họa cách truy cập tab "Network" và lọc "Images" trong Công cụ nhà phát triển để xem danh sách ảnh.
Bước 3: Tìm và lưu ảnh
Giờ đây, toàn bộ thư viện hình ảnh của trang web sẽ được tải vào danh sách. Danh sách này cập nhật động, nghĩa là khi bạn cuộn trang và có thêm hình ảnh được tải, chúng cũng sẽ xuất hiện ở đây.
Bạn có thể di chuột qua tên tệp để xem trước hình ảnh và kích thước của nó. Nhấp đúp vào một tệp để mở hình ảnh đó trong một tab mới, nơi bạn có thể nhấp chuột phải và lưu ảnh về máy tính dễ dàng.
Màn hình hiển thị việc mở tệp ảnh trong tab mới và tùy chọn lưu ảnh bằng chuột phải từ Inspect Element.
2. Tải video dễ dàng từ website
Tương tự như hình ảnh, một số website không cho phép bạn tải trực tiếp các tệp video. Tuy nhiên, bạn hoàn toàn có thể tải chúng bằng cách sử dụng Công cụ nhà phát triển. Khi các tệp video đã được tải vào công cụ này, bạn chỉ cần nhấp đúp vào tên tệp để mở chúng trong một tab mới và lưu lại.
Bước 1: Mở Công cụ nhà phát triển
Mở cửa sổ Inspect Element bằng phím tắt F12 (phím tắt này hoạt động trên hầu hết các hệ thống). Hoặc bạn có thể nhấp chuột phải vào bất kỳ đâu trên trang web và chọn “Inspect”. Cửa sổ Inspect Element sẽ hiện ra.
Bước 2: Chọn tab “Network” và lọc “Media”
Nhấp vào tab “Network” và sau đó chọn “Media” (Đa phương tiện) để lọc chỉ hiển thị các tệp video. Tiếp theo, tải lại trang web bằng cách nhấp vào nút làm mới của trình duyệt hoặc nhấn Ctrl+R.
Giao diện Công cụ nhà phát triển Firefox với tab "Network" và bộ lọc "Media" đang tải danh sách tệp video.
Bước 3: Tải video
Các tệp video sẽ được tải vào một danh sách. Bạn không thể xem trước chúng ngay lập tức, nhưng có thể nhấp đúp vào tên tệp để mở video trong một tab mới. Từ đây, bạn chỉ cần nhấp chuột phải và chọn “Lưu video thành…” để tải về.
Hình ảnh mô tả cách lưu tệp video từ một tab trình duyệt mới sau khi tìm thấy qua Inspect Element.
3. Chụp ảnh màn hình toàn bộ trang web (Full-Page Screenshot)
Nếu bạn muốn lưu toàn bộ một trang web, bạn có thể nhanh chóng tải nó về dưới dạng PDF hoặc tệp HTML. Nhưng nếu bạn muốn một ảnh chụp màn hình định dạng ảnh thông thường của toàn bộ trang (từ đầu đến cuối, bao gồm cả các phần bạn phải cuộn xuống) thì sao? Đây là cách thực hiện.
Lưu ý: Firefox có công cụ chụp ảnh màn hình tích hợp sẵn trong menu ngữ cảnh thông thường. Vì vậy, chúng tôi sẽ hướng dẫn bạn cách làm điều này trong Google Chrome và các trình duyệt dựa trên Chromium khác.
Mở Công cụ nhà phát triển bằng cách nhấp chuột phải vào bất kỳ đâu trên trang hoặc nhấn F12.
Chụp ảnh màn hình toàn trang trong Chrome DevTools bằng lệnh "Capture full size screenshot".Nhấn tổ hợp phím Ctrl+Shift+P để mở cửa sổ Run. Trong cửa sổ này, gõ “Capture full size screenshot” và nhấp vào lệnh đó.
Một cửa sổ “Save As” sẽ xuất hiện ngay lập tức, cho phép bạn lưu ảnh chụp màn hình toàn trang ở định dạng JPG.
Hộp thoại "Save As" xuất hiện để lưu ảnh màn hình toàn trang đã chụp trong trình duyệt Chrome.
4. Giả lập trải nghiệm điện thoại/máy tính bảng
Hầu hết các website đều hiển thị khác nhau tùy thuộc vào loại thiết bị và kích thước màn hình. Nếu bạn muốn “đánh lừa” website rằng bạn đang truy cập từ một thiết bị khác (vì bất kỳ lý do gì), bạn có thể dễ dàng làm điều đó với Công cụ nhà phát triển.
Trong Chrome, mở cửa sổ Inspect Element từ menu ngữ cảnh chuột phải hoặc bằng phím F12. Sau đó, nhấp vào biểu tượng máy tính xách tay và điện thoại nhỏ ở góc trên bên trái của cửa sổ Công cụ nhà phát triển. Firefox cũng có một nút tương tự, được gọi là Chế độ thiết kế phản hồi (Responsive Design Mode) với phím tắt Ctrl+Shift+M.
Biểu tượng bật chế độ giả lập thiết bị di động (Responsive Design Mode) trong Chrome DevTools.Bạn sẽ nhận được một danh sách các thiết bị di động mà bạn có thể giả lập, và bạn cũng có thể điều chỉnh kích thước màn hình theo cách thủ công. Khi bạn đã chọn một thiết bị di động, bạn sẽ nhận thấy trình duyệt của mình cũng mô phỏng các cử chỉ chạm cảm ứng.
5. Xác định và tải font chữ trên web
Thủ thuật này đặc biệt hữu ích cho các nhà thiết kế web, nhưng bất kỳ ai tò mò về font chữ trên một website đều có thể sử dụng. Bạn có thể dùng Công cụ nhà phát triển để xác định và đôi khi còn có thể tải về các font chữ đang được sử dụng.
Đầu tiên, mở Công cụ nhà phát triển. Tiếp theo, nhấp vào tab “Network” (tab này có thể ẩn trong menu tràn) và chọn “Font” (Font chữ).
Tìm kiếm và tải font chữ WOFF từ tab "Network" của Inspect Element sau khi lọc theo "Font".Sau đó, nhấn Ctrl+R để tải lại trang. Các font chữ đã render sẽ hiển thị trong danh sách, thường ở định dạng WOFF. Bạn có thể tải chúng trực tiếp bằng cách nhấp đúp vào tên font. Ví dụ, How-To Geek sử dụng Roboto làm font mặc định.
Nếu bạn cần thông tin font chi tiết hơn, hãy chuyển sang tab “Elements” và chọn “Styles”. Cuộn xuống tìm thuộc tính font-family và nhấp vào nó. Đoạn văn bản tương ứng trên trang web sẽ sáng lên, giúp bạn xác định chính xác font chữ đang được áp dụng.
Kiểm tra thông tin chi tiết về font chữ và thuộc tính "font-family" trong tab "Elements > Styles".
6. Sửa đổi nội dung văn bản trên trang (tạm thời)
Bạn có biết bạn có thể tạm thời chỉnh sửa gần như mọi thứ trên một trang web bằng Inspect Element không? Công cụ này cho phép chúng ta chỉnh sửa mã nguồn tạo nên website. Vì vậy, nếu bạn hiểu mã, bạn có thể làm cho website trông bất kỳ hình thức nào bạn muốn (chỉ trên máy tính của bạn, cho đến khi bạn tải lại trang).
Ngay cả khi bạn không biết gì về lập trình, bạn vẫn có thể chỉnh sửa văn bản cơ bản trên bất kỳ trang web nào. Đây có thể là một trò đùa vui vẻ để trêu bạn bè.
Chọn (highlight) đoạn văn bản trên trang mà bạn muốn chỉnh sửa và nhấp chuột phải vào nó. Sau đó, nhấp “Inspect” hoặc “Inspect Element”.
Đoạn văn bản liên quan sẽ hiển thị trong tab “Elements”. Chỉ cần nhấp đúp vào nó và thay thế văn bản bằng bất cứ thứ gì bạn muốn.
Đóng Công cụ nhà phát triển và bạn đã hoàn tất! Hãy nhớ rằng, tải lại trang sẽ hoàn tác các thay đổi của bạn.
7. Xóa bỏ các phần tử không mong muốn (tạm thời)
Tương tự như việc chỉnh sửa văn bản, bạn cũng có thể xóa bỏ các phần tử cụ thể khỏi một trang web. Một lần nữa, các thay đổi chỉ có hiệu lực cho đến khi bạn tải lại trang.
Nhấp chuột phải vào phần tử bạn muốn xóa, sau đó nhấp “Inspect” hoặc “Inspect Element”.
Di chuột qua các thẻ HTML (ví dụ: <div>, <p>) cho đến khi toàn bộ phần tử bạn muốn xóa được tô sáng. Sau đó, chỉ cần nhấn phím Delete.
Chọn và xóa tạm thời một phần tử HTML (ví dụ: thẻ div) trên trang web bằng Công cụ nhà phát triển.Thế là nó biến mất!
8. Xác định giá trị màu sắc chuẩn xác
Một mẹo khác dành cho những người làm sáng tạo: bạn có thể lấy các giá trị màu RGB và mã HEX cho bất kỳ màu nào trên trang web bằng công cụ hút màu (eyedropper tool) có trong Inspect Element.
Nhấp chuột phải vào bất kỳ đâu trên trang và mở Inspector. Theo mặc định, cửa sổ “Rules” sẽ mở trong tab “Inspector” (hoặc “Styles”). Cuộn xuống để tìm bất kỳ thuộc tính nào được dán nhãn “color” (màu sắc).
Thuộc tính màu sẽ có một vòng tròn hoặc ô vuông màu sắc bên cạnh. Nhấp vào nó để mở bộ chọn màu và sau đó nhấp vào biểu tượng ống nhỏ giọt (eyedropper) bên cạnh.
Sử dụng công cụ hút màu (Eyedropper) trong Inspect Element để chọn màu sắc từ trang web.Bạn có thể di chuyển công cụ hút màu này đến bất kỳ vị trí nào trên trang để tra cứu giá trị màu. Nhấp vào công cụ hút màu sẽ tự động điền giá trị màu bạn vừa chọn vào thuộc tính. Từ đây, bạn có thể dễ dàng sao chép nó.
Giao diện hiển thị giá trị màu RGB/HEX được cập nhật khi dùng công cụ hút màu qua Inspect Element.
Những thủ thuật trên đây mới chỉ là một phần nhỏ trong số vô vàn khả năng mà Công cụ nhà phát triển (Inspect Element) mang lại. Dù bạn là một người dùng công nghệ tò mò, một nhà thiết kế web nghiệp dư hay chỉ đơn giản muốn khám phá sâu hơn về cách internet hoạt động, việc làm quen với công cụ này chắc chắn sẽ mở ra một thế giới mới đầy thú vị.
Hãy tự mình thử nghiệm và khám phá thêm các tính năng khác. Nếu bạn muốn tìm hiểu sâu hơn về phát triển web, đây có thể là bước khởi đầu tuyệt vời để bạn làm quen với các công cụ mà các chuyên gia vẫn đang sử dụng hàng ngày. Đừng ngần ngại chia sẻ những phát hiện hoặc thủ thuật yêu thích của bạn với chúng tôi trong phần bình luận bên dưới!
