Có rất nhiều tài nguyên phát triển web có giá trị, có thể là sách, video, các khóa học trực tuyến, v.v. Học cách sử dụng công cụ Kiểm tra phần tử của trình duyệt là một trong những khả năng mạnh mẽ như vậy. Đó là một công cụ học tập vô giá – một công cụ nằm ngay trong tầm tay bạn và luôn có thể truy cập được.

Với tính năng Kiểm tra phần tử, bạn có thể xem hoạt động bên trong của trang web. Mặc dù bạn chỉ có thể xem đánh dấu giao diện người dùng như HTML, CSS và đôi khi là JavaScript, nhưng nó cung cấp cho bạn một cách để xem chính xác cách các nhà phát triển đã xây dựng một trang web.

Trong bài đăng này, chúng tôi sẽ chỉ cho bạn cách sử dụng công cụ Kiểm tra phần tử và một số công nghệ, tính năng và chức năng liên quan mà bạn sẽ gặp. Đầu tiên, hãy giới thiệu chính thức về công cụ Kiểm tra phần tử.

Xem hướng dẫn bằng video của chúng tôi về cách chỉnh sửa trang web với phần tử kiểm tra

Giới thiệu Công cụ Kiểm tra Phần tử

Trong những ngày đầu của web, chỉ có một cách để xem mã của một trang web – tính năng View Source .

The Kinsta View Source page
Trang “Xem Nguồn” của Kinsta.com.

Tình trạng này phổ biến vào những ngày trước khi chúng ta có rất nhiều Trang tính kiểu xếp tầng (CSS) và JavaScript. Các nhà phát triển web đã sử dụng HTML cho tất cả các phần tử của trang web, bao gồm nội dung, thiết kế và… tốt, mọi thứ.

Một khi web bắt đầu phát triển và các công nghệ cơ bản tăng sức mạnh, thì cần phải phát triển các công cụ tốt hơn. Firebug của Firefox là một giải pháp ban đầu để tìm hiểu cách một trang web hoạt động và hoạt động ngầm:

The Firefox and Firebug logos.
Biểu trưng Firefox và Firebug.

Sau một thời gian, chức năng đó đã tìm thấy trên hầu hết các trình duyệt. Ngày nay, chúng ta biết đến tính năng đó là công cụ Kiểm tra phần tử:

The Inspect Element tool used on the Kinsta website.
Công cụ Kiểm tra Phần tử trên trang web Kinsta.

Đó là một cách hiệu quả để xem công nghệ và mã cơ bản của một trang web. Như vậy, bạn có thể tìm thấy nó ở một vài nơi khác nhau – thường thông qua menu thanh công cụ, nhấp chuột phải vào một trang và chọn tùy chọn hoặc bằng phím tắt.

Mặc dù trọng tâm chính của công cụ Kiểm tra phần tử là HTML và CSS của một trang, bạn có thể làm được nhiều việc hơn với nó.

Tham quan bảng kiểm tra phần tử

Brave's DevTools.
Brave’s DevTools.

Công cụ Kiểm tra Phần tử không chỉ là một cách để hiển thị mã. Thường có một số bảng để truy cập:

  • Thanh tra – Đây được gọi là Phần tử trong một số trình duyệt. Đó là màn hình chính trong công cụ Kiểm tra phần tử và hiển thị cho bạn mã trang, cùng với CSS dành riêng cho phần tử. Bạn cũng sẽ tìm thấy thêm chi tiết về “hệ thống lưới” của trang web và các khía cạnh khác.
  • Bảng điều khiển – Đây là nhật ký cảnh báo giao diện người dùng cho một trang web và đó là nơi bạn cũng có thể nhập các đoạn mã để thực hiện kiểm tra nhanh một ý tưởng.
  • Mạng – Tại đây, bạn sẽ thấy các yêu cầu được thực hiện đến và từ một máy chủ, chẳng hạn như tất cả các yêu cầu POST và GET.
  • Hiệu suất – Tất nhiên, một trang web phải hoạt động tốt. Do đó, có một công cụ chuyên dụng để giúp bạn đánh giá một số chỉ số trang web cần thiết. Một số trình duyệt hoạt động tốt hơn những trình duyệt khác ở đây.
  • Bộ nhớ – Bảng điều khiển này cho phép bạn xem cách một trang web sử dụng bộ nhớ và một lần nữa, một số trình duyệt cung cấp các số liệu mở rộng.
  • Ứng dụng – Trong bảng điều khiển này, bạn có thể xem toàn bộ thông tin về bộ nhớ cache của trang web, các dịch vụ nền và hơn thế nữa.

