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

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

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

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

Решение

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

[обновление в ответ на более подробную информацию в отредактированном вопросе]

Проблема, с которой вы сталкиваетесь, заключается в том, что после изменения страницы запросами ajax текущий HTML существует только внутри DOM браузера - больше нет независимого исходного HTML, который вы можете проверить, кроме того, что вы можете извлечь из ДОМ.

Как вы заметили, IE DOM хранит теги в верхнем регистре, исправляет незакрытые теги и вносит множество других изменений в исходный HTML. Это потому, что браузеры обычно очень хорошо воспринимают HTML с проблемами (например, незакрытые теги) и исправляют эти проблемы, чтобы отобразить что-то полезное для пользователя. После того, как HTML канонизирован IE, исходный исходный HTML, насколько мне известно, по существу теряется с точки зрения DOM.

Firefox, скорее всего, вносит меньше этих изменений, поэтому Firebug, вероятно, ваш лучший выбор.

Последний (и более трудоемкий) вариант может работать для страниц с простыми изменениями ajax, например, получение некоторого HTML-кода с сервера и его импорт на страницу внутри определенного элемента. В этом случае вы можете использовать скрипач или аналогичный инструмент, чтобы вручную сшить исходный HTML-код с Ajax-HTML. Вероятно, это больше проблем, чем стоит, и подвержено ошибкам, но это еще одна возможность.

[Оригинальный ответ здесь на исходный вопрос]

Fiddler ( http://www.fiddlertool.com/ ) - это бесплатный, независимый от браузера инструмент, который очень хорошо работает для получения точного HTML-кода, полученного браузером. Он показывает вам точные байты на проводе, а также декодированный / разархивированный / и т.д. контент, который вы можете передать в любой инструмент анализа HTML. Он также показывает заголовки, время, статус HTTP и многое другое.

Вы также можете использовать скрипач для копирования и перестройки запросов, если хотите проверить, как сервер реагирует на несколько отличающиеся заголовки.

Fiddler работает как прокси-сервер, находясь между вашим браузером и веб-сайтом, и регистрирует трафик в обоих направлениях.

Джастин мертв. Ключевым моментом здесь является то, что HTML - это просто язык для описания документа. Как только браузер его прочитает, он исчезнет . Открытые теги, закрывающие теги и форматирование обрабатываются парсером, а затем исчезают . Любой инструмент, показывающий HTML, генерирует его на основе содержимого документа, поэтому он всегда будет действительным.

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

Вы можете попробовать это сами в любой консоли JavaScript:

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

Незакрытые теги и имена тегов в верхнем регистре пропали, потому что этот HTML был проанализирован и отброшен после второй строки.

Правильный способ изменить документ из JavaScript является с documentметодами ( createElement, appendChild, setAttributeи т.д.) , и вы будете наблюдать , что нет никаких ссылок на теги или HTML синтаксис в любом из этих функций. Если вы используете document.write, innerHTMLили другие HTML-вызовы для изменения своих страниц, единственный способ проверить это - уловить то, что вы в них вкладываете, и отдельно проверить этот HTML.

Тем не менее, самый простой способ получить представление документа в формате HTML:

document.documentElement.innerHTML

Я знаю, что это старый пост, но я только что нашел этот кусок золота . Это старый (2006 г.), но все еще работает с IE9. Я лично добавил закладку с этим.

Просто скопируйте и вставьте это в адресную строку браузера:

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

Что касается firefox, панель инструментов веб-разработчика выполняет свою работу. Я обычно использую это, но иногда некоторые грязные сторонние элементы управления asp.net генерируют разные разметки на основе пользовательского агента ...

РЕДАКТИРОВАТЬ

Как указал Брайан в комментарии, некоторые браузеры удаляют javascript:часть при копировании / вставке в адресную строку. Я только что протестировал, и это случай с IE10.

Если вы загрузите документ в Chrome, Developer|Elementsпредставление покажет вам HTML, измененный вашим JS-кодом. Это не просто HTML-текст, и вам нужно открывать (развертывать) любые интересующие вас элементы, но вы эффективно можете проверить сгенерированный HTML.

Пробовали ли вы на панели инструментов веб-разработчика варианты Tools -> Validate HTMLили Tools -> Validate Local HTML?

Validate HTMLОпция отправляет URL в валидатор, который хорошо работает с публично стоящими сайтами. Эта Validate Local HTMLопция отправляет HTML-код текущей страницы валидатору, который хорошо работает со страницами, находящимися за логином, или теми, которые не являются общедоступными.

Вы также можете попробовать View Source Chart (также как надстройку FireFox ). Интересное примечание:

В. Почему при просмотре исходной диаграммы мои теги XHTML заменяются тегами HTML?

А. Это не так. Браузер вносит эти изменения, VSC просто отображает, что браузер сделал с вашим кодом. Чаще всего: самозакрывающиеся теги теряют закрывающую косую черту (/). Для получения дополнительной информации см. Эту статью о «Обработанном исходном коде» (archive.org) .

Использование панели инструментов веб-разработчика Firefox ( https://addons.mozilla.org/en-US/firefox/addon/60 )

Просто перейдите в Просмотр источника -> Просмотр созданного источника.

Я использую его все время для одного и того же.

У меня была такая же проблема, и я нашел здесь решение:

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

Итак, чтобы использовать Crowbar, инструмент отсюда:

http://simile.mit.edu/wiki/Crowbar (сейчас (2015-12) 404s)
ссылка на обратную машину:
http://web.archive.org/web/20140421160451/http://simile.mit.edu/ вики / лом

Это дало мне неправильный, недействительный HTML.

Это старый вопрос, и вот старый ответ, который когда-то безупречно работал у меня много лет. , но больше не работает, по крайней мере, с января 2016 года:

Букмарклет «Сгенерированный исходный код» от SquareFree делает именно то, что вы хотите, и, в отличие от «старого золота» от @ Johnny5, отображается как исходный код (а не отображается в браузере, по крайней мере, в случае с Google. Chrome на Mac):

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

К сожалению, он ведет себя так же, как «старое золото» от @ Johnny5: он больше не отображается как исходный код. Сожалею.

В Firefox просто ctrl-a (выделите все на экране), затем щелкните правой кнопкой мыши «Просмотреть источник выбора». Это фиксирует любые изменения, внесенные JavaScript в DOM.

оповещение (document.documentElement.outerHTML);

Почему бы не ввести это URL-адрес?

javascript:alert(document.body.innerHTML)

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

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

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

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

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

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

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

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

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

Ознакомьтесь с расширением Chrome "Просмотр обработанного исходного кода":

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

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

Приведенный ниже фрагмент кода javascript предоставит вам полный источник, созданный сгенерированным HTML с помощью 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 ;

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

в моей функции .done () моего вызова ajax я добавил console.log (results), чтобы я мог видеть 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");
    });
}