Sự khác nhau giữa "Nguồn" và "Nguồn được tạo" trong Firefox là gì?Sự khác nhau giữa "Nguồn" và "Nguồn được tạo" là gì?
Vui lòng giải thích ví dụ.
Edit:ngày 03 tháng 7
Những nguồn "Công cụ tìm kiếm" sử dụng, tạo hoặc trước khi tạo ra?
Nguồn sẽ hiển thị các nguồn mà trang đã được nạp với (phục vụ bởi các máy chủ).
Nguồn được tạo sẽ vẽ 'mã nguồn' từ các phần tử DOM hiện tại và do đó bao gồm các phần tử được JavaScript tạo động.
Ví dụ, nguồn sẽ hiển thị:
<script>
window.onload = function(){
document.getElementById('test').innerHTML = 'Generated Content';
}
</script>
<html>
<div id='test'>Source</div>
</html>
và tạo nguồn sẽ 'vẽ' nguồn tại thời điểm bạn bấm vào 'Xem Tạo Nguồn', sau đó nội dung của div đã được thay đổi, và bạn sẽ xem:
<script>
window.onload = function(){
document.getElementById('test').innerHTML = 'Generated Content';
}
</script>
<html>
<div id='test'>Generated Content</div> <!-- Note the difference here -->
</html>
Nguồn xem sẽ hiển thị nguồn được máy chủ phân phát.
Xem tạo nguồn sẽ hiển thị mã nguồn của những gì đang thực sự được hiển thị - trong đó bao gồm những gì JavaScript đã thay đổi vv
ok nó chỉ liên quan đến ngôn ngữ phía máy chủ và máy khách. CSS và HTML sẽ giống nhau trong "Nguồn" và "Nguồn được tạo" –
Không, ví dụ về nguồn được tạo sẽ là cuộc gọi AJAX đến dịch vụ web cập nhật văn bản trong div. Nguồn được tạo sẽ hiển thị nội dung hiện có trên màn hình nơi nguồn sẽ hiển thị nội dung được tải ban đầu khi trang được yêu cầu. –
@Durilai - Bạn có thể lấy bất kỳ ví dụ trực tiếp nào sau đó giải thích ví dụ không? Cảm ơn –
Nó thực sự khá đơn giản.
Nguồn:
<body>
<script>document.write("hello, world");</script>
</body>
nguồn tạo:
<body>
<script>document.write("hello, world");</script>
hello, world
</body>
verbosely thêm: "nguồn" là những gì đến tại trình duyệt để đáp ứng với yêu cầu trang. "Nguồn được tạo" là những gì trình duyệt có sau khi tất cả các lần kích hoạt javascript.
vì vậy nó chỉ liên quan đến javascript. html và css sẽ giống nhau trong cả "Nguồn" và "Nguồn được tạo" –
Không, bất kỳ CSS hoặc HTML nào được viết bởi Javascript đều nằm trong nguồn được tạo. – Jacob
Thuật ngữ "Nguồn được tạo" là từ sai, vì tất cả những gì bạn thấy không phải là "nguồn". "Nguồn" là HTML được gửi tới trình duyệt. "Nguồn được tạo" là tuần tự hóa trạng thái hiện tại của mô hình đối tượng do việc phân tích cú pháp nguồn cộng với các thay đổi tiếp theo đối với mô hình đối tượng đó do việc áp dụng tập lệnh. Các câu trả lời khác đã thảo luận về javascript, nhưng hiệu quả của trình phân tích cú pháp không được giảm giá.
Xem xét nguồn này:
<title>My Test Example</title>
<table>
<tr>
<td>Hello</td>
<div>There</div>
</table>
Nguồn tạo ra (sau khi thêm một số khoảng trắng cho rõ ràng) là:
<html>
<head>
<title>My Test Example</title>
</head>
<body>
<div>There</div>
<table>
<tbody>
<tr>
<td>Hello</td>
</tr>
</tbody>
</table>
</body>
</html>
Xem cách html, người đứng đầu, cơ thể và mở cửa tbody và đóng thẻ đã được thêm bởi trình phân tích cú pháp, tương tự như vậy, thẻ tr đóng đã được thêm vào. Ngoài ra, div đã được chuyển đến trước bảng.
'nguồn xem' hiển thị cho bạn mã thực trong tệp của bạn, như thể bạn đã mở tệp trong trình chỉnh sửa văn bản.
'chế độ xem nguồn được tạo' hiển thị cho bạn cách trình duyệt hiển thị trên màn hình, sau khi tất cả tập lệnh phía máy chủ (Javascript, PHP, v.v.) đã được thực hiện.
vì vậy nếu bạn đang index.html đã có một sản phẩm nào div và một image.jpg được 'AJAXed' vào div này sử dụng Javascript, sau đó 'xem nguồn' sẽ cho bạn thấy
<div></div>
nhưng 'xem tạo nguồn' sẽ hiển thị cho bạn
<div><img src="image.jpg"/></div>
chỉ cần lưu ý: egin firefox, bạn không có mục trình đơn này. tuy nhiên, bạn có thể xem nguồn được chọn trong trang (ctrl-a), sau đó nhấp chuột phải -> "xem nguồn lựa chọn" – mykhal
@mykhal - vâng đây là Ảnh chụp màn hình "Thanh công cụ dành cho nhà phát triển web" –