Firebug Liteを実際に使ってみる - まずは導入～HTML編

動作環境は次のとおり。

  • OS: Microsoft Windows XP SP3
  • Internet Explorer 7
  • Safari 3.1.2
  • Opera 9.51

firebug-lite-compressed.jsをロードしているだけの、簡単なサンプルページを作成した。

HTMLファイル - test.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Firebug Lite Test</title>
<script type="text/javascript" src="./firebug-lite-compressed.js"></script>
</head>

<body>

<h1>Firebug Lite Test</h1>

<p id="lead">
    テスト
</p>

</body>

</html>

これをIE、Safari、Operaの各Webブラウザでブラウズする。

IEでブラウズ

Safariでブラウズ

Operaでブラウズ

Firebug Lite領域のサイズを変更することができない以外は、FirebugとUIはほとんど同じだ。またFirebugではこのままHTML内の属性や値の書きかえができるが、Firebug Liteでは閲覧だけのようだ。