Hướng dẫn view html code

Vậy câu hỏi đặt ra là việc xem source code của website khác thì nó có hơi “lộ” không nhỉ ?Tức là người dùng có thể xem code html + css + js của 1 website khác thì lộ mất rồi?

Và làm thế nào để người khác không xem được source code website mình ?

Bản chất ban đâu của HTML, css, js là chuỗi ký tự.Nhờ như vậy trình duyệt mới đọc được và trình diễn cho người dùng xem.

Bạn đang xem: Cách xem code của 1 trang web

Theo ý kiến cả nhân là không có cách nào để người khác không xem được code HTML, css, js cả.

Hỏi lại là tại sao bạn lại quan tâm đến vấn đề này ?

masoivn:

Hỏi lại là tại sao bạn lại quan tâm đến vấn đề này ?

Tại vì người khác thấy được source code website (bao gồm html + css + js) của mình nó giống như là thấy hết source code phần mềm vậy đó anh

html css js đó là do phần mềm của mình tạo ra để browser có thể hiển thị thôi, quy trình làm việc bên trong do backend đảm nhiệm làm thế nào để sinh ra được code đó thì họ không xem được.Khi browser hiển thị ra được nội dung thì nó đã nhận được code html css js rồi, và quan trọng là nó có muốn cho người dùng xem hay không. Đa phần trình duyệt đều hỗ trợ chức năng này.

Xem thêm: #12 Công Thức Chế Biến Các Món Ăn Với Thịt Băm Thịt Băm Làm Món Gì Ngon?

Theo bạn thì nó phải “giấu” theo kiểu nào? Cái Ctrl+U được là client-side mà, đương nhiên phải nhìn thấy, nếu là trang động thì nó đã qua xử lý CGI. HTML + CSS +Js đâu phải hết 1 trang web đâu, giống như bạn chép hết source Google/Facebook rồi bạn có biến nó thành máy tìm kiếm/mạng xã hội mang tên bạn hay không? Câu hỏi của bạn giống như: “chỉ cần mở sách ra là thấy hết các dòng chữ trong đó mà ai đọc cũng được, sao lộ quá vậy?”

Mã hóa md5 cho mỗi 5 ký tự

Không cho người dùng truy cập vào trang đó

Thay địa chỉ của trang thật thành trang giả (không có dữ liệu)

Bạn làm như vậy thì ông nội browser đọc còn không được chứ nói gì người khác. Chuyện này giống như là sợ người khác đọc sách của bạn thì đừng viết :3P/s: bạn có tư tưởng “mã nguồn đóng đấy”, điều đó không phải lúc nào cũng tốt.

câu hỏi này hay và thú vị mà. Hay để hỏi lại bằng câu hỏi khác nhé: Tại sao các loại trình duyệt lại hỗ trợ việc view source của trang web, mà phần lớn users lại không phải dân kỹ thuật ?

Câu hỏi hay đấy

1 Like phamhoanglong (Long Dragon) October 11, 2016, 10:08am #7 aliston:

HTML + CSS +Js đâu phải hết 1 trang web đâu

Có những trang web viết hoàn toàn bằng HTML + CSS + JS và 1 số framework JS thì sao anh ?

Tại sao các loại trình duyệt lại hỗ trợ việc view source của trang web, mà phần lớn users lại không phải dân kỹ thuật ?

uh, không hiển thị code html lên.dân kỹ thuật có nước ăn cám hết.bị lỗi phía client mà không coi được code thì khỏi sửa luôn.

Trang web bạn đang đọc được tạo thành, trong số những thứ khác, mã nguồn. Đó là thông tin mà trình duyệt web của bạn tải xuống và dịch thành những gì bạn đang đọc ngay bây giờ.

Hầu hết các trình duyệt web cung cấp khả năng xem mã nguồn của trang web mà không cần phần mềm bổ sung, cho dù bạn đang sử dụng loại thiết bị nào.

Một số thậm chí còn cung cấp chức năng và cấu trúc nâng cao, giúp dễ dàng sử dụng HTML và các mã lập trình khác trên trang.

Tại sao bạn muốn xem mã nguồn?

