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

85

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

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

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

Решение

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

Джереми Кауфман
источник
Хммм, я думал, что он просил обратное - точный HTML, выданный сервером. Джереми?
Джастин Грант
неважно, только что увидел новый комментарий. Теперь стало понятнее то, что вы пытаетесь сделать - спасибо за разъяснения. Я обновлю свой ответ соответственно.
Джастин Грант
Примечательно, что многие зрители этого поста упустили главное, а именно: статический источник нельзя использовать для анализа страниц, измененных с помощью javascript. Firebug отлично подходит для этого, но было бы неплохо, если бы существовал и инструмент IE, который делал бы то же самое, поскольку совместимость браузера - большая проблема с IE.
Пол Кейстер
1
Firebug не исправляет ошибок в HTML. Он просто отображает теги из Firefox DOM. Firebug 1.6 избегает добавления элементов; для всех версий Firebug вы можете избежать изменения DOM, отключив панель консоли.
johnjbarton 02
1
Я так много узнал из этого вопроса!
Сергей Оршанский

Ответы:

32

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

Проблема, с которой вы сталкиваетесь, заключается в том, что после изменения страницы запросами 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 работает как прокси-сервер, находясь между вашим браузером и веб-сайтом, и регистрирует трафик в обоих направлениях.

Джастин Грант
источник
Знакомый с Fiddler, это непростой способ делать то, что я хочу (просматривать сгенерированный источник страницы после того, как он был изменен пользователем).
Джереми Кауфман
1
ему нужен источник страницы после того, как javascript изменил дом.
Байрон Уитлок
Я не голосующий против, но ваш ответ не имеет ничего общего с вопросом. Возможно, вопрос был отредактирован после того, как вы написали комментарий.
bradlis7
да, теперь я знаю ... в исходном вопросе не упоминалась эта важная деталь. :-) Как только я получил новую информацию из OP, я просто обновил свой ответ. Но я думаю, что мой первоначальный ответ был разумным ответом на исходный вопрос. Несмотря на то, что это не лучший ответ (мне гораздо больше нравится вариант «Забытая точка с запятой!»), Мне интересно, что сделало мой ответ достойным отрицательного голоса. Ничего страшного, просто интересно.
Джастин Грант
Спасибо за это объяснение относительно текущего HTML, существующего только внутри DOM браузера. В этом суть моей проблемы, и я не понял этого, когда спросил. Это заставляет меня поверить, что то, о чем я прошу, по сути невозможно.
Джереми Кауфман
34

Джастин мертв. Ключевым моментом здесь является то, что 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
s4y
источник
1
Итак, перефразируя этот ответ, это похоже на компиляцию программы, оптимизацию или иное изменение кода с помощью какого-либо инструмента или даже заражение программы вирусом с последующим запросом исходного кода результата. Преобразование HTML-> DOM - это односторонняя функция.
Сергей Оршанский
+1, черт возьми, что работает, чтобы увидеть код до и после каждой модификации. очень умное мышление! Спасибо
jimjim 02
Это может быть правдой, но не совсем отвечает на вопрос. Вполне возможно преобразовать текущую управляемую DOM обратно в HTML, что позволит вам «просматривать сгенерированный источник». Иногда это бывает очень полезно, например, если вам нужно проверить отдельный фрагмент JavaScript на реалистичной тестовой системе.
superluminary
21

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

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

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

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

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

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

Johnny5
источник
Вау, это действительно ЧИСТОЕ ЗОЛОТО! Отлично работает с одним щелчком по закладке. По крайней мере, только сейчас в Firefox. В Chrome отображалось всплывающее окно - может быть, он игнорирует «текст / простой»?
Джон Кумбс,
Я
копирую, вставляю
1
@eMi У меня здесь IE10, и он не позволяет мне вставить javascript:деталь, мне приходится вводить ее вручную. Может так и бывает. Еще раз проверьте, что наклеено.
Johnny5
1
В Google Chrome (по крайней мере, начиная с версии 44.0.2403.155) в Mac OSX букмарклет от @ Johnny5 не приводит к отображению простой текстовой страницы, содержащей исходный код открывателя, но Chrome пытается отобразить HTML, но без CSS, судя по его виду.
Дэйв Лэнд,
@ Johnny5, возможно, стоит упомянуть как примечание в ответе, которое javascript:обрезается при копировании / вставке в некоторых браузерах. Просто была эта проблема в Chrome.
Брайан
12

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

Карл Смотрич
источник
11
В Google Chrome, в Inspect Element, вы можете щелкнуть правой кнопкой мыши по любому элементу и «Скопировать как HTML»
JasonPlutext
3
@Jason Большое спасибо за это. Щелкнув правой кнопкой мыши элемент <html> и выбрав «Копировать как HTML», я получил именно то, что мне нужно сегодня в Chrome.
DaveGauer
11

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

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

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

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

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

Забытая точка с запятой
источник
Я не голосовал против, но «проверка HTML» отправляет не сгенерированный HTML, а исходный источник. (См. Отредактированный вопрос)
Pekka
Я просто попробовал это, похоже, он не отправляет сгенерированный источник (т.е. источник с изменениями DOM), а источник, который будет отображаться с опцией firefox «view source».
Джереми Кауфман
Меняю стойки ворот на мне!
Forgotten Semicolon
1
Я думал, что "просмотр сгенерированного источника" прояснит эту часть вопроса, но, судя по 4 ответам, я явно ошибался :)
Джереми Кауфман
Ссылка на View Source Chart не работает
Casebash
6

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

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

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

непристойный
источник
И теперь я вижу вашу правку, в которой вы цитируете проблему Doctype с панелью инструментов. Это справедливая критика, и мне больше нечего предложить.
lewsid
3
Отлично работает и теперь встроен прямо в обычный Firefox. Ctrl + A, щелкните правой кнопкой мыши, E. Также посмотрите отличный букмарклет, который нашел Johnny5.
Джон Кумбс,
В Firefox: щелкните правой кнопкой мыши страницу со сгенерированным контентом, который вы хотите просмотреть, затем выберите Web Developer> View Source> View Generated Source
Марк Гаваган
5

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

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.

Адамвагёк
источник
Ознакомьтесь также с другими частями этой серии: Часть 2 , Часть 3 .
Джабба
лома больше нет
Мыши
Не слишком удобен для
adamvagyok
5

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

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

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

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

Дэйв Лэнд
источник
4

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

Mike_K
источник
Не работает, если на страницу зацепили правый клик.
Кевин Уайтфут
4

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

ДжонниФальдо
источник
3

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

javascript:alert(document.body.innerHTML)
Майк
источник
1
+1: У меня не работало в адресной строке в IE 10, но прекрасно работало в консоли инструментов IE dev.
SausageFingers
3

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

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

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

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

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

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

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

сверхсветовой
источник
2

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

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

Уилл Хэнкок
источник
Вы также можете захотеть; Файл> Настроить исходный код просмотра Internet Explorer> Блокнот для удобного сохранения, когда вы сделаете вышеуказанное.
Уилл Хэнкок
1

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


источник
1

Приведенный ниже фрагмент кода 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 ;
Сатистский
источник
Я думаю, что для этого потребуются конкретные инструкции о том, как его использовать. Я предполагаю, что вы вставляете код на существующую страницу, но куда денется вывод?
Джон Кумбс,
0

Мне удалось решить аналогичную проблему, записав результаты вызова 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");
    });
}

ebarke
источник
@erbarke, не могли бы вы подробнее рассказать о своем ответе, объясните более подробно (код, подробный поток действий)?
Артем