Mã nguồn chính. Cách mở mã nguồn của một trang

Chúng tôi đã phát hành một cuốn sách mới, Tiếp thị nội dung trên mạng xã hội: Cách thu hút người theo dõi và khiến họ yêu thích thương hiệu của bạn.

Mã nguồn của một trang web là tập hợp các đánh dấu HTML, kiểu CSS và tập lệnh JavaScript mà trình duyệt nhận được từ máy chủ web.

Các video khác trên kênh của chúng tôi - tìm hiểu tiếp thị qua internet với SEMANTICA

Nó có thể được so sánh với một tập hợp các mệnh lệnh do người chỉ huy đưa ra cho binh lính. Hãy tưởng tượng rằng khán giả không nhìn thấy hoặc nghe thấy ông chủ. Theo quan điểm của họ, quân đội thực hiện các hành động một cách độc lập. Trong trường hợp của chúng tôi, người chỉ huy là trình duyệt, các lệnh là mã nguồn và những người lính hành quân là kết quả cuối cùng.

Trang web được lưu trữ trên một máy chủ web, máy chủ này sẽ gửi trang theo yêu cầu của người dùng. Yêu cầu là nhập URL vào thanh địa chỉ, nhấp vào liên kết hoặc nhấp vào nút gửi trên biểu mẫu. Việc các trang web được viết bằng ngôn ngữ nào không quan trọng hoặc liệu chúng có bao gồm một thành phần phần mềm hay không. Kết quả cuối cùng của bất kỳ thuật toán phía máy chủ nào là một tập hợp các thẻ html và văn bản.
Mã nguồn trang là một tập hợp dữ liệu bao gồm:

đánh dấu html;
biểu định kiểu hoặc liên kết tệp;
các chương trình được viết bằng JavaScript hoặc liên kết đến các tệp có mã.

Ba phần này được trình duyệt xử lý. Đối với máy chủ, đây chỉ đơn giản là văn bản cần được gửi để đáp ứng yêu cầu.

Tại sao chúng ta có thể cần nghiên cứu mã nguồn

Mọi thứ chúng tôi thấy, chúng tôi đều có thể phân tích và áp dụng để giải quyết một số vấn đề phát sinh khi làm việc với trang web, đặc biệt là khi tối ưu hóa nó. Bằng cách nhìn vào mã nguồn, chúng ta có thể:

Xem các thẻ meta của trang web của bạn hoặc của người khác để phân tích chúng.
Xem sự hiện diện hay vắng mặt của một số thành phần nhất định trên trang web: bộ đếm, mã nhận dạng trong các hệ thống khác nhau, các tập lệnh nhất định và những thứ khác.
Tìm hiểu các thông số của các thành phần: kích thước, màu sắc, phông chữ.
Tìm đường dẫn đến ảnh và các thành phần khác trên trang.
Khám phá các liên kết từ trang.
Tìm vấn đề về mã cản trở quá trình tối ưu hóa trang web: kiểu không được đặt trong các tệp riêng biệt, tập lệnh, mã không hợp lệ.

Đây là những tính năng cơ bản nhưng trên thực tế, bằng cách đọc mã, bạn có thể tìm hiểu thêm nhiều điều về trang.

Cách xem mã nguồn của một trang web

Sẽ không thể thực hiện việc này hoàn toàn dưới dạng nó được đăng trên máy chủ từ trình duyệt. Nhưng bạn có thể xem tất cả các đánh dấu bằng cách nhấp chuột phải vào trang. Ở đây và bên dưới sử dụng Google Chrome làm ví dụ.

Chọn tùy chọn “Xem mã trang” và nhận danh sách đầy đủ trong một tab riêng.

Đó chỉ là văn bản mà bạn phải phân tích để hiểu. Nhưng bạn có thể lấy mã tương tác bằng cách sử dụng các công cụ dành cho nhà phát triển.

Cách tìm mã nguồn của một trang web

Bấm vào biểu tượng menu trên trình duyệt. Thông thường nó ở bên phải và trông giống như ba dấu chấm hoặc sọc.

Trong phần công cụ bổ sung, chọn “Công cụ dành cho nhà phát triển”.

Một cửa sổ sẽ mở ra hiển thị trạng thái hoạt động của mã. Điều này có nghĩa là khi bạn nhấp vào đánh dấu, kiểu phần tử sẽ xuất hiện bên cạnh nó và các khối đã chọn sẽ được đánh dấu trên trang.