Trên hết, có nhiều bảng khác bạn có thể thêm:

A list of further panels within Brave’s DevTools.
Danh sách các bảng điều khiển khác trong Brave’s DevTools.

Có những bảng đơn giản, chẳng hạn như Media , và những bảng phức tạp hơn như JavaScript ProfilerPerformance monitor . Tóm lại, tên của công cụ Kiểm tra Phần tử đang làm hỏng tất cả các chức năng. Nó có sức mạnh to lớn và phải là trung tâm cho quy trình làm việc của bất kỳ nhà phát triển web nào.

Tại sao bạn muốn sử dụng phần tử kiểm tra

Công cụ Kiểm tra phần tử gần như là giải pháp “đóng đinh” duy nhất mà bạn cần phải có trong quá trình phát triển. Chúng ta sẽ đi vào chi tiết kỹ thuật tại sao trong suốt phần còn lại của bài viết. Tuy nhiên, trước tiên, cần nói về động lực của bạn khi sử dụng phần tử Kiểm tra.

Có một số lý do tại sao bạn muốn sử dụng công cụ:

  • Bạn có thể duyệt các trang web khác để tìm cảm hứng về cách làm việc trên trang web của bạn.
  • Bạn sẽ học cách các trang web hoặc nhà phát triển khác đạt được các kỹ thuật cụ thể.
  • Nó cung cấp cho bạn giấy phép để thử nghiệm trên trang web của bạn mà không có hậu quả.
  • Trong hầu hết các công cụ Kiểm tra phần tử, bạn có cơ hội gỡ lỗi các trang web.
  • Thật tốt khi tìm hiểu thêm về trang web được đề cập.

Nói tóm lại, học về phát triển web liên quan đến việc xem xét các ví dụ điển hình về các trang web và tìm ra điều gì khiến chúng được đánh dấu.

Công cụ Kiểm tra phần tử cho phép bạn kiểm tra HTML và CSS chính xác được sử dụng trên một trang web, mang lại cho bạn cơ hội tuyệt vời để triển khai các khía cạnh và kỹ thuật đó trong công việc của mình.

Cách Tìm Công cụ Kiểm tra Phần tử Trình duyệt của Bạn

Tin tốt là việc tìm kiếm công cụ Kiểm tra phần tử rất đơn giản. Trong hầu hết các trường hợp, bạn sẽ nhấp chuột phải vào một trang và chọn Kiểm tra hoặc Kiểm tra phần tử :

Choosing the Inspect Element tool.
Chọn công cụ Kiểm tra phần tử.

Theo mặc định, nó sẽ mở công cụ trong một cửa sổ chia nhỏ. Nó thường được mặc định ở phía bên tay phải. Nhưng bạn có thể tùy chỉnh điều này theo ý thích của mình và thậm chí bật công cụ ra cửa sổ của nó:

The Inspect Element tool in its own window.
Công cụ Kiểm tra phần tử trong cửa sổ của nó.

