วิธีที่ดีที่สุดในการดูแหล่งที่มาของหน้าเว็บที่สร้างขึ้น?

ฉันกำลังมองหาเครื่องมือที่จะให้แหล่งที่มาที่ถูกสร้างขึ้นรวมถึงการเปลี่ยนแปลง DOM ที่ทำโดยคำขอของ AJAX สำหรับการป้อนข้อมูลลงในตัวตรวจสอบความถูกต้องของ W3 ฉันได้ลองทำตามวิธีต่อไปนี้แล้ว:

1. แถบเครื่องมือนักพัฒนาเว็บ - สร้างแหล่งที่มาที่ไม่ถูกต้องตามประเภทเอกสาร (เช่นลบส่วนปิดแท็กด้วยตนเอง) สูญเสียส่วนหลักประเภทของหน้า
2. Firebug - แก้ไขข้อบกพร่องที่อาจเกิดขึ้นในแหล่งที่มา (เช่นแท็กที่ไม่ปิด) นอกจากนี้ยังสูญเสียส่วนของแท็กประเภทหลักและแทรกคอนโซลซึ่งตัวเองเป็น HTML ที่ไม่ถูกต้อง
3. แถบเครื่องมือสำหรับนักพัฒนา IE - สร้างซอร์สที่ไม่ถูกต้องตามประเภทเอกสาร (เช่นทำให้แท็กทั้งหมดเป็นตัวพิมพ์ใหญ่เทียบกับข้อมูลจำเพาะ XHTML)
4. ไฮไลต์ + ดูแหล่งที่มาของการเลือก - บ่อยครั้งที่ยากที่จะรับทั้งหน้านอกจากนี้ยังไม่รวม doc-type

มีโปรแกรมหรือส่วนเสริมใดบ้างที่จะให้แหล่งที่มาเวอร์ชันปัจจุบันที่แน่นอนโดยไม่ต้องแก้ไขหรือเปลี่ยนแปลงในทางใดทางหนึ่ง จนถึงตอนนี้ Firebug ดูเหมือนจะดีที่สุด แต่ฉันกังวลว่ามันอาจแก้ไขข้อผิดพลาดบางอย่างของฉันได้

วิธีการแก้

ปรากฎว่าไม่มีวิธีแก้ปัญหาที่แน่นอนสำหรับสิ่งที่ฉันต้องการตามที่จัสตินอธิบาย ทางออกที่ดีที่สุดคือการตรวจสอบแหล่งที่มาภายในคอนโซลของ Firebug แม้ว่าจะมีข้อผิดพลาดบางอย่างที่เกิดจาก Firebug ก็ตาม ฉันขอขอบคุณ Forgotten Semicolon ที่อธิบายว่าเหตุใด "View Generated Source" จึงไม่ตรงกับแหล่งที่มาจริง ถ้าฉันสามารถทำเครื่องหมายคำตอบที่ดีที่สุด 2 คำตอบได้ฉันจะทำ

[อัปเดตตามรายละเอียดเพิ่มเติมในคำถามที่แก้ไข]

ปัญหาที่คุณพบคือเมื่อเพจถูกแก้ไขโดยคำขอของ ajax HTML ปัจจุบันจะมีอยู่ใน DOM ของเบราว์เซอร์เท่านั้น - ไม่มีแหล่ง HTML ที่เป็นอิสระอีกต่อไปที่คุณสามารถตรวจสอบความถูกต้องนอกเหนือจากสิ่งที่คุณสามารถดึงออกมาจาก DOM

ดังที่คุณสังเกตเห็นแล้ว DOM ของ IE จะจัดเก็บแท็กเป็นตัวพิมพ์ใหญ่แก้ไขแท็กที่ไม่ปิดและทำการเปลี่ยนแปลงอื่น ๆ มากมายกับ HTML ที่มีมา แต่เดิม เนื่องจากโดยทั่วไปแล้วเบราว์เซอร์มักใช้ HTML ที่มีปัญหาได้ดี (เช่นแท็กที่ไม่ปิด) และแก้ไขปัญหาเหล่านั้นเพื่อแสดงสิ่งที่เป็นประโยชน์ต่อผู้ใช้ เมื่อ IE ได้รับการกำหนดรูปแบบ HTML แล้ว HTML ต้นฉบับดั้งเดิมจะสูญหายไปจากมุมมองของ DOM เท่าที่ฉันรู้

Firefox ชอบมากที่สุดทำการเปลี่ยนแปลงเหล่านี้น้อยลงดังนั้น Firebug น่าจะเป็นทางออกที่ดีกว่าของคุณ

ตัวเลือกสุดท้าย (และใช้แรงงานมากขึ้น) อาจใช้ได้กับเพจที่มีการปรับเปลี่ยน ajax ง่ายๆเช่นดึง HTML บางส่วนจากเซิร์ฟเวอร์และนำเข้าในเพจภายในองค์ประกอบเฉพาะ ในกรณีนี้คุณสามารถใช้มือเล่นซอหรือเครื่องมือที่คล้ายกันเพื่อต่อ 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

