web-dev-qa-db-ja.com

閉じられていないdivタグを見つける方法

閉じられていないdiv問題は、ほとんど私を夢中にさせます。特にページが長く複雑な場合、追跡するのは非常に困難です。

助言がありますか？

htmlhtml-validation
52
user503853

既に述べたように、 W3C Validator を介してコードを実行することは素晴らしいことですが、ページが複雑な場合でも、開いているdivの場所を正確に知ることができない場合があります。

タブを使用してコードをインデントするのが好きです。これらの問題を見つけやすくするために視覚的に整理されており、子供、兄弟、親などがより明確に表示されます。

EDIT：また、いくつかの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>
25
Sparky

nclosed Tag Finder と呼ばれるオンラインツールを作成しました。これは必要なことを行います。

HTMLを貼り付けると、「行188の終了タグが行62の開始タグと一致しません」のような出力が得られます。

更新：Unclosed Tag Finderの新しい場所は https://jonaquino.blogspot.com/2013/05/unclosed-tagです-Finder.html

34
Jonathan Aquino

World Wide Web Consortium HTML Validator は、HTMLエラーの捕捉に優れています。

15
rockerest

すでにいくつかの良い答えがあったことは知っていますが、Google検索でこの質問に出くわし、誰かがこのオンラインチェックツールを指摘してくれたらと思います...

http://www.tormus.com/tools/div_checker

URLを挿入するだけで、ページのマップ全体が表示されます。私が必要とするような迅速なデバッグに非常に便利です。

15
Noah Whitmore

メモ帳++を使用します。簡単に見つけることができます

http://notepad-plus-plus.org/download/

または、FIREfoxからソースを表示-閉じられていないdivが表示されます[〜＃〜] red [〜＃〜]

13
Thilanka De Silva

1- notepad ++で<divの数を数える（Ctrl + F）
2- </divの数を数える

2つの数値を比較してください！

8
Milad

Dreamweaverを使用している場合は、閉じられていないdivを簡単にメモできます。コードビューの左ペインには、<>highlight invalid codeボタンをクリックしてこのボタンをクリックすると、閉じられていないdivが強調表示され、閉じられていないdivが閉じます。 F5キーを押してページを更新し、閉じられていない他のdivがあることを確認します。

Dreamweaverでもページを検証できます。 File>Check Page>Browser Compatibility、タスクペインが表示されますValidationをクリックします。左側に表示される►ボタンをクリックして検証します。

楽しい！

2
Bhojendra Rauniyar

Miladの提案をもう少し進めて、ドキュメントソースを分類してから、別の検索を実行し、一致しない犯人を見つけるまで続けます。

多くのモジュールを使用している場合（CMSを使用）、または（ローカルで作業しているため）W3Cツールにアクセスできない場合、このアプローチは非常に役立ちます。

1
RogerRoger

Divタグは簡単に見つけられます。ファイルをダウンロードし、netbeansでスキャンするか、デバッグを続けます。または、Google chrome開発者キットを使用して、ページのソースを表示できます。私は少し奇妙な開発者です。常に「最高の」ものを使用するわけではありません。私のために。

私が使用するいくつかの開発者のものとリンクします

http://www.coffeecup.com/free-editor/

http://www.netbeans.org

これらは、良いもののほんの一部です。私はこのリストへのより多くの提案を受け入れています：D

ハッピープログラミング

-スカイコーダー

1
TheCodingKlam