閉じていないdivタグを探す方法

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

何か提案はありますか?

質問へのコメント (3)

Unclosed Tag Finderというオンラインツールを作成しました。

HTMLに貼り付けると、「188行目のタグを閉じる< / table>」のような出力が表示され、62行目の開いているタグ< td>と一致しません。"。

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

解説 (8)
ソリューション

すでに述べたように、コードをW3C Validatorに通すことは素晴らしいことですが、ページが複雑な場合、open divがどこにあるのか正確にわからないことがあります。

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

EDIT: また、複雑な部分の閉じタグをマークするために、いくつかのHTMLコメントを使用します。 これらはすっきりさせるために最低限にとどめています。



    <div>
        Main Content

        <div>
            Div #1 content

            <div>
               Child of div #1

               <div>
                   Child of child of div #1
               </div>
            </div>
        </div>

        <div>
            Div #2 content
        </div>

        <div>
            Div #3 content
        </div>

    </div>

解説 (8)

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

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

URLを投入するだけで、< div>全体が表示されます。ページの地図。 私が必要とするような迅速なデバッグに非常に役立ちます。

解説 (1)

World Wide Web Consortium HTML Validator](http://validator.w3.org/)は、HTMLのエラーを検出するのに優れています

解説 (4)

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

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

または、 FIREFoxのソースを表示-非公開のdivs RED に表示されます。

解説 (2)

1- メモ帳++で`

解説 (3)

Dreamweaverを使用すると、非公開のdivに簡単にメモできます。 コードビューの左側のペインに、「」「無効なコードを強調表示」ボタンが表示され、このボタンをクリックすると、閉じられていないdivが強調表示され、閉じていないdivが閉じます。 F5を押してページを更新し、他の非公開のdivが存在することを確認します。

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

楽しい。!

解説 (0)

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

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

解説 (0)

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

私が使用している開発者のものとリンクします。

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

http://www.netbeans.org

それらはそこにある良いもののほんの一部です。 このリストへの提案をもっと受け入れます:D。

幸せなプログラミング。

-スカイコーダー。

解説 (0)