Tất nhiên, bạn cũng có thể truy cập Kiểm tra Phần tử từ thanh công cụ của trình duyệt hoặc thông qua một phím tắt. Vị trí chính xác sẽ khác nhau tùy thuộc vào trình duyệt. Ví dụ: trong Firefox, bạn sẽ tìm thấy Công cụ dành cho nhà phát triển web trong menu Công cụ> Công cụ trình duyệt . Ngược lại, Brave (và các trình duyệt dựa trên Chromium khác) có tùy chọn Công cụ dành cho nhà phát triển trong menu Chế độ xem> Nhà phát triển :

Brave’s toolbar menu, showing its developer tools.
Menu thanh công cụ của Brave, hiển thị các công cụ dành cho nhà phát triển của nó.

Các phím tắt thường tương tự trên nhiều trình duyệt: Command + Shift + C ( Control + Shift + C đối với Windows). Phím tắt này giúp bạn nhanh chóng hiển thị các công cụ bạn cần làm việc ngay lập tức.

Nếu bạn chưa bao giờ mở công cụ Kiểm tra phần tử trước đây, công cụ này thường được hiển thị ở phía bên phải của trình đơn của bạn, như chúng tôi đã đề cập trước đó. Để thay đổi điều này, hãy nhấp vào menu đèn giao thông trong thanh công cụ Kiểm tra phần tử. Tại đây, bạn có thể chuyển đổi bên mà “đế cắm” được hiển thị:

The Dock side option in the Inspect Element tool.
Các tùy chọn “Dock side” trong công cụ Kiểm tra phần tử.

Lưu ý rằng Firefox cũng sử dụng chế độ xem “ba ngăn” theo mặc định, giúp bạn nhận được càng nhiều thông tin trong công cụ Kiểm tra phần tử càng tốt:

Firefox's triple pane view.
Chế độ xem “ba ngăn” của Firefox.

Bây giờ bạn đã mở công cụ, bạn nên tìm hiểu xem bạn có thể làm gì với nó. Chúng ta sẽ nói về điều này tiếp theo.

3 Tình huống Sử dụng Công cụ Kiểm tra Phần tử

Chúng tôi đã đề cập đến một số cách bạn sẽ sử dụng công cụ Kiểm tra phần tử, nhưng chúng tôi có thể đi xa hơn điều này để đưa ra một số trường hợp sử dụng. Hãy thảo luận ngắn gọn về những điều này.

1. Tìm kiếm các yếu tố cụ thể trên trang web

Mục tiêu chính của công cụ Kiểm tra phần tử là theo tên của nó – kiểm tra các phần tử trang web. Để làm điều này, bạn sẽ đi đến trang web mong muốn và sau đó chọn phương pháp mở các công cụ phát triển của bạn.

Khi bảng điều khiển mở ra, bạn sẽ nhấp vào mũi tên hoạt động như một bộ chọn cho phần tử mong muốn của bạn:

The Inspector Arrow icon.
Biểu tượng Mũi tên Thanh tra.

Từ đây, bạn có thể di chuột qua bất kỳ phần tử nào trên trang và bạn sẽ thấy phần tử đó được đánh dấu trong cửa sổ Thanh tra / Phần tử :

Highlighting an element in the development tools panel.
Đánh dấu một phần tử trong bảng công cụ phát triển.

Đó là một quá trình đơn giản – một trong những lý do tại sao công cụ Kiểm tra phần tử rất có giá trị và phổ biến với các nhà phát triển web.

2. Mô phỏng Thiết bị Mục tiêu, Màn hình và Trình duyệt

Phần tử Kiểm tra cũng hoạt động như một trình mô phỏng thiết bị. Nói cách khác, bạn có thể xem trang web trông như thế nào trên một thiết bị cụ thể. Các tùy chọn có rất nhiều:

A list of emulated devices within Brave.
Danh sách các thiết bị được mô phỏng được hiển thị trong Brave.

Trình giả lập này sẽ rất tốt để đánh giá xem liệu chiến lược ưu tiên thiết bị di động hoặc thiết kế đáp ứng của bạn có chính xác và hoạt động hay không. Nó vô giá và cũng tiết kiệm chi phí hơn so với việc có 200 thiết bị lơ lửng trên bàn làm việc của bạn.

