Đối với người không rành về lập trình, rất dễ bị hoảng loạn sau khi tình cờ mở Inspect Element. Tuy nhiên, nếu bạn giữ bình tĩnh sau khi xem mã phức tạp, Inspect Element cho phép bạn thực hiện nhiều việc hữu ích (và một số việc không quá hữu ích), miễn là bạn biết cách làm.
Ở đây, chúng ta sẽ xem bảy điều vui thú bạn có thể làm bằng công cụ nhà phát triển của trình duyệt và Inspect Element.
Inspect Element là gì?
Inspect Element là công cụ dành cho nhà phát triển do các trình duyệt cung cấp để xem và thay đổi tạm thời mã nguồn của bất kỳ trang web nào. Bằng cách sử dụng công cụ này, các nhà phát triển và thiết kế có thể kiểm tra và sửa đổi giao diện người dùng (front-end) của bất kỳ trang web nào.
Khi bạn thay đổi mã, trình duyệt sẽ cập nhật trang web theo thời gian thực. Thay đổi này chỉ kéo dài trong phiên làm việc của bạn trên trang web đó và chỉ hiển thị cho bạn trên thiết bị đó. Tất cả các thay đổi sẽ bị xóa ngay khi bạn rời khỏi trang web.
1. Tải xuống hình ảnh và video
Thông thường, bạn có thể dễ dàng tải ảnh từ web bằng cách chuột phải và lưu. Nhưng bạn không thể làm điều đó trên tất cả các trang web. Trong trường hợp này, tính năng Inspect Element rất hữu ích.
Để tải xuống bất kỳ tệp phương tiện nào, chuột phải vào nó và chọn Inspect. Mở rộng các thẻ <div>. Bây giờ, bạn có thể xem nguồn của tệp thông qua thuộc tính src. Sao chép liên kết nguồn và mở nó trên tab mới. Sau đó, chuột phải vào tệp phương tiện và tải xuống bằng tùy chọn Lưu dưới dạng.
2. Thay đổi tiêu đề và văn bản để đàm bạn bè
Thay vì tạo một hình ảnh giả từ đầu, bạn có thể sử dụng DevTools để thay đổi văn bản trên trang web và đàm bạn bè.
Để tạo một trang web giả, hãy mở trang của bất kỳ trang web uy tín nào và chuột phải vào tiêu đề của nó. Sau đó, nhấp vào Inspect để mở bảng điều khiển. Nhấp vào biểu tượng More của mã được đánh dấu và chọn Edit as HTML. Sau đó thay thế tiêu đề bằng tiêu đề giả của bạn.
Tương tự, bạn có thể thay đổi các nội dung văn bản khác như đoạn trích, ngày tháng và tên tác giả. Để thay đổi hình ảnh, hãy xóa nguồn hình ảnh bằng các bước tương tự. Sau đó tìm một hình ảnh liên quan từ Google, sao chép địa chỉ hình ảnh và dán nó vào nguồn.
Bằng cách này, bạn có thể đàm bạn bè mà không gặp nhiều rắc rối. Tuy nhiên, hãy chắc chắn gửi ảnh chụp màn hình với bảng DevTools ẩn thay vì gửi liên kết, vì thay đổi chỉ mang tính tạm thời.
3. Thay đổi màu sắc và font của trang web
Một thủ thuật thú vị khác bạn có thể làm bằng Inspect Element là thay đổi màu sắc và font của bất kỳ trang web nào. Chuột phải vào đối tượng mà bạn muốn thay đổi màu và chọn Inspect. Sau đó, trong tab Styles, tìm color hoặc background-color và nhập mã hex. Tương tự, bạn có thể thay đổi kích thước và kiểu font từ tab Styles.
Bạn có thể sử dụng thủ thuật này để thay đổi giao diện của bất kỳ trang web nào và làm cho nó dễ đọc hơn. Ví dụ, bạn có thể tạo chế độ tối cho bất kỳ trang web nào, tăng kích thước font để tăng khả năng đọc, và loại bỏ các yếu tố gây phiền toái bằng cách xóa chúng.
4. Xem mật khẩu ẩn
Nếu bất kỳ trang web nào ẩn mật khẩu của bạn bằng dấu sao, bạn có thể chỉnh sửa mã trang web để xem nó. Đi đến DevTools bằng cách chuột phải vào mật khẩu ẩn. Sau đó, trong thẻ input, thay đổi type từ password thành text và nhấp vào màn hình trống. Bây giờ, mật khẩu của bạn hiển thị rõ.
Thủ thuật này rất tiện lợi khi bạn quên mật khẩu nhưng đã lưu nó trên trình quản lý mật khẩu. Vì vậy, bạn có thể xem và nhớ mật khẩu trực tiếp từ trang web.
5. Xem phiên bản di động của trang web
Chúng ta đều biết cách xem trang web dành cho máy tính trên điện thoại. Nhưng bạn cũng có thể sử dụng Inspect Element để xem phiên bản di động trên máy tính. Để làm như vậy, mở DevTools và nhấp vào nút Toggle Device Toolbar (nút thứ hai từ góc trên bên phải).
Tương tự, bạn có thể chuyển đổi user agent và xem các phiên bản khác nhau của trang web. Trong công cụ nhà phát triển, nhấp vào biểu tượng More ở góc trên bên trái và chọn network conditions. Bỏ chọn hộp Use Default Browser trong phần User Agent và chọn bất kỳ user agent nào khác từ menu thả xuống bên dưới.
6. Lấy mã màu từ trang web
Thay vì cài đặt tiện ích mở rộng chọn màu của bên thứ ba, bạn có thể lấy màu yêu thích bằng Inspect Element. Để lấy bất kỳ màu nào từ trang web, vào Inspect Element. Sau đó, vào tab Styles và tìm color hoặc background. Bây giờ, nhấp vào hộp nhỏ sau color để mở bộ chọn màu.
Bây giờ bạn có thể nhấp vào bất kỳ đâu trên trang để lấy màu và sao chép mã hex từ tab Styles. Nếu bạn muốn mã RGB hoặc HSLA, bạn có thể xem chúng bằng các nút Arrow.
Vì vậy, bất cứ khi nào bạn thấy một màu tuyệt vời trên bất kỳ trang web nào mà bạn có thể muốn sử dụng trong tương lai, chỉ cần dùng Inspect Element và lưu mã để tham khảo.
7. Chụp ảnh màn hình không cần tiện ích mở rộng
DevTools cũng cho phép bạn chụp ảnh màn hình rõ nét và sạch sẽ. Để chụp ảnh màn hình, mở DevTools, nhấp vào biểu tượng More và chọn Run a Command. Trong hộp tìm kiếm, gõ screenshot. Bạn sẽ thấy bốn tùy chọn chụp ảnh màn hình khác nhau.
Bằng cách chọn area screenshot, bạn có thể làm nổi bật bất kỳ khu vực cụ thể nào trên cửa sổ, và trình duyệt sẽ lưu nó dưới dạng tệp PNG.
Chụp full-size screenshot sẽ lưu hình ảnh của toàn bộ trang web, bao gồm cả những thứ không hiển thị trên màn hình của bạn. Node screenshot chụp hình ảnh của một phần tử cụ thể. Cuối cùng, tùy chọn capture screenshot lưu hình ảnh của mọi thứ hiển thị trên màn hình của bạn.
Học các thủ thuật ẩn của Inspect Element
Đây chỉ là một vài thủ thuật bạn có thể thực hiện bằng Inspect Element. Có hàng tấn điều hữu ích khác bạn có thể làm bằng DevTools.
Vì vậy, nếu bạn muốn trở thành người dùng nâng cao và gây ấn tượng với bạn bè, việc tìm hiểu các tính năng ẩn sâu hơn của DevTools là một ý tưởng tốt.