Найкращий спосіб переглянути створене джерело веб-сторінки?

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

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

Чи існує якась програма чи надбудова, яка дасть мені точну поточну версію джерела, не виправляючи чи не змінюючи це якимось чином? Поки що Firebug здається найкращим, але я переживаю, що це може виправити деякі мої помилки.

Рішення

Виявляється, немає точного рішення того, що я хотів, як пояснив Джастін. Здається, найкращим рішенням є перевірка джерела всередині консолі Firebug, хоча воно буде містити деякі помилки, спричинені Firebug. Я також хотів би подякувати Забутій крапці з комою за пояснення, чому "View Generated Source" не відповідає фактичному джерелу. Якби я міг позначити 2 найкращі відповіді, я б.

[оновлення у відповідь на більше деталей у відредагованому питанні]

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

Як ви вже спостерігали, DOM IE зберігає теги у верхньому регістрі, виправляє незакриті теги та вносить багато інших змін у HTML-код, який він отримав спочатку. Це пояснюється тим, що браузери, як правило, дуже добре сприймають HTML із проблемами (наприклад, незакритими тегами) та виправляють ці проблеми, щоб відображати щось корисне для користувача. Як тільки HTML було канонізовано IE, наскільки я знаю, оригінальний HTML-код по суті втрачається з точки зору DOM.

Firefox most likley вносить менше цих змін, тому 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:частину під час копіювання / вставки в панель url. Я щойно тестував, і це стосується IE10.

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

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

Validate HTMLОпція відправляє URL в валідатор, який добре працює з публічно стоять сайтами. Validate Local HTMLВаріант посилає HTML поточної сторінки в валідатор, який добре працює зі сторінками за логін, або ті, які не є загальнодоступними.

Можливо, ви також захочете спробувати переглянути вихідну діаграму (також як надбудову FireFox ). Цікава примітка там:

З: Чому діаграма перегляду вихідного коду змінює мої теги XHTML на HTML-теги?

А. Ні. Браузер вносить ці зміни, VSC просто відображає те, що браузер зробив з вашим кодом. Найпоширеніші: самозакриваючі теги втрачають косу риску (/). Для отримання додаткової інформації дивіться цю статтю на веб-сайті Rended 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#generated_source

На жаль, він поводиться так само, як "старе золото" від @ Johnny5: він більше не відображається як вихідний код. Вибачте.

У Firefox просто натисніть ctrl-a (виберіть все на екрані), а потім клацніть правою кнопкою миші "Переглянути джерело виділення". Це фіксує будь-які зміни, внесені JavaScript в DOM.

попередження (document.documentElement.outerHTML);

Чому б не ввести це urlbar?

javascript:alert(document.body.innerHTML)

На вкладці елементи клацніть правою кнопкою миші вузол html> скопіювати> скопіювати елемент, а потім вставте у редактор.

Як було згадано вище, після перетворення джерела в дерево DOM оригінальне джерело більше не існує у браузері. Будь-які внесені вами зміни стосуватимуться DOM, а не джерела.

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

1. У Chrome відкрийте інструменти розробника та натисніть вкладку елементів.
2. Клацніть правою кнопкою миші елемент HTML.
3. Виберіть copy> copy element.
4. Вставте в редактор.

Тепер ви можете бачити поточний DOM як сторінку HTML.

Це не повний DOM

Зверніть увагу, що DOM не може бути повністю представлений документом HTML. Це тому, що DOM має набагато більше властивостей, ніж атрибути HTML. Однак це зробить розумну роботу.

Я думаю, що IE dev tools (F12) має; Перегляд> Джерело> DOM (Сторінка)

Вам потрібно буде скопіювати та вставити DOM і зберегти його, щоб відправити у валідатор.

Єдине, що я знайшов, це розширення BetterSource для Safari, це покаже вам маніпульоване джерело документа, лише недоліком якого є нічого віддаленого, як для Firefox

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

Перевірте розширення chrome "Перегляд відтвореного джерела":

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

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