Trong tab “Nguồn”, bạn có thể xem nội dung của một số tệp: tập lệnh, phông chữ, hình ảnh.

Trong tab “Bảo mật”, bạn có thể kiểm tra chứng chỉ của trang web.

Tab “Kiểm tra” sẽ giúp bạn kiểm tra tài nguyên được đăng trên máy chủ.

Nếu vị trí của bảng bên phải không thuận tiện, bạn có thể nhấp vào ba dấu chấm và thay đổi nó bằng cách chọn mục mong muốn.

Cách xem thẻ meta

Mọi tài liệu HTML đều bao gồm các thẻ cấu trúc. Dưới đây là một số trong số họ:

Html – toàn bộ tài liệu.
Head – phần của tiêu đề dịch vụ.
Tiêu đề – tiêu đề trang (hiển thị trên tab).
Phần thân - phần thân của tài liệu.
H1-H6 – tiêu đề văn bản trang.
Bài báo – bài viết.
Phần - phần.
Thực đơn – thực đơn.
Div – khối.
Khoảng cách - chuỗi.
P – đoạn văn.
Bàn – bàn.

Các phần tử được thiết kế để phân định một cách hợp lý các phần trên một trang; nếu cần, chúng được thiết kế bằng các kiểu. Chúng chứa văn bản có thể nhìn thấy được bằng cách nào đó trên trang. Nhưng thẻ Head chứa thông tin dịch vụ. Thẻ meta được sử dụng để chỉ ra nó. Mọi thứ được viết trong đó đều dành cho máy chủ và công cụ tìm kiếm.

Nội dung của chúng không thể được tìm ra theo bất kỳ cách nào khác.

Hãy chú ý đến thẻ Liên kết. Với sự trợ giúp của nó, các liên kết đến các tệp đi kèm bên ngoài sẽ được chỉ định. Nếu muốn, bạn có thể xem nội dung và lưu vào đĩa. Để thực hiện việc này, hãy di chuyển con trỏ đến địa chỉ và nhấn RMB. Chọn "Mở trong tab mới".

Tệp được chỉ định sẽ mở trong tab mới mà bạn có thể xem hoặc lưu.

Cách xem mã nguồn của trang để gỡ lỗi tập lệnh

Trong trường hợp này, thuận tiện nhất là mở trang trên máy cục bộ. Nếu bạn chỉ cần sửa đánh dấu, kiểu và tập lệnh thì việc này có thể được thực hiện trực tiếp từ thư mục. Mã HTML được xem theo cách tương tự. Nhưng có thể thấy lỗi mã JavaScript trong tab “Bảng điều khiển”. Phần này hiển thị mô tả lỗi và số dòng nơi lỗi xảy ra.

Cú pháp có thể được nhìn thấy trực tiếp trong mã. Đây chính là mục đích của tab “Nguồn”.

Cách xem mã của một phần tử cụ thể

Đối với các trang lớn có nhiều phần tử, rất khó để tìm thấy mã cần thiết trong tất cả các đánh dấu. Trong trường hợp này, bạn nên sử dụng lệnh menu ngữ cảnh đặc biệt. Di chuyển chuột qua đoạn và nhấn RMB. Chọn lệnh “Xem mã”.

Cửa sổ tương tự sẽ mở ra nhưng tập trung vào đối tượng đã chọn.

Bản tóm tắt

Chúng tôi đã cho bạn biết mã nguồn trang là gì. Chỉ cần nắm vững kiến thức cơ bản về HTML và CSS là đủ và sử dụng các công cụ tiện lợi dành cho nhà phát triển, bạn sẽ có thể gỡ lỗi các tài liệu HTML của riêng mình.

Việc xem lại mã tài nguyên trên Internet sẽ cho phép bạn học hỏi không chỉ từ kinh nghiệm của bản thân mà còn sử dụng các ví dụ hoạt động thực tế. Và đối với các chuyên gia SEO, thẻ meta sẽ hữu ích, thông tin trong đó có thể nói lên nhiều điều về trang web.

Vì vậy, hôm nay chúng ta sẽ xem xét một số công cụ hữu ích dành cho các chuyên gia Web giúp cuộc sống dễ dàng hơn khi thiết kế trang web. Hãy bắt đầu với bảng điều khiển dành cho quản trị viên web trong Google Chrome. Và hãy cùng điểm qua những câu hỏi thường gặp nhất đối với quản trị viên web trong quá trình bố cục trang web.