A. ไม่ เบราว์เซอร์กำลังทำการเปลี่ยนแปลงเหล่านี้ VSC เพียงแสดงสิ่งที่เบราว์เซอร์ทำกับโค้ดของคุณ ที่พบบ่อยที่สุด: แท็กปิดตัวเองสูญเสียเครื่องหมายทับ (/) ดูบทความเกี่ยวกับแหล่งที่มาของการแสดงผลสำหรับข้อมูลเพิ่มเติม (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 / ชะแลง

มันทำให้ฉันมี HTML ที่ผิดพลาดและไม่ถูกต้อง

นี่เป็นคำถามที่เก่าและนี่คือคำตอบที่เก่าที่ได้ทำงานครั้งเดียวไม่มีที่ติสำหรับฉันมานานหลายปีแต่ไม่ได้อีกอย่างน้อยไม่ได้เป็นของเดือนมกราคม 2016

bookmarklet "แหล่งที่มาที่สร้างขึ้น" จาก SquareFree ทำในสิ่งที่คุณต้องการ - และไม่เหมือนกับ "ทองเก่า" ที่มีคุณภาพดีจาก @ Johnny5 โดยจะแสดงเป็นซอร์สโค้ด (แทนที่จะแสดงผลโดยเบราว์เซอร์ตามปกติ Chrome บน Mac):

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

น่าเสียดายที่มันทำงานเหมือนกับ "ทองเก่า" จาก @ Johnny5 นั่นคือไม่แสดงเป็นซอร์สโค้ดอีกต่อไป ขออภัย.

ใน Firefox เพียงแค่ ctrl-a (เลือกทุกอย่างบนหน้าจอ) จากนั้นคลิกขวาที่ "View Selection Source" สิ่งนี้จับการเปลี่ยนแปลงใด ๆ ที่ทำโดย JavaScript ไปยัง DOM

การแจ้งเตือน (document.documentElement.outerHTML);

ทำไมไม่พิมพ์ว่านี่คือ urlbar?

javascript:alert(document.body.innerHTML)

ในแท็บองค์ประกอบคลิกขวาที่โหนด html> คัดลอก> คัดลอกองค์ประกอบจากนั้นวางลงในตัวแก้ไข

ดังที่ได้กล่าวไว้ข้างต้นเมื่อแหล่งที่มาถูกแปลงเป็นโครงสร้าง DOM แล้วแหล่งที่มาดั้งเดิมจะไม่มีอยู่ในเบราว์เซอร์อีกต่อไป การเปลี่ยนแปลงใด ๆ ที่คุณทำจะเป็น DOM ไม่ใช่ที่มา

อย่างไรก็ตามคุณสามารถแยกวิเคราะห์ DOM ที่แก้ไขแล้วกลับเป็น HTML เพื่อให้คุณเห็น "แหล่งที่มาที่สร้างขึ้น"

1. ใน Chrome เปิดเครื่องมือสำหรับนักพัฒนาและคลิกแท็บองค์ประกอบ
2. คลิกขวาที่องค์ประกอบ HTML
3. เลือกคัดลอก> คัดลอกองค์ประกอบ
4. วางในตัวแก้ไข

ตอนนี้คุณสามารถเห็น DOM ปัจจุบันเป็นหน้า HTML

นี่ไม่ใช่ DOM แบบเต็ม

โปรดทราบว่าเอกสาร HTML ไม่สามารถแสดง DOM ได้ทั้งหมด เนื่องจาก DOM มีคุณสมบัติมากกว่าที่ HTML มีแอตทริบิวต์ อย่างไรก็ตามสิ่งนี้จะได้ผลดี

ฉันคิดว่า IE dev tools (F12) มี; ดู> แหล่งที่มา> DOM (หน้า)

คุณจะต้องคัดลอกและวาง DOM และบันทึกเพื่อส่งไปยังตัวตรวจสอบความถูกต้อง

ตรวจสอบส่วนขยาย Chrome "ดูแหล่งที่มาที่แสดงผล":

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

สิ่งเดียวที่ฉันพบคือส่วนขยายBetterSourceสำหรับ Safari ซึ่งจะแสดงให้คุณเห็นแหล่งที่มาที่ถูกจัดการของเอกสารข้อเสียเพียงอย่างเดียวคือไม่มีอะไรที่เหมือนกับ Firefox จากระยะไกล

ข้อมูลโค้ดจาวาสคริปต์ด้านล่างนี้จะทำให้คุณได้รับแหล่งที่มาของ 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 ;

ฉันสามารถแก้ไขปัญหาที่คล้ายกันได้โดยบันทึกผลลัพธ์ของการโทร 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");
    });
}