생성 된 웹 페이지 소스를 보는 가장 좋은 방법은 무엇입니까?

W3의 유효성 검사기에 입력하기 위해 AJAX 요청에 의해 만들어진 DOM 변경을 포함하여 적절한 생성 소스를 제공하는 도구를 찾고 있습니다. 다음 방법을 시도했습니다.

1. 웹 개발자 도구 모음 -문서 유형에 따라 잘못된 소스를 생성합니다 (예 : 태그의 자동 닫힘 부분 제거). 페이지의 doctype 부분을 잃습니다.
2. Firebug- 소스의 잠재적 인 결함을 수정합니다 (예 : 닫히지 않은 태그). 또한 태그의 doctype 부분을 잃고 자체가 잘못된 HTML 인 콘솔을 삽입합니다.
3. IE 개발자 도구 모음-문서 유형에 따라 잘못된 소스를 생성합니다 (예 : XHTML 사양에 대해 모든 태그를 대문자로 만듭니다).
4. 강조 표시 + 선택 소스보기-전체 페이지를 가져 오기가 자주 어렵고 문서 유형도 제외됩니다.

어떤 방식 으로든 수정하거나 변경하지 않고 소스의 정확한 현재 버전을 제공하는 프로그램이나 추가 기능이 있습니까? 지금까지는 Firebug가 최고인 것 같지만 내 실수 중 일부를 수정할 수 있을지 걱정됩니다.

해결책

저스틴이 설명했듯이 내가 원했던 것에 대한 정확한 해결책은 없다는 것이 밝혀졌습니다. 가장 좋은 해결책은 Firebug로 인한 오류가 포함되어 있더라도 Firebug 콘솔 내부의 소스를 확인하는 것 같습니다. 또한 "생성 된 소스보기"가 실제 소스와 일치하지 않는 이유를 설명해 주신 Forgotten Semicolon에게 감사드립니다. 2 개의 베스트 답변을 표시 할 수 있다면 그렇게 할 것입니다.

[수정 된 질문의 자세한 내용에 대한 응답으로 업데이트]

문제는 페이지가 ajax 요청에 의해 수정되면 현재 HTML이 브라우저의 DOM 내부에만 존재한다는 것입니다. 더 이상 유효성을 검사 할 수있는 독립 소스 HTML이 더 이상 존재하지 않습니다. DOM.

보시다시피 IE의 DOM은 태그를 대문자로 저장하고 닫히지 않은 태그를 수정하며 원래 얻은 HTML을 많은 다른 변경합니다. 이는 브라우저가 일반적으로 문제 (예 : 닫히지 않은 태그)가있는 HTML을 가져와 사용자에게 유용한 것을 표시하기 위해 이러한 문제를 수정하는 데 매우 능숙하기 때문입니다. HTML이 IE에 의해 표준화되면 내가 아는 한 DOM의 관점에서 원래 소스 HTML은 본질적으로 손실됩니다.

Firefox 대부분의 likley는 이러한 변경 사항이 거의 없으므로 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이 구문 분석되고 삭제 되었기 때문에 사라졌습니다.

자바 스크립트에서 문서를 수정하는 올바른 방법은 함께 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)"))

파이어 폭스의 경우 웹 개발자 도구 모음이 작업을 수행합니다. 나는 일반적으로 이것을 사용하지만 때로는 더러운 타사 asp.net 컨트롤이 사용자 에이전트를 기반으로 다른 마크 업을 생성합니다.

편집하다

Bryan이 주석에서 지적했듯이 일부 브라우저 javascript:는 URL 표시 줄에 복사 / 붙여 넣기 할 때 해당 부분을 제거합니다 . 방금 테스트했으며 IE10의 경우입니다.

Chrome에서 문서를로드하면 Developer|Elements보기에 JS 코드에 의해 조정 된 HTML이 표시됩니다. 직접 HTML 텍스트가 아니며 관심있는 요소를 열어야 (펼쳐야)하지만 생성 된 HTML을 효과적으로 검사 할 수 있습니다.

웹 개발자 도구 모음에서 Tools -> Validate HTML또는 Tools -> Validate Local HTML옵션 을 사용해 보셨습니까?

이 Validate HTML옵션은 URL을 유효성 검사기로 전송하며 공개적으로 마주 보는 사이트에서 잘 작동합니다. 이 Validate Local HTML옵션은 현재 페이지의 HTML을 유효성 검사기로 전송하며, 이는 로그인 후 페이지 또는 공개적으로 액세스 할 수없는 페이지에서 잘 작동합니다.

