닫히지 않은 div 태그를 찾는 방법
닫히지 않은 div 문제는 거의 나를 미치게 만듭니다. 특히 페이지가 길고 복잡한 경우 추적하기가 매우 어렵습니다.
어떤 제안?
이미 언급했듯이 W3C Validator를 통해 코드를 실행하는 것은 좋지만 페이지가 복잡한 경우 여전히 열린 div를 찾을 수있는 위치를 정확히 알지 못할 수 있습니다.
탭을 사용하여 코드를 들여 쓰는 것을 좋아합니다. 이러한 문제를 쉽게 찾을 수 있도록 시각적으로 정리하여 자녀, 형제 자매, 부모 등을 더 명확하게 나타냅니다.
편집 : 또한 복잡한 영역에서 닫는 태그를 표시하기 위해 몇 가지 HTML 주석을 사용합니다. 나는 깔끔함을 위해 최소한으로 유지합니다.
<body>
<div>
Main Content
<div>
Div #1 content
<div>
Child of div #1
<div>
Child of child of div #1
</div><!--// close of child of child of div #1 //-->
</div><!--// close of child of div #1 //-->
</div><!--// close of div #1 //-->
<div>
Div #2 content
</div>
<div>
Div #3 content
</div>
</div><!--// close of Main Content div //-->
</body>
필요한 작업을 수행 할 수있는 Unclosed Tag Finder 라는 온라인 도구를 만들었습니다 .
HTML에 붙여 넣으면 "188 행의 닫는 태그가 62 행의 열린 태그와 일치하지 않습니다."와 같은 출력이 표시됩니다.
업데이트 : Unclosed Tag Finder의 새 위치는 https://jonaquino.blogspot.com/2013/05/unclosed-tag-finder.html입니다.
월드 와이드 웹 컨소시엄 HTML 유효성 검사기는 HTML 오류를 잡기에 아주 좋습니다.
이미 좋은 답변이 있다는 것을 알고 있지만 Google 검색에서이 질문을 발견했으며 누군가이 온라인 확인 도구를 지적했으면합니다.
http://www.tormus.com/tools/div_checker
URL을 입력하면 페이지의 전체지도가 표시됩니다. 필요한 것처럼 빠른 디버그에 매우 유용합니다.
메모장 ++을 사용하십시오. 쉽게 찾을 수 있습니다
http://notepad-plus-plus.org/download/
또는 당신은 할 수 있습니다 파이어 폭스에서 소스보기 - 닫히지 않은 div의가 에 표시됩니다 RED를
1- <div메모장 에서 숫자 세기 ++ (Ctrl + F)
2- 숫자 세기</div
두 숫자를 비교하세요!
Dreamweaver를 사용하면 닫히지 않은 div에 쉽게 메모 할 수 있습니다. 코드보기의 왼쪽 창에서 <> highlight invalid code버튼을 볼 수 있습니다.이 버튼을 클릭하면 닫히지 않은 div가 강조 표시되고 닫히지 않은 div가 닫힙니다. F5를 눌러 페이지를 새로 고치면 닫히지 않은 다른 div가 있는지 확인합니다.
Dreamweaver에서 페이지의 유효성을 검사 할 수도 있습니다. File>Check Page>Browser Compatibility을 클릭하면 작업 창이 나타납니다.를 클릭 Validation하면 왼쪽에 ► 버튼이 표시됩니다.
즐겨!
Taking Milad's suggestion a bit further, you can break your document source down and then do another find, continuing until you find the unmatched culprit.
When you are working with many modules (using a CMS), or don't have access to the W3C tool (because you are working locally), this approach is really helpful.
Div tags are easy to spot for me. Just download the file, scan it or so with netbeans, then continue debugging it. Or you can use the Google chrome developer kit, and view the page source. I'm a bit of a weird developer, I don't always use the "best" stuff. But it works for me.
I'll link you with some developer stuff I use
http://www.coffeecup.com/free-editor/
Those are just a few of the good ones out there. I'm open to more suggestions to this list :D
Happy programming
-skycoder
ReferenceURL : https://stackoverflow.com/questions/6272327/how-to-find-the-unclosed-div-tag
'program tip' 카테고리의 다른 글
| asset_host를 사용하지 않는 메일러의 image_tag (0) | 2021.01.11 |
|---|---|
| 동시성 모델 : Erlang 대 Clojure (0) | 2021.01.11 |
| 쉘 스크립트 변수가 비어 있지 않음 (-z 옵션) (0) | 2021.01.11 |
| 초점에서 자리 표시 자 색상을 변경하는 방법은 무엇입니까? (0) | 2021.01.11 |
| 너겟 패키지의 내용 검토 (0) | 2021.01.11 |