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

Ответ 1

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

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

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

Firefox most likley делает меньше этих изменений, поэтому Firebug - это, вероятно, ваша лучшая ставка.

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

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

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

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

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

Ответ 2

Джастин мертв. Ключевым моментом здесь является то, что 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

Ответ 3

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

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

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

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

ИЗМЕНИТЬ

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

Ответ 4

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

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

Вы также можете попробовать Просмотреть исходную диаграмму (также как Дополнение FireFox). Интересно отметить:

Q. Почему View Source Chart меняет теги XHTML на теги HTML?

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

Ответ 5

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

Ответ 6

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

Просто перейдите в View Source → View Generated Source

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

Ответ 7

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

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/wiki/Crowbar

Он дал мне ошибочный, недействительный HTML.

Ответ 8

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

Буклет-булавка "Generated Source" из SquareFree делает именно то, что вы хотите - и, в отличие от отличного "старого золота" от "Johnny5" в противном случае, отображается как исходный код (а не обычно отображается браузером, по крайней мере, в случай Google Chrome на Mac):

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

К сожалению, он ведет себя так же, как "старое золото" от @Johnny5: он больше не отображается в качестве исходного кода. К сожалению.

Ответ 9

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

Ответ 10

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

Ответ 11

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

javascript:alert(document.body.innerHTML)

Ответ 12

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

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

Ответ 13

На вкладке "Элементы" щелкните правой кнопкой мыши элемент копирования html node > copy > , затем вставьте в редактор.

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

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

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

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

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

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

Ответ 14

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

Ответ 15

Ниже фрагмент кода 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 ;