WEBコンテンツ検証ツール

wata19CSS,HTML,JavaScript,PHP,XHTML

はじめまして。品質管理チームのwata19です。
2008年11月中旬入社の新人です。宜しくお願い致します。

この業界にはHTMLコーディングのアルバイトから入り、WEBコンテンツの検証に携わって今年で7年目になります。今回はこれまでお世話になってきたツールをご紹介したいと思います。
(有名どころばかりですが・・・。)

■Firefox エラーコンソール(JavaScriptコンソール)
・JavaScriptのエラーを表示
・CSSのパースエラーを表示
・XMLパースエラーを表示
CSSハックも表示してしまうので、ある程度Web制作の知識は必要です。

■Firefoxのアドオン Firebug
CSS、HTML、JavaScriptの編集/表示、JavaScriptのデバッグ/分析がリアルタイムに行えるアドオン。

単純なテンプレートから複雑なAjaxアプリケーションに至るまでのすべての編集とデバッグを行うことが可能。動的に作成されたHTMLソースを見ることができるので、Ajax案件では重宝します。

■Firefoxのアドオン Html Validator
XHTMLの文法チェック、アクセシビリティのチェック、ソースコードのクリーンアップ等を行ってくれるアドオン。Web標準準拠プロジェクトに携わっていた頃、大変お世話になりました。

■Firefoxのアドオン View Source Chart
HTMLソースコードの構造を色分けして表示するアドオン。アプリケーションで生成されるHTMLソースが改行されていない場合に重宝します。(※Firefox3は現段階では非対応。)

■Firefoxのアドオン FireMobileSimulator
DoCoMo/Au/SoftBank 3キャリアのHTTPリクエスト・絵文字表示などをシミュレートしてくれるアドオン。PC/携帯対応案件ではお世話になります。

■Google Chrome JavaScriptコンソール
■Google Chrome JavaScript Debugger
Google Chrome自体が安定して動くようになれば普及していくかと思われます。
※現状ではSymantec Endpoint Protection がインストールされている環境だと、Google Chromeが正常に動作しません。

■.line
画面上にラインを引くフリーソフト。僅か1pxのレイアウト崩れでもこれを用いることで発見できます。
※現在は配布されていません。

今後導入していきたいツール

■Mac Safari 3のWeb Inspector
ターミナルを使ってSafari3をデバッグモードにした状態で使用可能なツール。

■Firefoxのアドオン Selenium IDE
ブラウザ上の操作をテストスクリプトとして作成できるアドオン。繰り返し行うテストケースの自動化に最適。

■FirePHP
Firebugにて、PHPから情報を出力できるプラグイン的なPHPライブラリ。

wata19CSS,HTML,JavaScript,PHP,XHTML

Posted by wata19