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

Program / 글쓴이

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을 주었다.