Bạn sẽ thường xuyên truy cập mô phỏng thiết bị từ một biểu tượng nhỏ ở đâu đó trên bảng Kiểm tra phần tử:

Emulating a device with the Inspect Element tool.
Mô phỏng một thiết bị bằng công cụ Kiểm tra phần tử.

Nhấp vào biểu tượng này sẽ hiển thị trang web của bạn giống như trên thiết bị bạn đã chọn:

Choosing a device to emulate from the Inspect Element tool.
Chọn một thiết bị để mô phỏng từ công cụ Kiểm tra phần tử.

Chúng tôi sẽ tìm hiểu chi tiết hơn về vấn đề này ở phần sau, nhưng đó là một cách vững chắc để làm cho thiết kế của bạn nhất quán trên các thiết bị.

3. Xác định hiệu suất của trang web

Công cụ Kiểm tra phần tử cũng có thể giúp bạn đánh giá tốc độ và hiệu suất của một trang web thông qua bảng Hiệu suất :

The Inspect Element Performance panel.
Bảng Kiểm tra Hiệu suất Phần tử.

Tính năng này hoạt động bằng cách “ghi lại” thời gian tải của các phần tử và tập lệnh cụ thể. Các trình duyệt dựa trên Chromium hoạt động xuất sắc trong việc cung cấp thông tin này. Bạn sẽ ghi lại trang khi nó tải, sau đó xem kết quả ở định dạng dòng thời gian.

Đó là một cách tuyệt vời để xác định liệu một trang có hoạt động tốt ở cấp độ chung hay không. Từ đó, bạn sẽ muốn sử dụng một công cụ như Google PageSpeed Insights hoặc Lighthouse để cải thiện hiệu suất trang web của mình hơn nữa. Các trình duyệt dựa trên Chromium sẽ được tích hợp sẵn trình tạo báo cáo Lighthouse:

A built-in Google Lighthouse report.
Một báo cáo Google Lighthouse được tích hợp sẵn.

Bạn cũng có thể xem tóm tắt về kiểm tra hiệu suất trong một vài tab khác. Ví dụ: bạn có thể xem Cây cuộc gọi , bản tóm tắt tổng thể và Nhật ký sự kiện :

The Inspect Element’s Event Log.
Nhật ký sự kiện của phần tử kiểm tra.

Có thể tưởng tượng rằng bạn sẽ không cần bất kỳ công cụ nào khác để đánh giá cách trang web của bạn thực hiện hoặc hoạt động. Tìm hiểu cách nó hoạt động trong thực tế là điều mà chúng ta sẽ thảo luận tiếp theo.

Thủ thuật và Mẹo sử dụng Công cụ Kiểm tra Phần tử

Chúng ta đã nói về cách công cụ Kiểm tra phần tử mạnh hơn so với cái nhìn sơ qua. Hãy cùng xem một số thủ thuật và mẹo để khai thác tốt nhất bộ tính năng của nó, bắt đầu từ những điều cơ bản.

Đăng kí để nhận thư mới

Thay đổi Thuộc tính, Giá trị và Trạng thái của Phần tử

Cho đến nay, chúng tôi mới chỉ đề cập đến khái niệm sử dụng công cụ Kiểm tra phần tử để thực hiện các thay đổi tạm thời đối với một trang web. Hãy thảo luận cách thực hiện việc này chi tiết hơn.

Các bước rất đơn giản. Đầu tiên, sử dụng biểu tượng mũi tên để chọn phần tử bạn đã chọn. Bạn sẽ thấy một lớp phủ làm nổi bật các thành phần khác nhau khi bạn di chuột qua chúng:

Selecting elements in the Inspect Element tool.
Chọn phần tử trong công cụ Kiểm tra phần tử.