Có một số lý do khiến bạn có thể muốn xem mã nguồn của trang. Nếu bạn là nhà phát triển web, có lẽ bạn muốn xem qua các bản trình bày theo phong cách hoặc cách triển khai cụ thể của một lập trình viên khác. Có thể bạn đang đảm bảo chất lượng và đang cố gắng xác định lý do tại sao một phần nhất định của trang web lại hiển thị hoặc hoạt động theo cách đó.

Bạn cũng có thể là người mới bắt đầu cố gắng tìm hiểu cách viết mã các trang của riêng bạn và đang tìm kiếm một số ví dụ thực tế. Tất nhiên, có thể bạn không rơi vào bất kỳ danh mục nào trong số này và chỉ muốn xem nguồn gốc từ sự tò mò tuyệt đối.

Dưới đây là các hướng dẫn về cách xem mã nguồn trong trình duyệt bạn chọn.

Google Chrome

Chạy trên: Chrome OS, Linux, macOS, Windows

Phiên bản Chrome dành cho máy tính để bàn cung cấp ba phương pháp khác nhau để xem mã nguồn của trang, cách đầu tiên và đơn giản nhất bằng cách sử dụng phím tắt sau: CTRL + U ( COMMAND + OPTION + U trên macOS).

Khi được nhấn, lối tắt này sẽ mở một tab trình duyệt mới hiển thị HTML và mã khác cho trang đang hoạt động. Nguồn này được mã hóa bằng màu sắc và được cấu trúc theo cách giúp đơn giản hóa việc phân loại và tìm thấy những gì bạn đang tìm kiếm. Bạn cũng có thể đến đó bằng cách nhập văn bản sau vào thanh địa chỉ của Chrome, được gắn vào bên trái của URL của trang web và nhấn phím Enter : view-source: (tức là, xem nguồn: https: // www .).

Phương pháp thứ ba là thông qua các công cụ dành cho nhà phát triển của Chrome, cho phép bạn đi sâu hơn vào mã của trang cũng như chỉnh sửa trực tiếp cho mục đích thử nghiệm và phát triển. Giao diện công cụ nhà phát triển có thể được mở và đóng bằng cách sử dụng phím tắt này: CTRL + SHIFT + I ( COMMAND + OPTION + I trên macOS). Bạn cũng có thể khởi động chúng bằng cách lấy đường dẫn sau.

1. Nhấp vào nút trình đơn chính của Chrome, nằm ở góc trên bên phải và được biểu thị bằng ba chấm được căn chỉnh theo chiều dọc.
2. Khi trình đơn thả xuống xuất hiện, hãy di con trỏ chuột của bạn qua tùy chọn Công cụ khác.
3. Khi menu phụ xuất hiện, hãy nhấp vào Công cụ dành cho nhà phát triển .

Android
Xem nguồn của trang web trong Chrome dành cho Android cũng đơn giản như việc thêm văn bản sau vào trước địa chỉ (hoặc URL) của trang web đó và gửi nó: view-source:. Một ví dụ về điều này sẽ là nguồn xem: https: // www. . HTML và mã khác từ trang được đề cập sẽ được hiển thị ngay lập tức trong cửa sổ hiện hoạt.

iOS
Mặc dù không có phương pháp gốc để xem mã nguồn bằng Chrome trên iPad, iPhone hoặc iPod touch, cách đơn giản và hiệu quả nhất là sử dụng giải pháp của bên thứ ba chẳng hạn như ứng dụng Xem nguồn.

Có sẵn với giá $ 0,99 trong App Store, View Source sẽ nhắc bạn nhập URL của trang (hoặc sao chép / dán nó từ thanh địa chỉ của Chrome, đôi khi là con đường đơn giản nhất để lấy) và đó là nó. Ngoài việc hiển thị HTML và mã nguồn khác, ứng dụng cũng có các tab hiển thị nội dung trang riêng lẻ, Mô hình đối tượng tài liệu (DOM), cũng như kích thước trang, cookie và các chi tiết thú vị khác.

Microsoft Edge

Chạy trên: Windows

Trình duyệt Edge cho phép bạn xem, phân tích và thậm chí thao tác mã nguồn của trang hiện tại thông qua giao diện Công cụ dành cho nhà phát triển của nó. Để truy cập vào bộ công cụ tiện dụng này, bạn có thể sử dụng một trong các phím tắt sau: F12 hoặc CTRL + U. Thay vào đó, nếu bạn thích con chuột, hãy nhấp vào nút menu của Edge (ba chấm nằm ở góc trên bên phải) và chọn tùy chọn Công cụ dành cho nhà phát triển F12 từ danh sách.

Sau khi các công cụ dev được chạy lần đầu tiên, Edge thêm hai tùy chọn bổ sung vào menu ngữ cảnh của trình duyệt (có thể truy cập bằng cách nhấp chuột phải vào bất kỳ đâu trong trang web): Kiểm tra phần tử và Xem nguồn , sau đó mở phần Debugger của trình tạo công cụ giao diện dân cư với mã nguồn.

Mozilla Firefox

Chạy trên: Linux, macOS, Windows

Để xem mã nguồn của trang trong phiên bản máy tính để bàn của Firefox, bạn có thể nhấn CTRL + U ( COMMAND + U trên macOS) trên bàn phím của bạn, sẽ mở một tab mới chứa HTML và mã khác cho trang web đang hoạt động.

Nhập văn bản sau vào thanh địa chỉ của Firefox, trực tiếp ở bên trái của URL của trang, sẽ làm cho cùng một nguồn hiển thị trong tab hiện tại thay vào đó: view-source: (tức là, view-source: https: // www.) .

Một cách khác để truy cập mã nguồn của trang là thông qua các công cụ phát triển của Firefox, có thể truy cập bằng cách thực hiện các bước sau.

1. Nhấp vào nút menu chính, nằm ở góc trên bên phải của cửa sổ trình duyệt và được thể hiện bằng ba đường ngang.
2. Khi menu bật ra xuất hiện, hãy nhấp vào biểu tượng "cờ lê" của nhà phát triển .
3. Trình đơn ngữ cảnh của Nhà phát triển web bây giờ sẽ hiển thị. Chọn tùy chọn Nguồn trang .

Firefox cũng cho phép bạn xem mã nguồn cho một phần cụ thể của một trang, giúp dễ dàng tách biệt các vấn đề. Để làm như vậy, trước tiên hãy đánh dấu khu vực mà bạn quan tâm bằng chuột. Tiếp theo, nhấn chuột phải và chọn View Selection Source từ menu ngữ cảnh của trình duyệt.

Android
Xem mã nguồn trong phiên bản Android của Firefox có thể đạt được bằng cách thêm tiền tố URL của trang web với văn bản sau: view-source:. Ví dụ: để xem nguồn HTML cho bạn muốn gửi văn bản sau đây vào thanh địa chỉ của trình duyệt: xem nguồn: https: // www. .

iOS
Phương pháp được đề xuất của chúng tôi để xem mã nguồn trang web trên iPad, iPhone hoặc iPod touch của bạn là thông qua ứng dụng Xem nguồn, có sẵn trong App Store với giá $ 0,99. Mặc dù không được tích hợp trực tiếp với Firefox, bạn có thể dễ dàng sao chép và dán URL từ trình duyệt vào ứng dụng để tiết lộ HTML và mã khác được liên kết với trang được đề cập.

Apple Safari

Chạy trên iOS và macOS

iOS
Mặc dù Safari for iOS không bao gồm khả năng xem nguồn trang theo mặc định, trình duyệt vẫn tích hợp khá liền mạch với ứng dụng Xem nguồn - có sẵn trong App Store với giá $ 0,99.

Sau khi cài đặt ứng dụng của bên thứ ba này trở lại trình duyệt Safari và chạm vào nút Chia sẻ, nằm ở cuối màn hình và được biểu thị bằng hình vuông và mũi tên lên. Bảng chia sẻ iOS bây giờ sẽ hiển thị, che phủ nửa dưới của cửa sổ Safari của bạn. Di chuyển sang phải và chọn nút Xem nguồn .

Một mã màu, biểu diễn có cấu trúc của mã nguồn của trang hiện đang được hiển thị cùng với các tab khác cho phép bạn xem nội dung trang, tập lệnh và hơn thế nữa.

hệ điều hành Mac
Để xem mã nguồn của một trang trong phiên bản Safari của máy tính để bàn, trước tiên bạn cần bật menu Phát triển của nó. Các bước dưới đây hướng dẫn bạn cách kích hoạt menu ẩn này và hiển thị nguồn HTML của trang.

1. Nhấp vào Safari trong trình đơn trình duyệt, nằm ở đầu màn hình.
2. Khi menu thả xuống xuất hiện, chọn tùy chọn Preferences .
3. Tùy chọn của Safari bây giờ sẽ hiển thị. Nhấp vào biểu tượng Nâng cao , nằm ở phía xa bên phải của hàng trên cùng.
4. Hướng tới phần dưới cùng của phần Nâng cao là một tùy chọn có nhãn Hiển thị menu Phát triển trong thanh trình đơn , kèm theo hộp kiểm trống. Nhấp vào hộp này một lần để đặt dấu kiểm trong đó và đóng cửa sổ Tùy chọn bằng cách nhấp vào dấu 'x' màu đỏ được tìm thấy ở góc trên bên trái.
5. Nhấp vào menu Develop , nằm ở phía trên cùng của màn hình.
6. Khi trình đơn thả xuống xuất hiện, chọn Hiển thị nguồn trang . Bạn cũng có thể sử dụng phím tắt sau: COMMAND + OPTION + U.

Opera

Chạy trên: Linux, macOS, Windows

Để xem mã nguồn từ trang web đang hoạt động trong trình duyệt Opera, hãy sử dụng phím tắt sau: CTRL + U ( COMMAND + OPTION + U trên macOS). Thay vào đó, nếu bạn muốn tải nguồn trong tab hiện tại, hãy nhập văn bản sau vào bên trái của URL của trang trong thanh địa chỉ và nhấn Enter : view-source: (ví dụ: view-source: https: // www. ).

Phiên bản máy tính để bàn của Opera cũng cho phép bạn xem mã nguồn HTML, CSS và các yếu tố khác bằng cách sử dụng các công cụ phát triển tích hợp của nó. Để khởi chạy giao diện này, theo mặc định sẽ xuất hiện ở phía bên tay phải của cửa sổ trình duyệt chính, nhấn phím tắt sau: CTRL + SHIFT + I ( COMMAND + OPTION + I trên macOS).

Bộ công cụ phát triển của Opera cũng có thể truy cập bằng cách thực hiện các bước sau.

1. Nhấp vào biểu tượng Opera, nằm ở góc trên bên trái của cửa sổ trình duyệt của bạn.
2. Khi trình đơn thả xuống xuất hiện, hãy di con trỏ chuột của bạn qua tùy chọn Công cụ khác.
3. Nhấp vào Hiển thị menu nhà phát triển .
4. Nhấp lại vào biểu tượng Opera.
5. Khi trình đơn thả xuống xuất hiện, hãy di con trỏ của bạn qua Nhà phát triển .
6. Khi menu phụ xuất hiện, hãy nhấp vào Công cụ dành cho nhà phát triển .

Vivaldi

Có nhiều cách để xem nguồn trang trong trình duyệt Vivaldi. Cách đơn giản nhất là thông qua phím tắt CTRL + U , hiển thị mã từ trang đang hoạt động trong tab mới.

Bạn cũng có thể thêm văn bản sau vào trước URL của trang, hiển thị mã nguồn trong tab hiện tại: view-source:. Ví dụ về điều này sẽ là nguồn xem: http: // www. .

Phương pháp khác là thông qua các công cụ phát triển tích hợp của trình duyệt, có thể truy cập bằng cách nhấn tổ hợp CTRL + SHIFT + I hoặc thông qua tùy chọn Công cụ dành cho nhà phát triển trong trình đơn Công cụ của trình duyệt - được tìm thấy bằng cách nhấp vào biểu tượng 'V' ở góc trên bên trái. Sử dụng công cụ dev cho phép phân tích sâu hơn về nguồn của trang.