소스 차트보기 ( FireFox 애드온 이라고도 함) 를 사용해 볼 수도 있습니다 . 흥미로운 메모 :

Q. 소스 차트보기가 내 XHTML 태그를 HTML 태그로 변경하는 이유는 무엇입니까?

A. 그렇지 않습니다. 브라우저는 이러한 변경을 수행하며 VSC는 브라우저가 코드로 수행 한 작업을 표시합니다. 가장 일반적 : 자체 닫는 태그는 닫는 슬래시 (/)를 잃습니다. 자세한 내용은 Rendered Source에 대한이 기사를 참조하십시오 (archive.org) .

Firefox 웹 개발자 도구 모음 사용 ( https://addons.mozilla.org/en-US/firefox/addon/60 )

소스보기-> 생성 된 소스보기로 이동하십시오.

나는 똑같은 일을 위해 항상 그것을 사용합니다.

나는 같은 문제가 있었고 여기에서 해결책을 찾았습니다.

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/ 위키 / 크로바

그것은 나에게 결함이 있고 잘못된 HTML을 주었다.

이것은 오래된 질문이며, 한때 저 에게 수년 동안 완벽하게 작동 했지만 더 이상 더 이상 작동하지 않는 오래된 답변이 있습니다 . 적어도 2016 년 1 월 현재는 아닙니다.

SquareFree의 "Generated Source"북마크릿은 사용자가 원하는대로 정확히 수행합니다. @ Johnny5의 "오래된 금"과는 달리 브라우저에서 정상적으로 렌더링되는 것이 아니라 최소한 Google의 경우에는 소스 코드로 표시됩니다. Mac의 Chrome) :

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

불행히도 @ Johnny5의 "오래된 금"처럼 작동합니다. 더 이상 소스 코드로 표시되지 않습니다. 죄송합니다.

Firefox에서는 ctrl-a (화면의 모든 항목 선택)를 누른 다음 "선택 소스보기"를 마우스 오른쪽 버튼으로 클릭합니다. 이것은 JavaScript에 의해 DOM에 대한 모든 변경 사항을 캡처합니다.

alert (document.documentElement.outerHTML);

이것이 urlbar라고 입력하지 않는 이유는 무엇입니까?

javascript:alert(document.body.innerHTML)

요소 탭에서 html 노드> 복사> 요소 복사를 마우스 오른쪽 버튼으로 클릭 한 다음 편집기에 붙여 넣습니다.

위에서 언급했듯이 소스가 DOM 트리로 변환되면 원래 소스가 더 이상 브라우저에 존재하지 않습니다. 변경 사항은 소스가 아닌 DOM에 적용됩니다.

그러나 수정 된 DOM을 HTML로 다시 구문 분석하여 "생성 된 소스"를 볼 수 있습니다.

1. Chrome에서 개발자 도구를 열고 요소 탭을 클릭합니다.
2. HTML 요소를 마우스 오른쪽 버튼으로 클릭합니다.
3. 복사> 요소 복사를 선택합니다.
4. 편집기에 붙여 넣습니다.

이제 현재 DOM을 HTML 페이지로 볼 수 있습니다.

이것은 완전한 DOM이 아닙니다.

DOM은 HTML 문서로 완전히 표현할 수 없습니다. 이는 DOM에 HTML이 속성을 갖는 것보다 더 많은 속성이 있기 때문입니다. 그러나 이것은 합리적인 일을 할 것입니다.

IE 개발 도구 (F12)에는 다음과 같은 기능이 있습니다. 보기> 소스> DOM (페이지)

DOM을 복사하여 붙여 넣은 다음 저장하여 유효성 검사기에 보내야합니다.

내가 찾은 유일한 것은 Safari 용 BetterSource 확장입니다. 이것은 문서의 조작 된 소스를 보여줄 것입니다.

아래의 자바 스크립트 코드 스 니펫은 완전한 ajax 렌더링 HTML 생성 소스를 제공합니다. 브라우저 독립적입니다. 즐겨 :)

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 ;

"렌더링 된 소스보기"크롬 확장을 확인하십시오.

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

ajax 호출 결과를 콘솔에 기록하여 비슷한 문제를 해결할 수있었습니다. 이것은 반환 된 html이었고 어떤 문제가 있는지 쉽게 볼 수있었습니다.

내 ajax 호출의 .done () 함수에서 console.log (results)를 추가하여 디버거 콘솔에서 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");
    });
}