Khi bạn đến phần tử mong muốn của mình, bạn có thể nhấp đúp vào hầu hết mọi nơi bạn thấy thẻ trong bảng Phần tử và nhập thay đổi. Ví dụ: chúng tôi muốn thay đổi văn bản anh hùng ban đầu trên trang chủ Kinsta thành một cái gì đó khác:

Changing text on the Kinsta home page.
Thay đổi văn bản trên trang chủ Kinsta.

Bạn cũng có thể làm việc với CSS theo cách tương tự như HTML. Ví dụ: sử dụng các nút gọi hành động (CTA) trên trang chủ Kinsta:

Selecting a button on the Kinsta home page.
Chọn một nút trên trang chủ Kinsta.

Nếu bạn chọn nút bằng cách sử dụng con trỏ, bạn có thể thấy CSS liên quan của nó trong bảng Kiểu bên tay phải:

The Style panel within the Inspect Element tool.
Bảng Kiểu trong công cụ Kiểm tra Phần tử.

Như với các phần tử HTML, bạn có thể thay đổi các giá trị và thêm CSS của mình vào:

Changing the button color in the Styles panel.
Thay đổi màu nút trong bảng Kiểu.

Tất nhiên, đối với các phần tử như nút, bạn có thể muốn làm việc với các trạng thái khác nhau của nó. Trong trường hợp này, trạng thái : hover cũng có giá trị thay đổi. Để thực hiện việc này, hãy nhấp vào liên kết : hov trong bảng Kiểu. Chọn tùy chọn này sẽ hiển thị danh sách các trạng thái phần tử và bạn có thể chọn những trạng thái bạn muốn xem CSS trạng thái di chuột cho:

Bringing up the states options in the Styles panel.
Hiển thị các tùy chọn “Bang” trong bảng Kiểu.

Trang web sẽ hiển thị trạng thái trông như thế nào mà bạn không cần phải hành động. Ở đây, chúng tôi đã thay đổi màu di chuột để phân biệt nó với trạng thái nút mặc định:

Changing hover state colors in the Styles panel.
Thay đổi màu trạng thái di chuột trong bảng Kiểu.

Bạn thậm chí có thể lấy URL hình ảnh và hoán đổi chúng cho người khác. Trên trang chủ Kinsta, chúng tôi hiển thị ảnh chụp màn hình của trang tổng quan MyKinsta:

The MyKinsta dashboard on the Kinsta home page.
Bảng điều khiển MyKinsta trên trang chủ Kinsta.

Thông qua việc định vị phần tử và thay đổi URL nguồn của hình ảnh, bạn có thể kiểm tra các hình ảnh khác ở vị trí của nó:

Changing an image on the Kinsta home page.
Trong trường hợp này, thay đổi có hiệu lực trong vòng vài phút (Nguồn ảnh: Pixabay).

Như bạn mong đợi, những thay đổi này không phải là vĩnh viễn và với việc làm mới trang nhanh chóng, bạn có thể đưa mọi thứ trở lại bình thường. Thay vào đó, bạn cũng có thể sao chép HTML và CSS sang trình chỉnh sửa của mình và đưa chúng vào mã của bạn để thực hiện những thay đổi đó vĩnh viễn.

Tìm kiếm các phần tử

Có thể là trước khi bạn có thể thay đổi một phần tử, bạn cần phải tìm nó. Công cụ Kiểm tra Phần tử có chức năng tìm kiếm đơn giản có thể giúp bạn tìm thấy bất kỳ khía cạnh nào của trang web.

Điều đó nói lên rằng, rất khó để tìm nếu bạn không biết tìm ở đâu. Cách “chính thức” trong các trình duyệt dựa trên Chromium là đi tới menu “đèn giao thông” ở phía bên phải của trang và chọn tùy chọn Tìm kiếm :

Cần lưu trữ đặc biệt, nhanh chóng và an toàn cho trang web mới của bạn? Kinsta cung cấp các máy chủ nhanh như chớp và hỗ trợ 24/7 từ các chuyên gia web đẳng cấp thế giới. Kiểm tra các kế hoạch của chúng tôi

