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

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

Answer 2

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

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

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

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

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

[Первоначальный ответ здесь на первоначальный вопрос]

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

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

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

Answer 3

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

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

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

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

EDIT

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

Answer 4

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

Answer 5

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

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

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

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

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

Answer 6

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

Просто зайдите в View Source -> View Generated Source

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

Answer 7

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

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

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

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

Answer 8

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

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

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

http://simile.mit.edu/wiki/Crowbar (сейчас (2015-12) 404 с)
обратная связь с машиной:
http://web.archive.org/web/20140421160451/http://simile.mit.edu/wiki/Crowbar

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

Answer 9

предупреждение (document.documentElement.outerHTML);

Answer 10

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