방문한 일부 복잡한 웹 페이지의 구조를 분석하고 싶습니다. 수동으로 HTML 소스에서 태그를 구문 분석하는 것은 지루하고 오류가 발생하기 쉽습니다.HTML 소스를 트리보기로 보시겠습니까?
HTML 소스 (또는 URL)를 입력으로 받아들이는 유틸리티를 찾고 소스 및 ID 속성을 포함한 HTML 요소의 계층 구조 배열을 트리 뷰에 표시하고 싶습니다.
나는 그런 도구를 쉽게 찾을 수 있다고 확신했지만 몇 가지 Google 검색으로는 나에게 도움이되지 못했습니다. 나는 그런 도구가 존재한다고 확신한다. 공동체가 나를 찾도록 도와 줄 수 있습니까? (저는 Windows 사용자이고 가능한 경우 무료로 사용하는 것이 좋습니다.)
IE8 +와 Chrome 모두 멋진 개발자 도구가 있습니다. 웹 페이지를 방문하고 IE에서 F12 키를 누르고 Chrome에서는 공구 모양 -> 도구 -> 개발자 도구로 이동하십시오. 둘 다 페이지의 트리보기를 표시하고 수정할 수 있습니다. 둘 다 매우 강력합니다.
firefox 또는 DOMinspector addon을 firefox에 사용하십시오.
대부분의 브라우저에는 DOM 뷰어가 내장되어 있습니다. Firefox에는 third party extension이 있습니다.
브라우저가 오류 복구를 수행 한 후에 DOM을 모두 표시합니다. 그 전에는 유효한 트리 을 만들 수 없음을 확인하지 못할 수 있습니다..
다운로드 파이어 폭스 (http://www.mozilla.org/)와 방화범의 부가 https://addons.mozilla.org/firefox/addon/firebug/) BOTH가이
또한 같은 좋은 편집기를 사용할 수 있습니다 무료로됩니다 설치 메모장 + +는 구문 및 노드 축소를 강조 표시합니다.
다른 언급했듯이 대부분의 최신 웹 브라우저에는 HTML 소스를 트리보기로 탐색 할 수있는 "개발자 도구"가 내장되어 있습니다. Internet Explorer 9, Firefox 4, Chrome 12, Opera 11 및 Safari 5의 최신 버전이 제공하는 도구를 스크린 샷으로 비교했습니다.
+1. –
당신은 IE 개발 도구 또는 방화범 이외의 의미? – anothershrubery
내가 사용하는 모든 불의 버그 사용 – Ibu
Chrome의 개발 도구가이 작업을 수행합니다. 페이지를 마우스 오른쪽 버튼으로 클릭하고 "요소 검사"를 선택하여 시작하십시오. 자세한 비교를 위해 –