Google Chrome được thiết kế không chỉ dành cho người dùng internet thông 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, thiết kế blog, v.v. Tùy chọn Kiểm tra phần tử^{(Inspect Element )} hoặc Kiểm tra^{(Inspect )} của Google Chrome hỗ trợ người dùng tìm một số thông tin về trang web bị ẩn khỏi chế độ xem . Dưới đây là một số mẹo sử dụng phần tử Kiểm tra^{(Inspect Element)} của trình duyệt Google Chrome dành cho ^{(Google Chrome)}PC chạy Windows^{(Windows PC)} .

Kiểm tra thành phần của Google Chrome

1] Find hidden JavaScript/Media files

Nhiều trang web hiển thị cửa sổ bật lên nếu khách truy cập ở lại trang web hơn 15 hoặc 20 giây. Hoặc, nhiều lần một hình ảnh, quảng cáo hoặc biểu tượng sẽ mở ra sau khi nhấp vào một nơi nào đó một cách ngẫu nhiên. Để tìm các tệp ẩn này trên một trang web, bạn có thể sử dụng tab Nguồn của ^(Sources)Kiểm tra phần tử^{(Inspect Element)} . Nó hiển thị một danh sách chế độ xem dạng cây ở phía bên trái có thể được khám phá.

2] Get HEX/RGB color code in Chrome

Đôi khi chúng ta có thể thích một màu và có thể muốn tìm hiểu 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 cách sử dụng tùy chọn gốc trong Google Chrome . Nhấp chuột phải^{(Right-click)} vào màu và nhấp vào Kiểm tra^(Inspect) . Hầu hết thời gian, bạn sẽ nhận được mã màu ở phía bên phải với CSS khác . Nếu bạn không nhìn thấy nó, tốt, bạn có thể phải sử dụng một số phần mềm chọn màu miễn phí.

MẸO^(TIP) : Hãy xem các công cụ trực tuyến của Bộ chọn màu^{(Color Picker online tools)} này .

3] Nhận các mẹo cải thiện hiệu suất trang web^{(3] Get web page performance improvement tips)}

Mọi người đều thích truy cập vào một trang web mở nhanh. Nếu bạn đang thiết kế trang web của mình, bạn nên luôn ghi nhớ điều đó. Có rất nhiều công cụ để kiểm tra và tối ưu tốc độ tải trang. Tuy nhiên, Google Chrome cũng đi kèm với một công cụ có sẵn cho phép người dùng nhận các mẹo để cải thiện tốc độ tải trang web. Để truy cập các công cụ này, hãy chuyển đến tab Kiểm tra và đảm bảo ^(Audits)Sử dụng mạng^{(Network Utilization)} , Hiệu suất trang web^{(Web Page Performance)} và Trang tải lại và Kiểm tra khi tải^{(Reload Page and Audit on Load)} được chọn. Sau đó bấm vào nút Run . 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 để làm cho trang nhanh hơn. Ví dụ: bạn có thể nhận được tất cả các tài nguyên không có bất kỳ sự hết hạn bộ nhớ cache nào, JavaScriptcó thể được kết hợp thành một tệp, v.v.

4] Kiểm tra khả năng đáp ứng^{(4] Check responsiveness)}

Ngày nay, việc tạo ra một trang web đáp ứng là rất quan trọng. Có rất nhiều công cụ có thể kiểm tra xem trang web của bạn có hoàn toàn đáp ứng hay không. Tuy nhiên, công cụ này của Google Chrome giúp người dùng biết liệu trang web có đáp ứng hay không cũng như 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 tab Kiểm tra phần tử , nhấp vào nút ^{(Inspect Element )}di động^{(mobile )} , đặt độ phân giải hoặc chọn thiết bị mong muốn để kiểm tra trang web.

5] Chỉnh sửa trang web trực tiếp^{(5] Edit live website)}

Giả sử rằng bạn đang tạo một trang web, nhưng bạn nhầm lẫn về cách phối màu hoặc kích thước menu điều hướng hoặc nội dung hoặc tỷ lệ thanh bên. Bạn có thể chỉnh sửa trang web trực tiếp của mình bằng cách sử dụng tùy chọn Kiểm tra phần tử^{(Inspect Element)} của Google Chrome . Mặc dù bạn không thể lưu các thay đổi trên 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 thêm. Để làm như vậy, hãy mở Kiểm tra phần tử^{(Inspect Element)} , chọn thuộc tính HTML từ phía bên trái và thực hiện các thay đổi kiểu ở phía bên phải. Nếu bạn thực hiện bất kỳ thay đổi nào trong CSS , bạn có thể nhấp vào liên kết tệp, sao chép toàn bộ mã và dán mã đó vào tệp gốc.

