HTMLタグの閉じ忘れをチェックするChrome拡張機能を作ってみた

Chrome拡張機能

概要

3つのタグがきちんと対応していません。

HTMLタグ閉じ忘れチェッカー @Chrome拡張機能

早速ですが以下のページで公開しています。

作った背景とか

この拡張機能を作った経緯ですが、単純なタグの開き・閉じ忘れを簡単に防げる方法がないかな。
と思って作成しました。

特にHTMLにそこまで詳しくない方、デバッグが苦手な方は試しに使ってみていただきたいなーと思っています。
もちろんマークアップを行う方は入れてみていただけると嬉しいです!

簡単な仕様説明

できること

  1. 表示しているページにタグの開き・閉じ忘れがないかをチェック
    タグエラー無しとタグエラー有りのキャプチャ
  2. タグの開き・閉じ忘れがあった場合、その数を表示
    タグエラー3件あり
  3. どの箇所にタグの開き・閉じ忘れがあったのかを表示
    タグエラーの詳細

今後について

確認できているバグ

  • たまに謎のタグエラーが検出される
  • scriptタグ内、コメントタグ内のタグもチェックしてしまう
  • 複数のChromeのウィンドウを開いていると正常にチェックできないことがある

出来れば直してからリリースしたかったのですが、とりあえずは使えるのでまずリリースして、そのあと時間を見て直したいです。。

今後追加したい機能とか

  • 細かなバグフィックスを行う
  • 多言語対応を行う

の2点かなーと思っています。
多言語対応…英語を…覚えたいです…

他にも何か要望などあった場合、対応できるものに関しては導入したりしていきたいと思います。
ご意見などはコメントやTwitterの@kzms2までご連絡をください。

参考にさせていただいたサイト

特にHTML内のタグ閉じ忘れをチェックするブックマークレットを公開なさっている、HTML内タグの閉じ忘れをチェックするツール[ブックマークレット] – とっくりばーさんのツールに刺激を受けて作りました。
ありがとうございました!

いろいろと拡張機能大変でしたが、なんだかんだで面白かったのでまた何か作れるように頑張りたいと思います!
作り方とかまとめたら需要がありそうでしたら、そちらも合わせて記事を書いてみます。

9 Comments »

  1. すばらしと思います。frameタグが閉じてない扱いででるのを直すとよいと思います

    Comment by とおりすがりのくま — 2011/11/22 火曜日 @ 18:40:21

  2. じわじわと

    タグの閉じ忘れをチェックするブックマークレットが便利。 – バニデザノート
    タグの閉じ忘れチェックブックマークレットのはてブ数が増えていっているようで、便利なものつくっとく…

    トラックバック by とっくりばー — 2011/12/9 金曜日 @ 3:39:45

  3. こんにちは、i’m viewing code of your chrome extension and fix some bugs, may i send you the patch? or if you don’t mind, i wanna submit my version to chrome webstore. i willl provide chinese locale for you 🙂

    Comment by fine — 2012/3/22 木曜日 @ 2:34:45

  4. ああ、言うのを忘れ、あなたのツールは非常に使いやすいです。どうもありがとうございます!

    Comment by fine — 2012/3/22 木曜日 @ 2:36:20

  5. >>とおりすがりのくま さん
    ありがとうございます!frame要素の件、調査して治せる時に直したいと思いますっ

    Comment by ずま/kzms2 — 2012/3/22 木曜日 @ 22:39:48

  6. >>fineさん
    你好^^ Nice to meet u,

    > i’m viewing code of your chrome extension and fix some bugs, may i send you the patch?
    Thank U. I’m grad !
    Sure, I’m waiting for your reply^^

    > or if you don’t mind, i wanna submit my version to chrome webstore. i willl provide chinese locale for you
    Oh really? I’m overwhelmed.
    Would you do me a favor?Could you provide chinese locale?

    Comment by ずま/kzms2 — 2012/3/22 木曜日 @ 22:41:11

  7. ずま/kzms2 さん
    you can find my code here↓ 🙂
    https://htmltagchecker.googlecode.com/svn/tags/v1

    Comment by fine — 2012/3/24 土曜日 @ 1:25:47

  8. >>fineさん
    I receive your code. I’m grad!
    My app update is finished.

    https://chrome.google.com/webstore/detail/ohdllebchmmponnofchalfkegpjojcaf/

    Thank you for your kindness 🙂

    Comment by ずま/kzms2 — 2012/3/31 土曜日 @ 2:24:03

  9. got it!

    Comment by fine — 2012/4/12 木曜日 @ 0:51:38

コメントを入力

コメント欄

Available Feeds

ブログ内検索

Profile

ずま/Zuma
Zuma
TwitterはてなブックマークTumblrFriendFeedGoogle リーダー
  • 読み込みエラーです。しばらく経ってから確認してみてください。

某ポータルWebデザイナー。世間的にはマークアップな人。 html,css,javascript大好き。最近はcss3がお気に入り。phpとasも気になるお年頃。僕はどこへ向かうのか。dot3というユニットでも活動中。http://dot3.jp [tag]iPhone,music,design,wordpress

Face book

最近の活動

Dreamweaver Town Meeting in Tokyo

Dreamweaver Town Meeting in Tokyoに出演しました。