The Search option in Brave’s DevTools.
Tùy chọn “Tìm kiếm” trong Brave’s DevTools.

Sử dụng điều này sẽ mở bảng Console , cùng với tab Tìm kiếm . Từ đây, hãy nhập thẻ mong muốn của bạn vào hộp văn bản và bạn sẽ thấy danh sách các phần tử được liên kết trên trang:

Searching for elements in Brave’s DevTools.
Tìm kiếm các phần tử trong Brave’s DevTools.

Lưu ý rằng trong các trình duyệt khác, bạn có thể tìm thấy chức năng ở nơi khác. Ví dụ: Firefox bao gồm một hộp tìm kiếm ở đầu bảng Thanh tra của nó:

Searching for elements in the Firefox Inspector panel.
Tìm kiếm các phần tử trong bảng Thanh tra của Firefox.

Đây là một mẹo nhanh khác: Bạn có thể thực hiện mở rộng đệ quy các nút và phần tử khác nhau bằng cách nhấp chuột phải trong ngăn Thành phần và chọn Mở rộng đệ quy :

The Expand recursively option in the Elements panel.
Tùy chọn Mở rộng đệ quy trong bảng Phần tử.

Nếu bạn nhìn vào bảng Kiểu , bạn cũng sẽ thấy hộp văn bản Bộ lọc . Trường này cho phép bạn lọc theo các thuộc tính CSS, làm cho nó trở thành một người bạn đồng hành tuyệt vời với chức năng tìm kiếm toàn cầu:

Filtering by properties in the Styles panel.
Lọc theo thuộc tính trong bảng Kiểu.

Nhìn chung, không khó để tìm thấy những gì bạn cần với hai bộ lọc và công cụ tìm kiếm chuyên dụng.

Một lớp lót nhanh trên mô hình hộp

Một trong những cách tốt nhất mà công cụ Kiểm tra phần tử có thể giúp bạn tìm hiểu thêm về cách các thuộc tính CSS hoạt động trên các phần tử là bảng điều khiển “mô hình hộp” trực quan.

The Box Model.
Mô hình Hộp.

Tổng quan này cung cấp cho bạn sự trình bày về cách một hộp cụ thể (chẳng hạn như “phần tử” hoặc “div”) xuất hiện trên màn hình. Nói cách khác, đó là tổng quan về cách kết hợp lề, phần đệm, đường viền và nội dung để trở thành phần bạn thấy trên màn hình.

Giải thích về mô hình hộp CSS hoàn chỉnh và cách nó tương tác với HTML của trang web nằm ngoài phạm vi của bài viết này, mặc dù Mozilla có một hướng dẫn tuyệt vời để hiểu rõ hơn về khái niệm này.

Bạn sẽ thường tìm thấy bảng Mô hình Hộp trong phần Bố cục hoặc Tính toán của ngăn bên phải của công cụ Kiểm tra phần tử:

The Box Model panel within the Inspect Element tool.
Bảng “Mô hình hộp” trong công cụ Kiểm tra phần tử.

Như với bất kỳ phần tử và thuộc tính nào, bạn cũng có thể thay đổi các giá trị và cài đặt của một hộp cụ thể. Cũng sẽ có một danh sách các thuộc tính khác để giúp bạn định vị hộp, đặt chỉ mục z, áp dụng cài đặt nổi và hiển thị, v.v.

Trong khi làm việc với mô hình hộp, bạn cũng có thể được lợi khi thấy hệ thống lưới đang hoạt động trên trang. Để thực hiện việc này, hãy xem bảng Layout – các tùy chọn bạn cần sẽ nằm trong menu Grid :

The Grid settings menu.
Menu Cài đặt lưới.

