Cách xem mã HTML của bất kỳ trang web nào trong bất kỳ trình duyệt nào

Một trang web không hơn gì sản phẩm của nhà phát triển và nhà thiết kế web mà họ tìm cách thu hút sự chú ý của người dùng, mặc dù chúng ta cũng có thể định nghĩa nó như một tập hợp các phần tử HTML được sắp xếp chính xác. Nếu bạn muốn xem các trang web bạn truy cập hoạt động kín đáo, cho dù vì tò mò hay chỉ để thỏa mãn nhu cầu tự học của mình, bạn có thể truy cập mã HTML của bất kỳ trang web nào từ bất kỳ trình duyệt nào rất dễ dàng.

Theo dữ liệu từ Satcounter, vào tháng 2022 năm XNUMX, trình duyệt được sử dụng nhiều nhất trên toàn thế giới trên máy tính là Google cơ rôm, với tỷ lệ 66%. Ở vị trí thứ hai và liên tục tăng trưởng, là microsoft Cạnh Chromium với chỉ hơn 10% thị phần. Ở vị trí thứ ba và thứ tư là Safari (mà chúng tôi sẽ không nói đến trong bài viết này vì nó không có sẵn cho Windows) Và Firefox với thị phần lần lượt là 9.1% và 7.6%.

xem mã HTML của bất kỳ trang web nào trong bất kỳ trình duyệt nào

Việc phân loại 5 trình duyệt được sử dụng nhiều nhất trên thế giới trên nền tảng máy tính để bàn đã kết thúc (trên thiết bị di động, mọi thứ không thay đổi nhiều) với Opera, một công ty hiện đứng sau một tập đoàn các công ty Trung Quốc, với 2.6% thị phần. Xem xét các trình duyệt được sử dụng nhiều nhất, dưới đây, chúng tôi hướng dẫn bạn cách truy cập mã HTML của bất kỳ trang web nào bằng các trình duyệt khác nhau.

Mã HTML của một trang web là gì và nó dùng để làm gì?

Tất cả các trình duyệt đều bao gồm một chức năng được gọi là công cụ dành cho nhà phát triển, trình kiểm tra web, kiểm tra phần tử… với mục đích chính là cho phép người dùng để truy cập mã HTML của web , mã nguồn của web mà chúng tôi truy cập để phân tích hoạt động của các phần tử khác nhau tạo nên nó, phát hiện lỗi và tìm giải pháp. Nó cũng đặc biệt hữu ích cho những người dùng đang thực hiện những bước đầu tiên trong thiết kế web.

Mỗi trình duyệt sử dụng một trình kiểm tra khác nhau được triển khai trong trình duyệt cơ sở. Trong trường hợp của Chrome, Edge và Opera, dựa trên Chromium, trình kiểm tra được sử dụng hoàn toàn giống nhau. Điều duy nhất thay đổi một chút là bố cục và các tùy chọn duyệt web.

Khi truy cập mã HTML, tất cả thông tin được phân loại trong các tab khác nhau để việc truy cập vào tất cả các phần bao gồm nó dễ dàng hơn nhiều. Nếu kiến ​​thức của chúng ta rất cao, bằng cách truy cập vào tab Elements, chúng ta sẽ có quá đủ.

Từ tab Elements, chúng ta có thể truy cập tất cả mã HTML của web. Nếu chúng ta di chuyển chuột qua các dòng mã khác nhau trong Thanh tra, chúng ta sẽ thấy nội dung nó đề cập đến trên web được đánh dấu như thế nào để cho biết nó đề cập đến phần nào của web.

Với Google Chrome

Công cụ dành cho nhà phát triển có sẵn trong Google Chrome là chức năng cho phép chúng tôi truy cập mã HTML của tất cả các trang web mà chúng tôi truy cập. Trình duyệt của Google cung cấp cho chúng tôi ba phương pháp khác nhau để truy cập công cụ này, các phương pháp bao gồm từ phím tắt đến phím chức năng thông qua menu cấu hình Chrome.

Código HTML Chrome

  • Phím F12. Đây là phương pháp nhanh nhất để truy cập Công cụ dành cho nhà phát triển Google Chrome, miễn là chúng ta không có bàn phím rút gọn và chúng ta phải sử dụng phím Chức năng (Fn). Lần đầu tiên chúng tôi sử dụng nút này, trình duyệt sẽ cho phép chúng tôi liên kết hoạt động của phím này với chức năng này.
  • Điều khiển + Shift + i . Nếu bạn đã sử dụng phím tắt trong cuộc sống hàng ngày của mình để tăng năng suất và giảm sự phụ thuộc vào chuột, bạn có thể sử dụng phím tắt này để truy cập mã Chrome.
  • Thông qua menu . Từ trình đơn cấu hình Google Chrome, chúng tôi cũng có thể truy cập trình đơn Công cụ để kiểm tra mã, bằng cách nhấp vào ba điểm dọc nằm ở góc trên bên phải. Tiếp theo, chúng ta tìm đến Công cụ khác và cuối cùng nhấp vào tùy chọn cuối cùng: Công cụ dành cho nhà phát triển.
  • Với nút chuột phải , chúng tôi có thể truy cập cả mã nguồn của web và các công cụ dành cho nhà phát triển.

