Mẹo sử dụng phần tử kiểm tra trong trình duyệt Google Chrome

Giả sử bạn muốn biết mẹo sử dụng tính năng Kiểm tra phần tử trong Trình duyệt Google Chrome: Nhấp chuột phải vào phần tử bạn muốn kiểm tra và chọn 'Kiểm tra' từ trình đơn thả xuống. Bạn cũng có thể sử dụng phím tắt Ctrl+Shift+I (Windows) hoặc Cmd+Opt+I (Mac) để mở Trình kiểm tra. Sau khi mở Trình kiểm tra, bạn sẽ thấy HTML cho trang ở bên trái và CSS ở bên phải. Bạn có thể thực hiện các thay đổi đối với HTML và CSS trong Trình kiểm tra và xem những thay đổi đó có hiệu lực ngay lập tức trên trang. Để thoát khỏi Trình kiểm tra, chỉ cần nhấp vào X ở góc trên bên phải.

Google Chrome không chỉ dành cho người dùng web phổ thông mà còn dành cho các nhà phát triển web, những người thường tạo trang web, tạo blog, v.v. kiểm tra yếu tố hoặc Quan sát Tùy chọn Google Chrome giúp người dùng tìm thấy một số thông tin về một trang web bị ẩn khỏi tầm nhìn. Dưới đây là một số mẹo để sử dụng Inspect Element trong trình duyệt Google Chrome dành cho PC Windows.

Kiểm tra phần tử Google Chrome

1] Tìm tập tin JavaScript/phương tiện ẩn

xóa hồ sơ người dùng cửa sổ 10

Nhiều trang web hiển thị cửa sổ bật lên nếu khách truy cập ở lại trên trang web hơn 15 hoặc 20 giây. Hoặc, trong nhiều trường hợp, một hình ảnh, quảng cáo hoặc biểu tượng mở ra sau khi vô tình nhấp vào một nơi nào đó. Để tìm các tệp ẩn này trên một trang web, bạn có thể sử dụng nguồn Kiểm tra tab Phần tử. Một danh sách dạng cây được hiển thị ở bên trái mà bạn có thể khám phá.

hình thu nhỏ onedrive không hiển thị

2] Nhận mã màu HEX/RGB trong Chrome

Đôi khi chúng ta có thể thích một màu và muốn biết mã màu của nó. Bạn có thể dễ dàng tìm thấy mã màu HEX hoặc RGB được sử dụng trên một trang web cụ thể bằng tùy chọn tích hợp sẵn trong Google Chrome. Nhấp chuột phải vào một màu và chọn Quan sát . Trong hầu hết các trường hợp, bạn sẽ nhận được mã màu ở bên phải với CSS khác. Nếu bạn không thấy nó, bạn có thể cần sử dụng phần mềm chọn màu miễn phí.

MẸO : Hãy nhìn vào những Công cụ chọn màu trực tuyến Như nhau.

3] Nhận các mẹo để cải thiện hiệu suất trang web

biểu tượng quả địa cầu windows 10

Mọi người đều thích truy cập một trang web mở ra nhanh chóng. Nếu bạn đang thiết kế trang web của mình, bạn nên luôn ghi nhớ điều này. Có nhiều công cụ để kiểm tra và tối ưu hóa tốc độ tải trang. Tuy nhiên, Google Chrome cũng tích hợp sẵn công cụ cho phép người dùng nhận các thủ thuật để cải thiện tốc độ tải trang web. Để truy cập các công cụ này, hãy truy cập Kiểm toán tab và đảm bảo Sử dụng mạng , Hiệu suất trang web , Tôi Tải lại trang và kiểm tra khi tải đã chọn. Sau đó bấm vào chạy cái nút. Nó sẽ tải lại trang và hiển thị cho bạn một số thông tin có thể được sử dụng để tăng tốc độ trang. Ví dụ: bạn có thể lấy tất cả các tài nguyên chưa hết hạn bộ đệm, JavaScript có thể được kết hợp thành một tệp, v.v.

4] Kiểm tra khả năng phản hồi

Ngày nay, điều cực kỳ quan trọng là làm cho một trang web phản hồi nhanh. Có nhiều công cụ có thể kiểm tra xem trang web của bạn có đáp ứng đầy đủ hay không. Tuy nhiên, công cụ Google Chrome này giúp người dùng biết liệu một trang web có đáp ứng hay không và cũng kiểm tra giao diện của nó trên một thiết bị di động cụ thể. Mở bất kỳ trang web nào, nhận kiểm tra yếu tố tab, bấm vào di động nhấp vào nút, đặt độ phân giải hoặc chọn thiết bị mong muốn để kiểm tra trang web.

vô hiệu hóa cửa sổ khởi động an toàn 10

5] Chỉnh sửa trang web trực tiếp

Giả sử bạn đang xây dựng một trang web, nhưng bạn không biết cách phối màu, kích thước menu điều hướng, nội dung hoặc tỷ lệ khung hình của thanh bên là gì. Bạn có thể chỉnh sửa trang web đang hoạt động của mình bằng cách sử dụng tùy chọn Kiểm tra phần tử trong Google Chrome. Mặc dù bạn không thể lưu các thay đổi đối với một trang web đang hoạt động, nhưng bạn có thể thực hiện tất cả các chỉnh sửa để có thể sử dụng sau này. Để thực hiện việc này, hãy mở Kiểm tra phần tử, chọn thuộc tính HTML ở bên trái và thực hiện thay đổi kiểu ở bên phải. Nếu bạn thực hiện bất kỳ thay đổi nào đối với CSS, bạn có thể nhấp vào liên kết tới tệp, sao chép tất cả mã và dán vào tệp gốc.

Inspect Element từ Google Chrome là người bạn đồng hành thực sự của mọi nhà phát triển web. Cho dù bạn đang thiết kế trang web một trang hay trang web động, bạn chắc chắn có thể hưởng lợi từ những mẹo này.