Nhấp vào cài đặt hiển thị mong muốn của bạn và sau đó chọn lớp phủ có liên quan sẽ hiển thị trên màn hình, cho phép bạn đưa ra quyết định chính xác hơn bằng cách sử dụng mô hình hộp để thao tác các phần tử trang web.

Mô phỏng thiết bị bằng phần tử kiểm tra

Họ đã chuyển từ từ thông dụng sang các thuật ngữ từ vựng được tích hợp, nhưng “đáp ứng” và “thân thiện với thiết bị di động” là những yếu tố phát triển web chính. Do đó, công cụ Kiểm tra phần tử giải quyết khía cạnh này thông qua một số tính năng.

Trong hầu hết các trình duyệt, công cụ Kiểm tra phần tử sẽ có biểu tượng thiết bị di động dọc theo thanh công cụ trên cùng:

Toggling mobile responsive viewing within Brave.
Chuyển đổi chế độ xem phản hồi trên thiết bị di động trong Brave.

Safari thì khác. Thay vào đó, có một nút bật / tắt Enter / Exit Responsive Design Mode trong menu Develop :

The Exit Responsive Design Mode option in Safari.
Tùy chọn “Thoát khỏi chế độ thiết kế đáp ứng” trong Safari.

Bất kể bạn đến đó bằng cách nào, khi bạn chọn tùy chọn, trang web sẽ hiển thị như thể bạn đang xem trên một thiết bị nhỏ hơn:

A mobile device layout view in Firefox.
Chế độ xem bố cục thiết bị di động trong Firefox.

Mặc dù Safari chỉ cung cấp cho bạn sự lựa chọn các thiết bị Apple khác nhau, nhưng các trình duyệt khác sẽ cung cấp cho bạn những công cụ cần thiết để thiết kế theo nguyên tắc ưu tiên thiết bị di động. Ví dụ: bạn có thể chọn hướng của chế độ xem, cũng như thiết bị bạn muốn mô phỏng:

The Device Emulation list in Brave.
Danh sách “Mô phỏng thiết bị” trong Brave.

Có hai tính năng thú vị khác ở đây. Đầu tiên, bạn có thể chọn tốc độ mạng giả lập. Safari không bao gồm bất kỳ tùy chọn nào cho việc này và các trình duyệt dựa trên Chromium cung cấp một lựa chọn nhỏ, chung về điều chỉnh mạng:

The throttling options in Brave.
Các tùy chọn điều chỉnh trong Brave.

Firefox làm tốt nhất ở đây, với nhiều lựa chọn mạng để chọn:

Firefox's throttling options.
Các tùy chọn điều chỉnh của Firefox.

Để giải quyết vấn đề, bạn cũng có thể mô phỏng phản hồi xúc giác và nhận dạng cảm biến. Đây là chế độ mặc định trong các trình duyệt dựa trên Chromium và trong Firefox, bạn phải bật nó lên:

The haptic feedback option in Firefox.
Tùy chọn phản hồi xúc giác trong Firefox.

Firefox bị tụt lại phía sau vì Chrome, Brave và các ứng dụng khác hiển thị con trỏ của bạn dưới dạng một lớp phủ nhỏ “giống như đầu ngón tay”. Chức năng này không hoàn hảo cho bất kỳ trình duyệt nào, mặc dù đó là một cách đáng tin cậy để xác định cách trang web của bạn có thể hoạt động trên các thiết bị khác.

Loại thử nghiệm này thường không phù hợp với nhiều nhà phát triển web. Điều đó nói rằng, không có lý do gì bây giờ khi các trình duyệt cung cấp các giải pháp toàn diện như thế này.

Phím tắt khi sử dụng công cụ kiểm tra phần tử

Hầu hết các phím tắt của trình duyệt thường giống nhau trên các trình duyệt. Đó là tin tốt nếu bạn di chuyển giữa các công cụ khác nhau để kiểm tra các trang web của mình.

Dưới đây là danh sách nhanh một số phím tắt phổ biến nhất (và có giá trị):