Kiểm tra phần tử^{(Inspect Element)} của Google Chrome là người bạn đồng hành thực sự của mọi nhà phát triển web. Không quan trọng bạn đang phát triển trang web một trang hay trang web động, bạn chắc chắn có thể sử dụng những mẹo này.

Tips on using the Inspect Element of Google Chrome browser

Googlе Chrome is designed not just for regular internet usеrs but also for wеb developеrs, who often create a website, design blogs, etc. The Inspect Element or Inspect option of Google Chrome assists users to find some information about a website that is hidden from view. Here are some tips on using the Inspect Element of Google Chrome browser for Windows PC.

Inspect Element of Google Chrome

1] Find hidden JavaScript/Media files

Many websites show popups if the visitor stays on the web page for more than 15 or 20 seconds. Or, many times an image, ad or icon, opens after clicking somewhere randomly. To find these hidden files on a web page, you can make use of the Sources tab of Inspect Element. It shows a tree-view list on the left-hand side that can be explored.

2] Get HEX/RGB color code in Chrome

Sometimes we may like a color and may want to find out its color code. You can easily find the HEX or RGB color code used on a particular web page, using the native option in Google Chrome. Right-click on the color, and click on Inspect. Most of the time, you will get the color code on the right-hand side with other CSS. If you do not see it, well, you may have to use some free color picker software.

TIP: Take a look at these Color Picker online tools too.

3] Get web page performance improvement tips

Everyone loves to land on a website that opens fast. If you are designing your website, you should always keep that in mind. There are many tools to check and optimize page loading speed. However, Google Chrome also comes with an inbuilt tool that allows users to get tips to improve the website loading speed. To access these tools, go to Audits tab, and make sure Network Utilization, Web Page Performance, and Reload Page and Audit on Load are selected. Then click on Run button. It will reload the page, and show you some information that can be used to make the page faster. For instance, you can get all the resources those are not having any cache expiration, JavaScript that can be combined into one file, and so on.

4] Check responsiveness

Making a web page responsive is crucial, nowadays. There are loads of tools that can check whether your site is completely responsive or not. However, this tool of Google Chrome helps users to know whether the site is responsive or not as well as check how it would look on a particular mobile device. Open any website, get Inspect Element tab, click on the mobile button, set the resolution, or select the desired device to test the web page.

5] Edit live website

Let’s assume that you are creating a web page, but you are confused about the color scheme or navigation menu size or content or sidebar ratio. You can edit your live website using the Inspect Element option of Google Chrome. Although you cannot save the changes on a live website, you can get carry out all the editing so that you can use it further. To do so, open Inspect Element, select the HTML property from the left-hand side and make styling changes on the right-hand side. If you make any change in CSS, you can click on the file link, copy the entire code and paste that into the original file.

Inspect Element of Google Chrome is a real companion of every web developer. It doesn’t matter whether you are developing a one-page website or a dynamic website, you can certainly use these tips.

Related posts

• Google Chrome là không phản hồi, Relaunch bây giờ?

• Cách khắc phục lỗi File Download trên Google Chrome browser

• Cách thay đổi Default Print Settings trong Google Chrome

• Cách Destroy Profile trên Browser Close trong Google Chrome

• Anna Assistant là voice assistant hoàn hảo cho Google Chrome

• Các Great Suspender sẽ tự động đình chỉ các tab trên Google Chrome

• Cách bật và tắt Window Naming trong Google Chrome

• Làm thế nào để sửa chữa Aw, Snap! error message trong Google Chrome browser

• Download official Google Chrome chủ đề cho trình duyệt của bạn

• Cách vô hiệu hóa tính năng đăng nhập tự động trong Google Chrome

• Cách bật và sử dụng Reading List trong Google Chrome

• Tin nhắn Fix ERR_CACHE_MISS error trên Google Chrome

• Cách bật hoặc Disable Tab Scrolling Buttons trong Google Chrome

• Google Chrome vs Firefox Quantum cho Windows 10

• Các phần mở rộng Google Chrome không hoạt động trên Windows 10

• Fix Downloading Proxy Script error trong Google Chrome

• Làm thế nào để Create and Delete Profiles trong trình duyệt web Google Chrome

• Hồ sơ của bạn không thể được mở chính xác trong Google Chrome

• Cách cài đặt Google Chrome bằng Windows PowerShell

• Best YouTube Tiện ích mở rộng cho Google Chrome để cải thiện kinh nghiệm