Thông qua Microsoft Edge

Nếu chúng tôi muốn truy cập mã HTML của trang mà chúng tôi tìm thấy chính mình bằng Microsoft Edge, trình duyệt Microsoft cung cấp cho chúng tôi ba phương pháp khác nhau. Không có gì ngạc nhiên khi cả ba phương pháp đều giống như trong Google Chrome, vì cả hai đều dựa trên Chromium và chia sẻ cùng một cơ sở trình duyệt.

código HTML Edge

Không giống như Google, Microsoft gọi công cụ này là Công cụ phát triển, một công cụ mà chúng tôi có thể truy cập bằng một trong các phương pháp khác nhau mà chúng tôi chỉ cho bạn bên dưới:

  • Phím chức năng F12. Như với Chrome, đây là phương pháp nhanh nhất và dễ dàng nhất. Lần đầu tiên chúng tôi sử dụng nút này, trình duyệt sẽ cho phép chúng tôi liên kết hoạt động của phím này với chức năng này.
  • Với phím tắt Điều khiển + Shift + i . Thêm một phím tắt nữa trong cuộc sống của bạn nếu bạn đã quen với việc sử dụng chúng, nó sẽ không thành vấn đề.
  • Từ menu . Nhấp vào ba điểm nằm ngang nằm ở góc trên bên phải. Tiếp theo, nhấp vào Công cụ khác và cuối cùng nhấp vào tùy chọn cuối cùng: Công cụ phát triển.
  • Để truy cập mã nguồn của trang web nơi chúng tôi đang ở, hãy nhấn nút chuột phải và chọn tùy chọn Xem mã nguồn trang. Nếu chúng ta chọn tùy chọn Kiểm tra, Công cụ Nhà phát triển Edge sẽ được hiển thị.

Nếu đây là lần đầu tiên chúng tôi truy cập Công cụ dành cho nhà phát triển, trình duyệt sẽ hỏi chúng tôi xem chúng tôi có muốn Mở Công cụ dành cho nhà phát triển Microsoft Edge hay không.

Từ Firefox

Firefox của Mozilla Foundation là trình duyệt duy nhất trong danh sách này không dựa trên Chromium, vì vậy các phương pháp trên về mặt lý thuyết sẽ không hoạt động, tuy nhiên, chúng không hoạt động, vì chúng hoàn toàn giống nhau.

código HTML Firefox

Tuy nhiên, điểm khác biệt chính mà Firefox cung cấp cho chúng ta so với các trình duyệt còn lại là ở vị trí nơi trình kiểm tra mã của web nơi chúng ta được hiển thị. Trong khi tất cả các trình duyệt dựa trên Chromium đều hiển thị mã web ở phía bên phải của trình duyệt, Firefox chọn hiển thị thông tin này ở dưới cùng, giúp thông tin hiển thị dễ truy cập hơn.

Nếu muốn truy cập bảng Công cụ dành cho nhà phát triển thông qua Firefox, chúng tôi có 3 tùy chọn tương tự với Chrome và Edge Chromium.

  • Phím F12. Nhấn phím chức năng này sẽ khiến Firefox hiển thị Công cụ dành cho nhà phát triển ở cuối trình duyệt.
  • Sử dụng phím tắt Điều khiển + Shift + i sẽ mở mã HTML của trang web mà chúng ta đang ở.
  • Nếu bạn là một trong những người dùng cảm thấy khó buông chuột, bạn có thể truy cập mã HTML của một trang web thông qua Menu tùy chọn Firefox , bằng cách nhấp vào ba đường ngang nằm ở góc trên bên phải của trình duyệt và Công cụ khác> Công cụ dành cho nhà phát triển.
  • Từ nút chuột phải , chúng ta có thể truy cập mã HTML của web bằng cách chọn tùy chọn Xem mã nguồn trang. Tuy nhiên, nếu chúng ta muốn truy cập vào bảng điều khiển Công cụ dành cho nhà phát triển, chúng ta phải chọn tùy chọn Kiểm tra.

Opera

Mặc dù Opera dựa trên dự án Chromium giống như Google Chrome và Microsoft Edge, nhưng các phương pháp mà trình duyệt này cung cấp cho chúng ta không giống nhau. Nơi mà nó trùng với các trình duyệt khác dựa trên cùng một dự án là ở vị trí mà nó được hiển thị, không phải nơi nào khác ngoài phía bên phải của trình duyệt.

código HTML Opera

Các phương pháp khác nhau mà trình duyệt Opera cung cấp cho người dùng để truy cập mã HTML của bất kỳ trang nào là như sau:

  • Với phím tắt Điều khiển + Shift + i , cùng một phím tắt mà tất cả các trình duyệt đã áp dụng là phổ biến bất kể chúng dựa trên dự án nào. Đường tắt Điều khiển + Shift + c cũng có sẵn
  • Nhấn nút chuột phải và chọn tùy chọn Kiểm tra nguyên tố từ mọi nơi trên web.
  • Mã HTML của web mà chúng tôi mở trong Opera có sẵn từ nút bên phải thông qua tùy chọn Nguồn trang. Để kiểm tra mã HTML, từ cùng một menu được hiển thị khi bạn nhấn nút bên phải, chúng ta phải chọn tùy chọn Kiểm tra.