Để truy cập bảng điều khiển, hãy mở trang web của bạn trong Google Chrome, nhấp chuột phải vào bất kỳ vị trí nào trên trang web và chọn “Xem mã trang” trong menu thả xuống theo ngữ cảnh hoặc trên một thành phần cụ thể để nghiên cứu bằng cách chọn “Xem mã” yếu tố".

Ở trên cùng, bạn sẽ có một số tab được liệt kê. Hôm nay chúng ta sẽ nói về tab “Thành phần” , trình bày các phần tử của một trang web bằng cách làm nổi bật các thẻ, thuộc tính, làm nổi bật cách lồng các phần tử, thể hiện thứ bậc của phần tử trong cây DOM (gợi ý ở dưới cùng, từ gốc gốc đến phần hiện tại), khả năng để chỉnh sửa các phần tử, danh sách các thuộc tính của chúng, hãy cân nhắc việc tìm kiếm theo các phần tử, cũng như Hãy làm quen với việc xem các kiểu css, v.v., được liên kết với các phần tử.

Làm cách nào tôi có thể xem tất cả các kiểu được liên kết với một thành phần cụ thể? Cái nào được sử dụng bây giờ? Chúng nằm trong tập tin nào?

Vì vậy, không có gì có thể dễ dàng hơn! Mở trình duyệt Google Chrome, mở trang web của chúng tôi - nguồn của câu hỏi, nhấp chuột phải vào thành phần mong muốn nếu nó hiển thị trong ngữ cảnh của trang và chọn “Xem mã thành phần” trong menu ngữ cảnh.

Ở phía dưới, chúng ta có bảng điều khiển với tab được đánh dấu ở bên trái “Phần tử" và tất cả các kiểu được liên kết với phần tử ở bên phải, trong đó: Kiểu tính toán– đây là các kiểu “tóm tắt” chung được gán cho thành phần từ các quy tắc và cài đặt css của trình duyệt của người dùng (môi trường của anh ấy), đồng thời tab được thu gọn.

Nhưng chúng tôi quan tâm đến tab “Styles”, được mở rộng bên dưới nó, liệt kê lần lượt tất cả các kiểu được gán cho phần tử, cũng như các tệp trong đó các quy tắc này được chỉ định cho phần tử này theo loại, id, lớp, tên, thuộc tính của nó , thuộc tính, v.v. Hơn nữa, nếu một quy tắc css bị gạch bỏ, điều đó có nghĩa là nó đã được xác định lại sớm hơn/sau này (điều này giúp dễ dàng theo dõi quy tắc css nào có mức độ ưu tiên và được áp dụng trong trường hợp này cho phần tử).

Bên dưới bảng điều khiển có một dòng hiển thị phần tử trong hệ thống phân cấp tài liệu, dễ dàng cho phép bạn xem toàn bộ danh sách các phần tử cha từ gốc đến phần tử đã chọn. Một cái gì đó giống như "mẩu bánh mì".

Thẻ Html không hiển thị trong ngữ cảnh của trang? Hay bạn cần tìm tất cả các thẻ, chẳng hạn như theo một lớp, tên, thuộc tính, loại cụ thể?

