Cách tốt nhất để xem nguồn trang web đã tạo?

Tôi đang tìm kiếm một công cụ sẽ cung cấp cho tôi nguồn được tạo thích hợp bao gồm các thay đổi DOM được thực hiện bởi AJAX yêu cầu đầu vào vào trình xác thực của W3. Tôi đã thử các phương pháp sau:

1. Thanh công cụ dành cho nhà phát triển web - Tạo nguồn không hợp lệ theo loại tài liệu (ví dụ: nó loại bỏ phần tự đóng của thẻ). Mất phần tài liệu của trang.
2. Firebug - Sửa các lỗi tiềm ẩn trong nguồn (ví dụ: các thẻ không được đóng chặt). Đồng thời mất phần loại tài liệu của thẻ và chèn bảng điều khiển mà bản thân nó là HTML không hợp lệ.
3. Thanh công cụ dành cho nhà phát triển IE - Tạo nguồn không hợp lệ theo kiểu tài liệu (ví dụ: nó làm cho tất cả các thẻ là chữ hoa, so với thông số XHTML).
4. Đánh dấu + Nguồn lựa chọn chế độ xem - Thường khó lấy toàn bộ trang, cũng loại trừ loại tài liệu.

Có chương trình hoặc tiện ích bổ sung nào ở đó sẽ cung cấp cho tôi phiên bản chính xác hiện tại của nguồn mà không cần sửa hoặc thay đổi nó theo một cách nào đó không? Cho đến nay, Firebug có vẻ là tốt nhất, nhưng tôi lo lắng nó có thể sửa chữa một số lỗi của tôi.

Giải pháp

Hóa ra không có giải pháp chính xác cho những gì tôi muốn như Justin giải thích. Giải pháp tốt nhất dường như là xác thực nguồn bên trong bảng điều khiển của Firebug, mặc dù nó sẽ chứa một số lỗi do Firebug gây ra. Tôi cũng muốn cảm ơn Forgotten Semicolon vì đã giải thích lý do tại sao "Xem nguồn được tạo" không khớp với nguồn thực. Nếu tôi có thể đánh dấu 2 câu trả lời hay nhất, tôi sẽ.

[cập nhật để trả lời thêm chi tiết trong câu hỏi đã chỉnh sửa]

Vấn đề bạn đang gặp phải là, khi một trang được sửa đổi bởi các yêu cầu ajax, HTML hiện tại chỉ tồn tại bên trong DOM của trình duyệt - không còn bất kỳ HTML nguồn độc lập nào mà bạn có thể xác thực ngoài những gì bạn có thể lấy ra từ DOM.

Như bạn đã quan sát, DOM của IE lưu trữ các thẻ bằng chữ hoa, sửa chữa các thẻ không được đóng và thực hiện nhiều thay đổi khác đối với HTML mà nó có ban đầu. Điều này là do các trình duyệt nói chung rất giỏi trong việc xử lý HTML với các vấn đề (ví dụ: thẻ không được đóng chặt) và khắc phục những vấn đề đó để hiển thị một cái gì đó hữu ích cho người dùng. Một khi HTML đã được chuẩn hóa bởi IE, HTML nguồn gốc về cơ bản bị mất theo quan điểm của DOM, theo như tôi biết.

Firefox hầu hết likley thực hiện ít thay đổi hơn, vì vậy Firebug có lẽ là lựa chọn tốt hơn cho bạn.

Tùy chọn cuối cùng (và tốn nhiều công sức hơn) có thể hoạt động đối với các trang có các thay đổi ajax đơn giản, ví dụ: tìm nạp một số HTML từ máy chủ và nhập mã này vào trang bên trong một phần tử cụ thể. Trong trường hợp đó, bạn có thể sử dụng fiddler hoặc công cụ tương tự để ghép HTML gốc với Ajax HTML theo cách thủ công. Điều này có lẽ rắc rối hơn mức đáng có và dễ xảy ra lỗi, nhưng có một khả năng nữa.

