Có rất nhiều tài nguyên phát triển web có giá trị, có thể là sách, video, 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 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 Show
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ụ Inspect Element 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. Trước tiên, hãy giới thiệu chính thức cho bạn về chính công cụ Inspect Element Hãy xem hướng dẫn bằng video của chúng tôi về cách chỉnh sửa trang web bằng phần tử kiểm traGiớ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 trang web - tính năng Xem nguồn  Tình trạng này đã phổ biến vào những ngày trước khi chúng tôi có Cascading Style Sheets (CSS) và JavaScript dồi dào. Các nhà phát triển web đã sử dụng HTML cho tất cả các yếu tố của trang web, bao gồm nội dung, thiết kế và… tốt, mọi thứ Xem cách Kinsta chống lại đối thủ. So sánh Khi web bắt đầu phát triển và các công nghệ cơ bản tăng sức mạnh, 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 bí mật Sau một thời gian, chức năng đó đã tìm được đường vào hầu hết các trình duyệt. Ngày nay, chúng ta biết tính năng đó là công cụ Inspect Element Đó là một cách mạnh mẽ để xem công nghệ cơ bản và mã 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 trên 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, nhưng bạn có thể làm được nhiều việc hơn với công cụ này Với công cụ Kiểm tra thành phần của trình duyệt, bạn có thể xem hoạt động bên trong của bất kỳ trang web nào, từ HTML đến CSS 👀 Tìm hiểu cách sử dụng công cụ này tại đây ⬇️Nhấp để TweetTouring the Inspect Element PanelCông cụ Inspect Element không chỉ là một cách để hiển thị mã. Thường có một số bảng để truy cập
Trên hết, có nhiều bảng bạn có thể thêm Có các bảng đơn giản, chẳng hạn như Phương tiện và các bảng phức tạp hơn như Trình cấu hình JavaScript và Trình theo dõi hiệu suất. Tóm lại, tên của công cụ Inspect Element đang làm hại tất cả các chức năng dưới mui xe. Nó có sức mạnh to lớn và nên là trung tâm trong 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 traCông cụ Inspect Element gần như là giải pháp “chắc chắn” duy nhất mà bạn cần có trong quá trình phát triển. Chúng ta sẽ đi vào chi tiết kỹ thuật để giải thích 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 Inspect Element Có một số lý do khiến bạn muốn sử dụng công cụ này
Tóm lại, tìm hiểu về phát triển web liên quan đến việc xem xét các ví dụ điển hình về trang web và tìm hiểu điều gì khiến chúng được đánh dấu Công cụ Inspect Element cho phép bạn kiểm tra chính xác HTML và CSS được sử dụng trên một trang web, mang đến 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ạnTin vui là việc tìm kiếm công cụ Inspect Element 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ử Theo mặc định, nó sẽ mở công cụ trong một cửa sổ chia nhỏ. Nó thường 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í đưa công cụ ra ngoài cửa sổ của nó Tất nhiên, bạn cũng có thể truy cập Inspect Element từ thanh công cụ của trình duyệt hoặc thông qua 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 Các phím tắt thường tương tự trên nhiều trình duyệt. Lệnh + Shift + C (Control + Shift + C cho 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 từng mở công cụ Kiểm tra phần tử trước đây, thì nó thường hiển thị ở phía bên phải menu 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 trên thanh công cụ của Kiểm tra phần tử. Tại đây, bạn có thể chuyển bên hiển thị “dock” Lưu ý rằng Firefox cũng sử dụng chế độ xem “ba ngăn” theo mặc định, giúp bạn lấy càng nhiều thông tin trong công cụ Kiểm tra phần tử càng tốt Bây giờ bạn đã mở công cụ này, bạn nên tìm hiểu những gì bạn có thể làm 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ụ Inspect ElementChú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 thế này để cung cấp 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 một trang webMục tiêu chính của công cụ Inspect Element nằm ở cái tên của nó — kiểm tra các thành phần của trang web. Để thực hiện việc này, bạn sẽ truy cập trang web mong muốn, sau đó chọn phương thức mở công cụ phát triển Sau khi mở bảng điều khiển, bạn sẽ nhấp vào mũi tên đóng vai trò là công cụ chọn cho phần tử bạn muốn 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ử Đó là một quy 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àn hình và trình duyệt đíchPhần tử kiểm tra cũng hoạt động như một trình giả lập 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 rất nhiều Trình giả lập này sẽ rất phù hợp để đánh giá xem 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ị xung quanh bàn làm việc của bạn Bạn sẽ thường 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ử 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 Chúng ta sẽ tìm hiểu vấn đề này chi tiết hơ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 webCông cụ Inspect Element cũng có thể giúp bạn đánh giá tốc độ và hiệu suất của trang web thông qua bảng Hiệu suấ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 khi 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 xem một trang có hoạt động hiệu quả ở mức độ 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 bạn 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 Bạn cũng có thể xem tóm tắt về thử nghiệm 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, tóm tắt tổng thể và Nhật ký sự kiện Có thể hình dung 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 hoạt động hoặc hoạt động. Tìm hiểu cách nó hoạt động trong thực tế là điều chúng ta sẽ thảo luận tiếp theo Thủ thuật và mẹo sử dụng công cụ Inspect ElementChúng tôi đã 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 đầu tiên. Hãy cùng xem một số thủ thuật và mẹo để tận dụng 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ớiBạn muốn biết làm thế nào chúng tôi tăng lưu lượng truy cập của mình hơn 1000%?Tham gia cùng hơn 20.000 người khác nhận bản tin hàng tuần của chúng tôi với các mẹo nội bộ về WordPress Theo dõi ngayThay đổ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 trang web. Hãy thảo luận về cách thực hiện điều 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 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 Khi bạn đến phần tử mong muốn, 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 Thành phần 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 nội dung khác Bạn cũng có thể làm việc với CSS theo cách tương tự như HTML. Ví dụ: thực hiện các nút kêu gọi hành động (CTA) trên trang chủ Kinsta Nếu bạn chọn nút bằ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 Cũng như các phần tử HTML, bạn cũng có thể thay đổi giá trị và thêm CSS của mình vào Tất nhiên, đối với các yếu tố như các 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, các. trạng thái di chuột cũng đáng để thay đổi. Để làm điều này, bấm vào nút. liên kết hov trong bảng Kiểu. Việc 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 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 với trạng thái nút mặc định 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 bảng điều khiển MyKinsta 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ó Như bạn mong đợi, những thay đổi này không phải là vĩnh viễn và chỉ cần làm mới nhanh trang, 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 yếu tốCó thể là trước khi bạn có thể thay đổi một phần tử, bạn cần tìm nó. Công cụ Inspect Element 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 rằng, thật khó để tìm thấy 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? . Kiểm tra kế hoạch của chúng tôi Sử dụng điều này sẽ mở bảng điều khiển, cùng với tab Tìm kiếm. Từ đây, hãy nhập thẻ bạn muốn vào hộp văn bản và bạn sẽ thấy danh sách các thành phần được liên kết trên trang 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ày ở 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ó Đâ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à thành phần khác nhau bằng cách bấm chuột phải vào trong ngăn Thành phần và chọn Mở rộng đệ quy 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 thuộc tính CSS, làm cho nó trở thành 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 Nhìn chung, không khó để tìm thấy những gì bạn cần với hai công cụ tìm kiếm và bộ lọc chuyên dụng Sơ lược nhanh về mô hình hộpMộ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 theo các phần tử là bảng điều khiển “mô hình hộp” trực quan Phần tổng quan này cung cấp cho bạn cách 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 Việc giải thích 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 về nội dung và nội dung của 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ử 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 float 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ể hưởng lợi từ việc xem 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 Bố cục — các tùy chọn bạn cần sẽ nằm trong menu 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ị lớp phủ đó 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 thành phần trang web Mô phỏng thiết bị bằng cách sử dụng phần tử kiểm traHọ đã chuyển từ các từ thông dụng thành các thuật ngữ từ vựng tích hợp, nhưng “đáp ứng nhanh” và “thân thiện với thiết bị di động” là các yếu tố phát triển web chính. Do đó, công cụ Inspect Element 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 Safari, tuy nhiên, là khác nhau. Thay vào đó, có nút chuyển đổi Enter/Exit Responsive Design Mode trong menu Develop Bất kể bạn đến đó bằng cách nào, khi bạn chọn tùy chọn này, trang web sẽ hiển thị như thể bạn đang xem nó trên một thiết bị nhỏ hơn Mặc dù Safari chỉ cung cấp cho bạn lựa chọn các thiết bị Apple khác nhau, nhưng các trình duyệt khác sẽ khai thác để cung cấp cho bạn các công cụ bạn cần để 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 khung nhìn cũng như thiết bị nào bạn muốn mô phỏng 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 điều 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 Firefox làm tốt nhất ở đây, với nhiều lựa chọn mạng phù hợp để chọn Để hoàn thiện mọi thứ, 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. Đó là 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 Firefox tụt lại phía sau ở đây, vì Chrome, Brave và những người 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, bây giờ không có lý do gì 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 giữa các trình duyệt. Đó là tin tốt nếu bạn chuyển giữa các công cụ khác nhau để kiểm tra 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 WindowsDi chuyển giữa các nútMũi tên lên và xuốngMở rộng nút đã chọnMũi tên phảiThu gọn nút đã chọnMũi tên tráiMở rộng và thu gọn các nút theo cách đệ quyTùy chọn + Nhấp chuột cho Mac, Alt + Nhấp chuột cho WindowsDi chuyển vào bên trong một nút để . 1Tùy chọn + Mũi tên lên cho Mac, Alt + Mũi tên lên cho WindowsKhi một thuộc tính CSS được chọn, hãy giảm giá trị đi 0. 1Tùy chọn + Mũi tên xuống cho Mac, Alt + Mũi tên xuống cho WindowsTất nhiên, có nhiều phím tắt hơn có sẵn. Mozilla có tài liệu đặc biệt dành 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 được 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 Tìm hiểu sâu về tính năng Kiểm tra phần tử của trình duyệt (và tất cả các công cụ có trong cửa hàng) với hướng dẫn mở rộng này 🔎Nhấp để TweetTóm lượcPhát triển web không còn chỉ là HTML. Có nhiều công nghệ liên quan. Ngay cả khi gắn bó với bộ ba HTML, CSS và JavaScript thần thánh, bạn vẫn cần 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ụ Inspect Element của trình duyệt là một trong những cách tốt nhất để xem bên dưới trang web và tìm hiểu chi tiết rõ ràng về cách thức 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, nhưng 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 hiểu xem nó hoạt động như thế nào 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 Inspect Element không? Nhận tất cả các ứng dụng, cơ sở dữ liệu và trang web WordPress của bạn trực tuyến và dưới một mái nhà. Nền tảng đám mây hiệu suất cao, đầy đủ tính năng của chúng tôi bao gồm
Hãy tự kiểm tra với $20 trong tháng đầu tiên của Lưu trữ ứng dụng hoặc Lưu trữ cơ sở dữ liệu. Khám phá 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 thấy sự phù hợp nhất của bạn Làm cách nào tôi có thể xem tệp PHP của mình trong trình duyệt?php” được đặt trong thư mục “htdocs”. Nếu bạn muốn chạy nó, hãy mở bất kỳ trình duyệt web nào và nhập “localhost/demo. php” và nhấn enter . Chương trình của bạn sẽ chạy.
PHP có hiển thị trong phần tử kiểm tra không?Công cụ kiểm tra phần tử hiển thị HTML sau khi nó được gửi đến máy tính của bạn. Điều đó có nghĩa là bạn sẽ không thấy HTML gốc (nếu JavaScript đang thêm nội dung vào trang) và nếu có PHP, bạn sẽ không thấy mã đó, either. You can only see the client side HTML that is on your browser. |