Mở trang web trong Google Chrome, nhấp chuột phải, mở menu ngữ cảnh, chọn « Xem mã trang » . Nhấn tổ hợp phím “CTRL + F” cùng lúc, nhập cụm từ chúng ta cần ( Ví dụ: lớp=”phần đệm") và di chuyển qua danh sách kết quả tìm thấy, đồng thời xem tất cả các kiểu được liên kết với các thành phần mong muốn ở phía bên phải của trang.

Cách xem mã html của (các) phần tử được tải động (ví dụ: qua Ajax)

Chúng tôi đang đợi trang tải trong Google Chrome. Chúng tôi thực hiện các hành động cần thiết để Ajax hoạt động. Nhấp chuột phải vào dữ liệu đã tải, chọn “Xem mã phần tử” trong menu ngữ cảnh và kiểm tra kết quả trong bảng điều khiển trên tab “Phần tử” ở bên trái.

Xem các thay đổi về kiểu css trong thời gian thực

Nhân tiện, cũng rất thuận tiện khi quan sát, nếu cần, kiểu nào được gán cho một phần tử một cách nhanh chóng, chẳng hạn như khi cuộn qua thư viện và các sự kiện hẹn giờ khác. Tất cả các kiểu được gán qua javascript trong thời gian thực sẽ được hiển thị trong thuộc tính phong cách phần tử đã chọn trong cửa sổ trên tab “Phần tử”.

Xem một cách tương tác tác động của các quy tắc css đối với việc trình bày các thẻ html

Google Chrome cung cấp bảng điều khiển tương tác cho các kiểu css. Điều này có nghĩa là bạn không chỉ có thể xem kiểu nào được áp dụng cho phần tử mà còn có thể di chuyển con trỏ chuột qua một thuộc tính css cụ thể, bật nó bằng hộp kiểm bật lên ở bên phải hoặc tắt nó bằng cách xóa cờ và xem kết quả thu được trên trang.

Chúng tôi thay đổi cấu trúc trình bày của các phần tử html một cách nhanh chóng (trực tiếp trong trình duyệt)

Vì vậy, chúng ta đã học cách khám phá cấu trúc của tài liệu web trong Google Chrome, bây giờ chúng ta sẽ xem xét nhanh các yếu tố chỉnh sửa một cách nhanh chóng. Chúng tôi đi tới bảng điều khiển theo bất kỳ cách nào thuận tiện cho chúng tôi. Chúng tôi tìm thấy phần tử mong muốn trong tab “Phần tử”, nhấp chuột phải vào phần tử đó, từ đó gọi menu ngữ cảnh bật lên:

Thêm thuộc tính– thêm một thuộc tính cho phần tử được chỉ định. Ngay khi con trỏ hoạt động, chúng ta bắt đầu đặt thuộc tính mong muốn. Ví dụ: viết name="itemImage", tên này sẽ được thêm ngay vào phần tử của chúng tôi.
Chỉnh sửa thuộc tính– nếu bạn nhấp chuột phải vào thuộc tính phần tử, mục đó sẽ có sẵn biên tậpthuộc tính. Nhấp và chỉnh sửa.

Ví dụ sử dụng: Chúng tôi quên mật khẩu được lưu dưới dấu hoa thị trong Google Chrome (nếu mật khẩu được lưu trong trình duyệt này). Nhấp chuột phải vào phần tử đã nhập mật khẩu, nhấp vào “Xem mã phần tử” , trong bảng điều khiển ở tab bên trái Yếu tố nhấp chuột phải vào thuộc tính type="password", nhấp chuột trái vào Biên tậpthuộc tính thay đổi thuộc tính gõ =”mật khẩu" TRÊN gõ =”chữ" và bây giờ, thay vì dấu hoa thị, mật khẩu tương tự sẽ được hiển thị ở dạng văn bản.

Biên tậphtml– nhấp chuột phải vào phần tử trong bảng điều khiển Yếu tố, lựa chọn Biên tậphtml, thay đổi mã theo ý thích của bạn.
Sao chépBẰNGHTML– chúng tôi sao chép phần HTML mà chúng tôi cần để nghiên cứu thêm, chẳng hạn như trong sổ ghi chú hoặc cho các mục đích khác mà chúng tôi cần áp dụng chính xác bố cục tương tự. Chúng tôi tiết kiệm thời gian.
Sao chépXPATH– sao chép biểu diễn XPATH của cấu trúc từ gốc của phần tử cha sang phần tử được chọn.
Xóa bỏnút– nếu bạn cần xóa phần tử hiện được chọn và tất cả phần tử con của nó khỏi ngữ cảnh của trang web và xem kết quả.
Từbọc– sẽ hiển thị chế độ xem trang web trong ngữ cảnh bảng điều khiển Yếu tố dễ đọc hơn.

Trong các bài viết sau, chúng tôi sẽ tiếp tục xem xét các công cụ dành cho quản trị viên web và đặc biệt chúng tôi sẽ làm quen với các tab công cụ còn lại dành cho quản trị viên web trong Google Chrome và cũng xem xét việc gỡ lỗi lỗi javascript bằng các trình duyệt khác nhau

Bạn cần nhanh chóng xem tất cả các thay đổi trên trang web mà không ảnh hưởng đến các tệp và mã của trang web được đăng trên Internet. Ví dụ: thay đổi bảng màu của một khối, di chuyển một phần tử đã di chuyển ra ngoài, v.v.

Để thực hiện việc này, nhiều quản trị viên web sử dụng máy chủ Denwer hoặc OpenServer cục bộ, chạy bản sao đầy đủ của trang web trên máy tính của họ. Phương pháp này phổ biến và phù hợp với các chuyên gia; nó có thể được sử dụng để kiểm tra hoạt động của nhiều tập lệnh và plugin khác nhau, thử nghiệm thay đổi thiết kế và chỉnh sửa tất cả các tệp trang web và sau khi thử nghiệm, chuyển các thay đổi thích hợp trực tiếp đến trang web.

Đối với những người dùng chưa quen với nghệ thuật quản trị trang web, tôi khuyên bạn nên sử dụng trình duyệt cho những mục đích này. Vì tôi sử dụng Chrome nên tôi sẽ cung cấp hướng dẫn bằng ảnh chụp màn hình cho trình duyệt cụ thể này. Bằng cách tương tự, bạn có thể làm việc với Opera, Yandex.Browser, Mozilla Firefox và các trình duyệt khác, nguyên tắc của các công cụ của họ là tương tự nhau.

Hướng dẫn 1: cách xem toàn bộ mã HTML của một trang web trên trình duyệt

Mở trang web cần thiết của trang web của bạn. Nhấp chuột phải vào phần tử được yêu cầu, menu thả xuống theo ngữ cảnh của trình duyệt với các lệnh có sẵn sẽ xuất hiện:

Hình 1. Xem toàn bộ mã HTML của trang web trong trình duyệt Chrome

Quan trọng: Các lệnh trong menu thả xuống có thể khác nhau, ví dụ: đối với các thành phần đang hoạt động (liên kết, hình ảnh, video) và các thành phần không hoạt động (văn bản, nền, div):

Hình 2. Menu thả xuống của trình duyệt Chrome

Vì vậy, nếu không tìm thấy lệnh mình cần, bạn chỉ cần nhấp chuột phải vào nơi khác hoặc sử dụng phím nóng của trình duyệt.

Chúng ta hãy quay lại Hình 1, nó hiển thị lệnh cần thiết để xem tất cả mã HTML của trang web nguồn, nó được gọi là " Xem mã trang". Nhấp vào lệnh, một tab mới sẽ mở ra với mã đầy đủ của trang web nguồn, một điểm cộng lớn cho mọi thứ - tính năng xem có sẵn với tính năng đánh dấu cú pháp:

Hình 3. Đoạn mã của trang này

Công cụ này rất hữu ích cho việc tìm kiếm và chỉnh sửa các thành phần bạn đang tìm kiếm.

Các cách khác để xem tất cả mã HTML của trang web

Để truy cập nhanh hơn, bạn có thể sử dụng cách khác để gọi công cụ này

Trong Hình 1, chúng ta cũng thấy lệnh này có sẵn thông qua phím tắt + ;

Dán view-source:site vào thanh địa chỉ của trình duyệt thay vì tên miền của tôi, chèn địa chỉ của bạn;

Cả hai phương pháp đều phổ biến và sẽ hoạt động trong tất cả các trình duyệt.

Lúc đầu, một số người có thể nghĩ rằng đây hoàn toàn không phải là một công cụ cần thiết, nhưng việc xem toàn bộ mã HTML của một trang web là điều tuyệt vời để tìm ra các thành phần cần thiết trong mã, đây có thể là các liên kết, thẻ, thẻ meta, thuộc tính và các thành phần khác .

Tổ hợp phím nóng +mở cửa sổ tìm kiếm, trong trình duyệt Chrome nó xuất hiện ở trên cùng bên phải:

Hình 3. Tìm kiếm theo mã trang web

Sau khi bạn nhập yêu cầu vào biểu mẫu tìm kiếm, màn hình sẽ di chuyển đến phần tử đầu tiên được tìm thấy, sử dụng các mũi tên, bạn có thể di chuyển giữa chúng và chọn phần tử bạn cần:

Hình 4. Tìm kiếm theo mã trang HTML

Hướng dẫn 2: Cách xem và chỉnh sửa mã HTML, CSS của một trang web trên trình duyệt Google Chrome

Bây giờ là phần quan trọng nhất, trong đó tôi sẽ chỉ cho bạn cách chỉnh sửa mã HTML và CSS của trang web trong trình duyệt. sau đó chuyển các thay đổi sang trình duyệt.

Công cụ hữu ích này luôn có sẵn trong trình duyệt của bạn; hãy thử nghiệm với các lệnh khác sẽ giúp bạn chỉnh sửa trang web của mình dễ dàng hơn.

Xác suất xem xét ban đầu mã số mạng lưới trang, được trình duyệt nhận được do yêu cầu tới máy chủ, có sẵn trong hầu hết mọi trình duyệt Internet. Việc truy cập vào lệnh tương ứng được tổ chức gần như giống hệt nhau, nhưng có sự khác biệt đáng kể về phương thức và hình thức ban đầu. mã số .

Hướng dẫn

1. Trong trình duyệt Mozilla FireFox, mở rộng phần “Xem” trong menu và nhấp vào “Ban đầu” mã số trang" Mục tương tự cũng nằm trong menu ngữ cảnh xuất hiện nếu bạn nhấp chuột phải vào văn bản trang. Bạn cũng có thể sử dụng tổ hợp phím CTRL + U. Mozilla FireFox không sử dụng các chương trình bên ngoài - ban đầu mã số trang với tính năng tô sáng cú pháp sẽ được mở trong một cửa sổ trình duyệt riêng.

2. Trong Internet Explorer, bấm vào menu Tệp và chọn Chỉnh sửa trong Notepad. Thay vì tên Notepad, một chương trình khác có thể được viết mà bạn đã chỉ định trong cài đặt trình duyệt để xem tên ban đầu mã số MỘT. Trong một cái nhấp chuột trang bằng nút chuột phải, một menu ngữ cảnh sẽ xuất hiện, trong đó cũng có một mục cho phép bạn mở cái đầu tiên mã số trang trong một chương trình bên ngoài – “Xem HTML- mã số MỘT".

3. Trong trình duyệt Opera, hãy mở menu, đi tới phần “Trang” và bạn sẽ có cơ hội chọn mục “Bắt đầu” trong phần phụ “Công cụ phát triển” mã số"hoặc mục" Ban đầu mã số khung." Các phím nóng CTRL + U và CTRL + SHIFT + U lần lượt được gán cho lựa chọn này. Trong menu ngữ cảnh được liên kết với một cú nhấp chuột trang chuột phải vào cũng có mục “Initial mã số" Opera mở nguồn trang trong một chương trình bên ngoài được chỉ định trong HĐH hoặc trong cài đặt trình duyệt để chỉnh sửa tệp HTML.

4. Trình duyệt Google Chrome chắc chắn có tổ chức tốt nhất để xem nội dung ban đầu mã số MỘT. Bằng cách nhấp chuột phải vào trang, bạn có thể chọn xem mã số MỘT trang"và sau đó mã nguồn có tô sáng cú pháp sẽ được mở trong một tab riêng. Hoặc bạn có thể thích dòng “Xem” trong cùng một menu mã số element” và trình duyệt trong cùng một tab sẽ mở thêm hai khung trong đó bạn có thể kiểm tra HTML và CSS mã số mọi phần tử trang. Trình duyệt sẽ phản hồi khi con trỏ di chuyển qua các dòng mã số và đánh dấu các phần tử trên trang tương ứng với phần này của HTML mã số MỘT.

5. Trong trình duyệt Apple Safari, mở rộng phần View và chọn View HTML mã số MỘT". Trong menu xuất hiện khi bạn nhấp chuột phải vào mở trang, mục tương ứng có tên là “Xem nguồn”. Hành động này được gán các phím nóng CTRL + ALT + U. Ban đầu mã số mở ra trong một cửa sổ trình duyệt riêng biệt.

Các nhà phát triển trình duyệt đã quan tâm đến sự thuận tiện của những người tạo trang web mở trong cùng các trình duyệt này, cụ thể là quản trị viên web. Họ đã thêm các công cụ dành cho nhà phát triển vào các tính năng tiêu chuẩn mà bạn có thể dễ dàng mở và sử dụng. xem mã nguồn của trang web trong trình duyệt: HTML, CSS, JavaScript (JS), thu thập nhiều dữ liệu hữu ích khác nhau về cấu trúc của trang web, tiến hành phân tích kỹ thuật của trang web. Nói chung thấy rất nhiều điều bổ ích.

Tất nhiên, những công cụ này không chỉ được sử dụng bởi những người tạo trang web cho công việc mà còn cả những người dùng thông thường, những người mà mã nguồn cho phép họ xem nhiều dữ liệu hữu ích khác nhau.

Từ bài viết này, bạn sẽ tìm hiểu cách xem mã nguồn của một trang web trong trình duyệt (cách mở mã HTML, CSS, JavaScript của một trang web).

Cách mở mã nguồn của trang trong trình duyệt

Có hai cách để mở mã nguồn của trang web trong trình duyệt:

Sử dụng phím nóng;
Mở từ menu ngữ cảnh.

Ctrl+U– tổ hợp phím nóng để xem mã nguồn của toàn bộ trang trong một cửa sổ mới riêng biệt. Chuẩn cho mọi trình duyệt: Google Chrome, Opera, Mozilla Firefox, trình duyệt Yandex, IE.

Bạn cũng có thể nhập các công cụ dành cho nhà phát triển như sau:

Để nhanh chóng tìm thấy mã, từ hoặc văn bản mong muốn trên một trang, bạn có thể sử dụng tổ hợp phím nóng tìm kiếm tiêu chuẩn cho tất cả các trình duyệt: Ctrl + G.

Video hướng dẫn:

Xem mã phần tử | khám phá yếu tố | kiểm tra nguyên tố

Nếu bạn đột nhiên không cần xem toàn bộ mã nguồn mà chỉ hiển thị một phần riêng biệt của nó, một phần nào đó trên trang, thì công cụ trước đó sẽ không hoạt động. Với mục đích này, các công cụ dành cho nhà phát triển có một chức năng khác, chức năng này sẽ được thảo luận bên dưới.

Cách xem mã của một thành phần trên một trang:

Bạn cũng có thể sử dụng phím tắt để truy cập nhanh vào quá trình kiểm tra phần tử.

Phím nóng (nút):

Google Chrome: Ctrl+Shift+I và Ctrl+Shift+C

Opera: Ctrl+Shift+I và Ctrl+Shift+C

Mozilla Firefox: Ctrl+Shift+I và Ctrl+Shift+C

Trình duyệt Yandex: Ctrl+Shift+I và Ctrl+Shift+C

Sau các bước này, mã nguồn của trang web sẽ mở trong cùng cửa sổ trình duyệt:

Tất cả mã HTML sẽ nằm ở cột lớn bên trái. Và các kiểu CSS ở bên phải.

Tất nhiên, ưu điểm của phương pháp này là người dùng có cơ hội thay đổi mã nguồn và chỉnh sửa kiểu. Nghĩa là, bạn có thể chỉnh sửa các kiểu trên trang web và xem nó trông như thế nào với một số kiểu nhất định mà không cần phải thực hiện thay đổi ngay lập tức đối với các tệp nằm trên máy chủ lưu trữ. Để thay đổi hoặc thêm mã chương trình, bạn cần nhấp đúp vào đoạn hoặc vùng mong muốn. Tất nhiên, việc sửa mã trong trình duyệt sẽ không được thực hiện trên máy chủ lưu trữ. Vì vậy, trong tương lai, trong mọi trường hợp, bạn sẽ phải sao chép mã này và ghi vào tệp.

Hướng dẫn bằng video này mô tả chi tiết và chỉ ra cách làm việc với các công cụ dành cho nhà phát triển:

Cứ như vậy, chỉ cần trực tuyến, ngay trên trình duyệt, bạn có thể xem mã nguồn của trang web, lấy dữ liệu cơ bản về mã HTML và CSS, thay đổi và sao chép chúng mà không cần phải tải file của trang web này về máy tính .

Nhân tiện, những người dùng Internet thiếu kinh nghiệm đã thay đổi mã trang và mong nó được lưu lại sẽ thất vọng. Rốt cuộc, sau khi làm mới trang, mọi thay đổi trên đó sẽ biến mất. Điều này là không đủ để hack trang web :)

Cách xem mã nguồn trên điện thoại Android

Tôi cũng muốn lưu ý rằng các công cụ dành cho nhà phát triển không chỉ có sẵn trong phiên bản trình duyệt dành cho máy tính để bàn, tức là trên máy tính và máy tính xách tay. Trên điện thoại và máy tính bảng (Android, iOS), bạn cũng có thể xem mã nguồn.

Để thực hiện việc này, hãy thêm tiền tố nguồn xem vào URL của trang đang được kiểm tra:

Ví dụ:

nguồn xem:https://site/turbo-rezhim-opera/