[Câu trả lời ban đầu ở đây cho câu hỏi ban đầu]

Fiddler ( http://www.fiddlertool.com/ ) là một công cụ miễn phí, độc lập với trình duyệt, hoạt động rất tốt để tìm nạp chính xác HTML mà trình duyệt nhận được. Nó hiển thị cho bạn các byte chính xác trên dây cũng như nội dung được giải mã / giải nén / vv mà bạn có thể đưa vào bất kỳ công cụ phân tích HTML nào. Nó cũng hiển thị tiêu đề, thời gian, trạng thái HTTP và rất nhiều thứ hay ho khác.

Bạn cũng có thể sử dụng fiddler để sao chép và xây dựng lại các yêu cầu nếu bạn muốn kiểm tra cách máy chủ phản hồi với các tiêu đề hơi khác nhau.

Fiddler hoạt động như một máy chủ proxy, nằm giữa trình duyệt của bạn và trang web và ghi lại lưu lượng truy cập theo cả hai cách.

Justin đã chết. Điểm mấu chốt ở đây là HTML chỉ là một ngôn ngữ để mô tả một tài liệu. Sau khi trình duyệt đọc nó, nó sẽ biến mất . Thẻ mở, thẻ đóng và định dạng đều do trình phân tích cú pháp đảm nhận và sau đó biến mất . Bất kỳ công cụ nào cho bạn thấy HTML đều đang tạo nó dựa trên nội dung của tài liệu, vì vậy nó sẽ luôn hợp lệ.

Tôi đã phải giải thích điều này với một nhà phát triển web khác một lần, và phải mất một thời gian ngắn anh ta mới chấp nhận.

Bạn có thể thử nó cho chính mình trong bất kỳ bảng điều khiển JavaScript nào:

el = document.createElement('div');
el.innerHTML = "<p>Some text<P>More text";
el.innerHTML; // <p>Some text</p><p>More text</p>

Các thẻ chưa đóng và tên thẻ viết hoa đã biến mất, vì HTML đó đã được phân tích cú pháp và loại bỏ sau dòng thứ hai.

Đúng cách để sửa đổi tài liệu từ JavaScript là với documentphương pháp ( createElement, appendChild, setAttribute, vv) và bạn sẽ nhận thấy rằng không có tham chiếu đến thẻ hoặc HTML cú pháp trong bất kỳ của những chức năng. Nếu bạn đang sử dụng document.write, innerHTMLhoặc các cuộc gọi HTML nói khác để sửa đổi các trang của bạn, cách duy nhất để xác nhận nó là để nắm bắt những gì bạn đang đặt vào họ và xác nhận rằng HTML riêng biệt.

Điều đó nói rằng, cách đơn giản nhất để có được biểu diễn HTML của tài liệu là:

document.documentElement.innerHTML

Tôi biết đây là một bài viết cũ, nhưng tôi chỉ tìm thấy miếng vàng này . Đây là phiên bản cũ (2006), nhưng vẫn hoạt động với IE9. Tôi đã tự tay thêm một dấu trang với cái này.

Chỉ cần sao chép, dán đoạn này vào thanh địa chỉ của trình duyệt:

javascript:void(window.open("javascript:document.open(\"text/plain\");document.write(opener.document.body.parentNode.outerHTML)"))

Đối với firefox, thanh công cụ phát triển web thực hiện công việc. Tôi thường sử dụng điều này, nhưng đôi khi, một số điều khiển asp.net của bên thứ ba bẩn tạo ra các đánh dấu khác nhau dựa trên tác nhân người dùng ...

BIÊN TẬP

Như Bryan đã chỉ ra trong nhận xét, một số trình duyệt xóa javascript:phần khi sao chép / dán trong thanh url. Tôi vừa thử nghiệm và đó là trường hợp của IE10.

Nếu bạn tải tài liệu trong Chrome, Developer|Elementschế độ xem sẽ hiển thị cho bạn HTML dưới dạng mã JS của bạn. Nó không trực tiếp là văn bản HTML và bạn phải mở (mở ra) bất kỳ phần tử nào quan tâm, nhưng bạn có thể kiểm tra HTML được tạo một cách hiệu quả.

Trong Thanh công cụ dành cho nhà phát triển web, bạn đã thử Tools -> Validate HTMLhoặcTools -> Validate Local HTML các tùy chọn chưa?

Các Validate HTML tùy chọn gửi url để validator, mà hoạt động tốt với các trang web công khai đối mặt. CácValidate Local HTML tùy chọn gửi HTML của trang hiện tại đến validator, mà hoạt động tốt với các trang yêu cầu đăng nhập, hoặc những người không thể truy cập công khai.

Bạn cũng có thể muốn thử Xem biểu đồ nguồn (cũng như tiện ích bổ sung FireFox ). Một lưu ý thú vị ở đó:

Q. Tại sao Chế độ xem Biểu đồ Nguồn thay đổi thẻ XHTML của tôi thành thẻ HTML?

A. Nó không. Trình duyệt đang thực hiện những thay đổi này, VSC chỉ hiển thị những gì trình duyệt đã thực hiện với mã của bạn. Phổ biến nhất: thẻ tự đóng mất dấu gạch chéo đóng (/). Xem bài viết này trên Nguồn được kết xuất để biết thêm thông tin (archive.org) .

Sử dụng Thanh công cụ dành cho nhà phát triển web của Firefox ( https://addons.mozilla.org/en-US/firefox/addon/60 )

Chỉ cần vào Xem Nguồn -> Xem Nguồn đã Tạo

Tôi sử dụng nó mọi lúc cho cùng một thứ.

Tôi đã gặp vấn đề tương tự và tôi đã tìm thấy ở đây một giải pháp:

http://ubuntuincident.wordpress.com/2011/04/15/scraping-ajax-web-pages/

Vì vậy, để sử dụng Crowbar, công cụ từ đây:

http://simile.mit.edu/wiki/Crowbar (hiện tại (2015-12) 404s)
liên kết máy quay lại:
http://web.archive.org/web/20140421160451/http://simile.mit.edu/ wiki / Crowbar

Nó cung cấp cho tôi HTML bị lỗi, không hợp lệ.

Đây là một câu hỏi cũ, và đây là một câu trả lời cũ đã từng hoạt động hoàn hảo đối với tôi trong nhiều năm , nhưng không còn nữa, ít nhất là không tính đến tháng 1 năm 2016:

Bookmarklet "Nguồn được tạo" từ SquareFree thực hiện chính xác những gì bạn muốn - và, không giống như "vàng cũ" từ @ Johnny5, hiển thị dưới dạng mã nguồn (thay vì được trình duyệt hiển thị bình thường, ít nhất là trong trường hợp của Google Chrome trên Mac):

https://www.squarefree.com/bookmarklets/webdevel.html#generated_source

Thật không may, nó hoạt động giống như "vàng cũ" từ @ Johnny5: nó không hiển thị dưới dạng mã nguồn nữa. Lấy làm tiếc.

Trong Firefox, chỉ cần ctrl-a (chọn mọi thứ trên màn hình) rồi nhấp chuột phải vào "View Selection Source". Điều này nắm bắt mọi thay đổi do JavaScript thực hiện đối với DOM.

cảnh báo (document.documentElement.outerHTML);

Tại sao không gõ đây là urlbar?

javascript:alert(document.body.innerHTML)

Trong tab phần tử, nhấp chuột phải vào nút html> sao chép> sao chép phần tử - sau đó dán vào trình chỉnh sửa.

Như đã đề cập ở trên, khi nguồn đã được chuyển đổi thành cây DOM, nguồn gốc không còn tồn tại trong trình duyệt. Bất kỳ thay đổi nào bạn thực hiện sẽ đối với DOM, không phải nguồn.

Tuy nhiên, bạn có thể phân tích cú pháp DOM đã sửa đổi trở lại HTML, cho phép bạn xem "nguồn được tạo".

1. Trong Chrome, mở công cụ dành cho nhà phát triển và nhấp vào tab phần tử.
2. Nhấp chuột phải vào phần tử HTML.
3. Chọn sao chép> sao chép phần tử.
4. Dán vào một trình chỉnh sửa.

Bây giờ bạn có thể xem DOM hiện tại dưới dạng trang HTML.

Đây không phải là DOM đầy đủ

Lưu ý rằng DOM không thể được thể hiện đầy đủ bằng tài liệu HTML. Điều này là do DOM có nhiều thuộc tính hơn HTML có các thuộc tính. Tuy nhiên điều này sẽ làm một công việc hợp lý.

Tôi nghĩ rằng các công cụ dành cho nhà phát triển IE (F12) có; Xem> Nguồn> DOM (Trang)

Bạn sẽ cần sao chép và dán DOM và lưu nó để gửi tới trình xác thực.

Điều duy nhất tôi tìm thấy là phần mở rộng BetterSource dành cho Safari, phần mở rộng này sẽ cho bạn thấy nguồn tài liệu bị thao túng chỉ có nhược điểm là không có gì từ xa giống như nó cho Firefox

Đoạn mã javascript dưới đây sẽ cung cấp cho bạn nguồn HTML được tạo ajax hoàn chỉnh. Trình duyệt độc lập. Thưởng thức :)

function outerHTML(node){
    // if IE, Chrome take the internal method otherwise build one as lower versions of firefox
        //does not support element.outerHTML property
  return node.outerHTML || (
      function(n){
          var div = document.createElement('div'), h;
          div.appendChild( n.cloneNode(true) );
          h = div.innerHTML;
          div = null;
          return h;
      })(node);
  }


 var outerhtml = outerHTML(document.getElementsByTagName('html')[0]);
var node = document.doctype;
var doctypestring="";
if(node)
{
     // IE8 and below does not have document.doctype and you will get null if you access it.

 doctypestring = "<!DOCTYPE "
         + node.name
         + (node.publicId ? ' PUBLIC "' + node.publicId + '"' : '')
         + (!node.publicId && node.systemId ? ' SYSTEM' : '') 
         + (node.systemId ? ' "' + node.systemId + '"' : '')
         + '>';
         }
         else

         {

             // for IE8 and below you can access doctype like this

         doctypestring = document.all[0].text;
         }
doctypestring +outerhtml ;

Kiểm tra tiện ích mở rộng chrome "View Render Source":

https://chrome.google.com/webstore/detail/view-render-source/ejgngohbdedoabanmclafpkoogegdpob/

Tôi đã có thể giải quyết vấn đề tương tự bằng cách ghi kết quả của lệnh gọi ajax vào bảng điều khiển. Đây là html được trả về và tôi có thể dễ dàng thấy bất kỳ vấn đề nào mà nó gặp phải.

trong hàm .done () của cuộc gọi ajax, tôi đã thêm console.log (kết quả) để tôi có thể thấy html trong bảng điều khiển trình gỡ lỗi.

function GetReversals() {
    $("#getReversalsLoadingButton").removeClass("d-none");
    $("#getReversalsButton").addClass("d-none");

    $.ajax({
        url: '/Home/LookupReversals',
        data: $("#LookupReversals").serialize(),
        type: 'Post',
        cache: false
    }).done(function (result) {
        $('#reversalResults').html(result);
        console.log(result);
    }).fail(function (jqXHR, textStatus, errorThrown) {
        //alert("There was a problem getting results.  Please try again. " + jqXHR.responseText + " | " + jqXHR.statusText);
        $("#reversalResults").html("<div class='text-danger'>" + jqXHR.responseText + "</div>");
    }).always(function () {
        $("#getReversalsLoadingButton").addClass("d-none");
        $("#getReversalsButton").removeClass("d-none");
    });
}