28

Nếu sử dụng Firebug, chúng tôi có thể nhấp vào tab HTML và nhấp để mở rộng từng phần tử để xem mã HTML được tạo. Có cách nào để mở rộng tất cả hoặc nhận tệp văn bản thuần túy không?Cách xem "mã HTML được tạo" trong Firefox?

Tôi chỉ vô tình phát hiện ra rằng thậm chí không cần phải là Firebug. Chúng tôi chỉ cần nhấn CTRL-A (để chọn tất cả) trên trang web, sau đó nhấp chuột phải và chọn "View Selection Source", sau đó chúng tôi sẽ nhận được tệp văn bản thuần túy của "mã HTML hiện tại", thậm chí sẽ thấy <div> là bảng điều khiển Firebug trước thẻ <body> nếu Firebug đang mở. Nhưng nó có vẻ như một cách kỳ lạ để gọi điều này. Còn cách nào khác không?

(Cập nhật:. Tạo HTML thường đề cập đến mã HTML sau khi thay đổi JavaScript DOM Đây là cây DOM hiện tại thay vì mã nguồn gốc)

+1

+1 để chọn khu vực và nhấp chuột phải và chọn "Xem nguồn lựa chọn", không yêu cầu bất kỳ plugin bổ sung nào. – Morpork

Trả lời

26

Trong tab HTML của Firebug, nhấp chuột phải vào nút gốc và chọn "sao chép HTML". Sau đó dán vào trình soạn thảo văn bản.

Without Firefox Add-Ons, bạn có thể sử dụng một bookmarklet như thế này:

javascript: var win = window.open(); win.document.write('<html><head><title>Generated HTML of ' + location.href + '</title></head><pre>' + document.documentElement.innerHTML.replace(/&/g, '&amp;').replace(/</g, '&lt;') + '</pre></html>'); win.document.close(); void 0; 
+0

Giải pháp tuyệt vời.Điều này cũng hoạt động trong Chrome. – twasbrillig

+0

Có lỗi trình chặn cửa sổ bật lên. Đã tắt trình chặn cửa sổ bật lên, vẫn gặp lỗi. Có thể có liên quan đến pdf.js. Giải pháp thay thế: 'document.body.onclick = function() {/ * mã * /};' và sau đó nhấp vào bất kỳ đâu trong tài liệu. Ở đó tôi đã sửa nó! – Luc

+0

hack đẹp, nhưng người ta phải ghi nhớ rằng khoảng trắng bị lạc. – nerdess

18

Với Web Developer toolbar add-on, chọn View Source - Xem nguồn được tạo. Và nếu bạn muốn xem nguồn gốc, chọn View Source - View Source (hoặc chỉ cần nhấn tổ hợp phím CTRL - SHIFT - U)

+0

Công cụ tuyệt vời. Nó quá rộng lớn so với FF devtool – ThePhi

-1

Tôi không biết nếu tôi hiểu câu hỏi của bạn tốt, nhưng đây là một cái gì đó thực sự đơn giản và bạn sẽ không cần một addon khác.

Mọi trình duyệt đều có chức năng gốc để xem mã nguồn của trang thực tế, chỉ cần nhấp chuột phải và tìm nội dung tương tự như "nguồn" hoặc "mã".

Trong Firefox chẳng hạn, nó chỉ là "Mã Souce", trong Chrome, đó là "Xem nguồn trang" và cứ tiếp tục như vậy.

Điều đó đang được nói, Thanh công cụ dành cho nhà phát triển web thực sự là một addon tuyệt vời, đặc biệt nếu bạn cũng làm CSS.

+3

"mã HTML được tạo" thường đề cập đến HTML được tạo bởi Javascript sửa đổi DOM. HTML kết quả. –

0

Nếu bạn đang tìm kiếm một giải pháp chương trình, bạn chỉ có thể nuôi tài liệu vào một XMLSerializer.

3

Sử dụng DevTools Firefox (tích hợp trong FF kể từ phiên bản 35), bạn thể xem HTML được tạo mở trình theo dõi web (CTRL - thay đổi - C) và chọn HTML tab.

Bạn có thể sao chép HTML được tạo bằng cách nhấp chuột phải vào <html> và chọn Sao chép HTML bên trong.

+0

Điều này dường như không hiển thị nguồn được tạo (nghĩa là nó không phản ánh các thay đổi được thực hiện bởi JavaScript). Có lẽ đã thay đổi trong Firefox 57? –

Các vấn đề liên quan