Лучший способ просмотреть созданный источник веб-страницы?
Я ищу инструмент, который даст мне правильный сгенерированный источник, включая изменения DOM, сделанные AJAX-запросами для ввода в валидатор W3. Я пробовал следующие методы:
- Панель инструментов веб-разработчика - генерирует неверный источник в соответствии с типом документа (например, удаляет самозакрывающуюся часть тегов). Теряет часть документа с типом документа.
- Firebug - исправляет возможные недостатки в источнике (например, незакрытые теги). Также теряет часть тегов doctype и вводит консоль, которая сама по себе является недействительным HTML.
- IE Developer Toolbar - генерирует недопустимый источник в соответствии с типом документа (например, он делает все теги заглавными, против спецификации XHTML).
- Выделите + Просмотреть источник выбора - часто трудно получить всю страницу, также исключает тип документа.
Есть ли какая-либо программа или дополнение, которое даст мне точную текущую версию исходного кода, без исправления или изменения каким-либо образом? Пока что Firebug кажется лучшим, но я боюсь, что это может исправить некоторые из моих ошибок.
Решение
Оказывается, нет точного решения того, что я хотел, как объяснил Джастин. Лучшее решение, по-видимому, заключается в проверке источника внутри консоли Firebug, даже если он будет содержать некоторые ошибки, вызванные Firebug. Я также хотел бы поблагодарить Forgotten Semicolon за объяснение, почему "View Generated Source" не соответствует фактическому источнику. Если бы я мог отметить 2 лучших ответа, я бы.
16 ответов
[обновление в ответ на более подробную информацию в отредактированном вопросе]
Проблема, с которой вы сталкиваетесь, заключается в том, что, как только страница изменяется с помощью запросов 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 работает как прокси-сервер, расположенный между вашим браузером и веб-сайтом, и регистрирует трафик в обоих направлениях.
Джастин мертв. Ключевым моментом здесь является то, что 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: часть при копировании / вставке в строке URL. Я только что проверил, и это в случае с IE10.
Если вы загружаете документ в Chrome, Developer|Elements Представление покажет вам HTML-код в зависимости от вашего кода JS. Это не напрямую HTML-текст, и вам нужно открывать (раскрывать) любые элементы, представляющие интерес, но вы эффективно осматриваете сгенерированный HTML.
На панели инструментов веб-разработчика вы пробовали Tools -> Validate HTML или же Tools -> Validate Local HTML опции?
Validate HTML опция отправляет URL-адрес в валидатор, который хорошо работает с общедоступными сайтами. Validate Local HTML Опция отправляет HTML-код текущей страницы в валидатор, который хорошо работает со страницами за входом в систему или с теми, которые не являются общедоступными.
Вы также можете попробовать просмотреть исходную диаграмму (также как дополнение к FireFox). Интересная заметка там:
В. Почему View Source Chart меняет мои теги XHTML на теги HTML?
О. Это не так. Браузер вносит эти изменения, VSC просто отображает, что браузер сделал с вашим кодом. Чаще всего: самозакрывающиеся теги теряют закрывающий слеш (/). Смотрите эту статью на Rendered Source для получения дополнительной информации (archive.org).
Использование панели инструментов веб-разработчика Firefox ( https://addons.mozilla.org/en-US/firefox/addon/60)
Просто зайдите в View Source -> View Generated Source
Я использую это все время для одной и той же вещи.
У меня была такая же проблема, и я нашел здесь решение:
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.
Это старый вопрос, и вот старый ответ, который когда-то работал для меня безупречно втечение многих лет, но больше не работает, по крайней мере, с января 2016 года:
Букмарклет "Сгенерированный источник" от SquareFree делает именно то, что вам нужно, и, в отличие от "чистого старого золота" от @Johnny5, отображается как исходный код (вместо того, чтобы нормально отображаться браузером, по крайней мере, в случае с Google). Chrome на Mac):
https://www.squarefree.com/bookmarklets/webdevel.html
К сожалению, он ведет себя так же, как "старое золото" из @Johnny5: он больше не отображается как исходный код. Сожалею.
Ознакомьтесь с расширением Chrome "Просмотр обработанного исходного кода":
https://chrome.google.com/webstore/detail/view-rendered-source/ejgngohbdedoabanmclafpkoogegdpob/
В Firefox просто нажмите Ctrl-A (выберите все на экране), затем щелкните правой кнопкой мыши "View Selection Source". Это фиксирует любые изменения, сделанные JavaScript в DOM.
Почему бы не ввести этот URL-адрес?
javascript:alert(document.body.innerHTML)
На вкладке элементов щелкните правой кнопкой мыши узел html> copy > copy element - и вставьте его в редактор.
Как было упомянуто выше, после преобразования источника в дерево DOM исходный источник больше не существует в браузере. Любые сделанные вами изменения будут относиться к DOM, а не к источнику.
Однако вы можете разобрать измененный DOM обратно в HTML, что позволит вам увидеть "сгенерированный источник".
- В Chrome откройте инструменты разработчика и перейдите на вкладку элементов.
- Щелкните правой кнопкой мыши элемент HTML.
- Выберите "Копировать"> "Копировать элемент".
- Вставить в редактор.
Теперь вы можете увидеть текущий DOM в виде HTML-страницы.
Это не полный DOM
Обратите внимание, что DOM не может быть полностью представлен HTML-документом. Это потому, что DOM имеет гораздо больше свойств, чем HTML имеет атрибуты. Однако это сделает разумную работу.
Я думаю, что IE dev tools (F12) имеет; Вид> Источник> DOM (Страница)
Вам нужно будет скопировать и вставить DOM и сохранить его для отправки в валидатор.
Единственное, что я нашел, - это расширение BetterSource для Safari, которое покажет вам, что единственным недостатком документа является манипулируемый источник документа.
Приведенный ниже фрагмент кода 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 ;
Мне удалось решить аналогичную проблему, зарегистрировав результаты вызова 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");
});
}