Mở công cụ Kiểm tra phần tử Command + Shift + C cho Mac, Control + Shift + C cho Windows
Di chuyển giữa các nút Mũi tên lênxuống
Mở rộng nút đã chọn Mũi tên phải
Thu gọn nút đã chọn Mũi tên trái
Các nút mở rộng và thu gọn đệ quy Option + Click cho Mac, Alt + Click cho Windows
Di chuyển bên trong một nút để làm việc với các thuộc tính Nhập hoặc trở lại
Bước tiếp qua các thuộc tính của nút Chuyển hướng
Lùi lại các thuộc tính của một nút Shift + Tab
Ẩn hoặc hiển thị nút đã chọn H
Chỉnh sửa và dừng chỉnh sửa một nút dưới dạng HTML F2
Khi một thuộc tính CSS được chọn, hãy tăng giá trị lên một Mũi tên lên
Khi một thuộc tính CSS được chọn, hãy giảm giá trị đi một Mũi tên xuống
Khi một thuộc tính CSS được chọn, hãy tăng giá trị lên mười Shift + Mũi tên lên
Khi một thuộc tính CSS được chọn, hãy giảm giá trị đi 10 Shift + Mũi tên xuống
Khi một thuộc tính CSS được chọn, hãy tăng giá trị lên 0,1 Tùy chọn + Mũi tên lên cho Mac, Alt + Mũi tên lên cho Windows
Khi một thuộc tính CSS được chọn, hãy giảm giá trị đi 0,1 Tùy chọn + Mũi tên xuống cho Mac, Alt + Mũi tên xuống cho Windows

Tất nhiên, có rất nhiều phím tắt khác có sẵn. Mozilla có tài liệu đặc biệt cho Firefox, trong khi Chrome, Brave, Edge và những người khác chia sẻ các phím tắt. Apple ít hữu ích hơn với các phím tắt dành cho nhà phát triển Safari, vì không có danh sách xác định trong các trang trợ giúp của họ. Thay vào đó, chúng tôi khuyên bạn nên đọc qua tài liệu chính thức về các công cụ dành cho nhà phát triển của Safari.

Bản tóm tắt

Phát triển web không còn chỉ là HTML. Có rất nhiều công nghệ liên quan. Ngay cả khi gắn bó với bộ ba HTML, CSS và JavaScript, bạn vẫn cần phải xem cách một trang web kết hợp tất cả các thành phần này lại với nhau.

Công cụ Kiểm tra Phần tử của trình duyệt là một trong những cách tốt nhất để xem xét nội dung của một trang web và tìm hiểu chi tiết rõ ràng về cách hoạt động của nó. Mặc dù nó tuyệt vời như một công cụ hỗ trợ học tập, nó cũng có thể giúp bạn kiểm tra các thay đổi đối với trang web của mình và tìm cách nó hoạt động trên các thiết bị và mạng di động khác nhau.

Bạn có thường xuyên sử dụng phần tử Kiểm tra không? Nếu vậy, tính năng yêu thích của bạn là gì? Chia sẻ ý kiến của bạn trong phần bình luận!


Tiết kiệm thời gian, chi phí và tối đa hóa hiệu suất trang web với:

  • Trợ giúp tức thì từ các chuyên gia lưu trữ WordPress, 24/7.
  • Tích hợp Cloudflare Enterprise.
  • Tiếp cận khán giả toàn cầu với 34 trung tâm dữ liệu trên toàn thế giới.
  • Tối ưu hóa với Giám sát Hiệu suất Ứng dụng được tích hợp sẵn của chúng tôi.

Tất cả những điều đó và hơn thế nữa, trong một kế hoạch không có hợp đồng dài hạn, hỗ trợ di chuyển và đảm bảo hoàn tiền trong 30 ngày. Kiểm tra các kế hoạch của chúng tôi hoặc nói chuyện với bộ phận bán hàng để tìm ra kế hoạch phù hợp với bạn.