Лучший способ просмотреть созданный источник веб-страницы?

Question

Я ищу инструмент, который даст мне правильный сгенерированный источник, включая изменения DOM, сделанные AJAX-запросами для ввода в валидатор W3. Я пробовал следующие методы:

1. Панель инструментов веб-разработчика - Генерирует недопустимый источник в соответствии с типом документа (например, удаляет самозакрывающуюся часть тегов). Теряет часть страницы с типом документа.
2. Firebug - Исправляет возможные недостатки в источнике (например, незакрытые теги). Также теряет часть тегов doctype и вводит консоль, которая сама по себе является недопустимым HTML.
3. IE Developer Toolbar - Генерирует недопустимый источник в соответствии с типом документа (например, он делает все теги заглавными, против спецификации XHTML).
4. Выделение + Просмотр источника выбора - часто трудно получить всю страницу, также исключает тип документа.

Существует ли какая-либо программа или дополнение, которое даст мне точную текущую версию исходного кода, без исправления или изменения каким-либо образом? Пока что Firebug кажется лучшим, но я боюсь, что он может исправить некоторые мои ошибки.

Решение

Оказывается, нет точного решения того, что я хотел, как объяснил Джастин. Лучшее решение, по-видимому, заключается в проверке источника внутри консоли Firebug, даже если он содержит некоторые ошибки, вызванные Firebug. Я также хотел бы поблагодарить Forgotten Semicolon за объяснение, почему «View Generated Source» не соответствует фактическому источнику. Если бы я мог отметить 2 лучших ответа, я бы.

Answer 1

На вкладке элементов щелкните правой кнопкой мыши узел html> copy> copy element - и вставьте его в редактор.

Как уже упоминалось выше, после преобразования источника в дерево DOM исходный источник больше не существует в браузере. Любые сделанные вами изменения будут относиться к DOM, а не к источнику.

Однако вы можете разобрать измененный DOM обратно в HTML, что позволит вам увидеть «сгенерированный источник».

1. В Chrome откройте инструменты разработчика и перейдите на вкладку элементов.
2. Щелкните правой кнопкой мыши элемент HTML.
3. Выберите «Копировать»> «Копировать элемент».
4. Вставить в редактор.

Теперь вы можете видеть текущую DOM в виде HTML-страницы.

Это не полный DOM

Обратите внимание, что DOM не может быть полностью представлен HTML-документом. Это потому, что DOM имеет гораздо больше свойств, чем HTML имеет атрибуты. Однако это сделает разумную работу.

Answer 2

Почему бы не набрать это urlbar?

javascript:alert(document.body.innerHTML)

Answer 3

Я думаю, что IE dev tools (F12) имеет; Вид> Источник> DOM (Страница)

Вам потребуется скопировать и вставить DOM и сохранить его для отправки в валидатор.

Answer 4

Приведенный ниже фрагмент кода javascript даст вам полный исходный код, сгенерированный в формате ajax. Независимый от браузера. Наслаждайтесь:)

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 ;

Answer 5

Единственное, что я обнаружил, это расширение BetterSource для Safari. Это покажет вам, что манипулируемый источник документа имеет только один недостаток - это совсем не так, как в Firefox

Answer 6

Мне удалось решить аналогичную проблему, зарегистрировав результаты вызова ajax на консоли. Это был возвращенный HTML, и я легко мог видеть любые проблемы, которые у него были.

в моей функции .done () моего вызова ajax я добавил console.log (результаты), чтобы видеть html в консоли отладчика.

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");
    });
}