HTML ファイルを新規作成します。
「openlayersTokyoproj」 を右クリックして 新規 -> HTML ファイル をクリック。
「HTML ファイル」ウィンドウの「ファイル名（任意：openlayers_debug.html）」に入力して「完了」ボタンをクリック。
「charset」を「utf-8」にします。
debug.html をすべて選択し、コピーしたら openlayers_debug.html に貼り付けます。
コードを次のようにします。ちょっと修正と解説。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=uft-8">
<title>OpenLayers47 Debug Example</title>
<!-- style.css ディレクトリを修正-->
<link rel="stylesheet" href="./examples/style.css" type="text/css" />
<!-- OpenLayers ライブラリ ディレクトリを修正-->
<script src="./lib/Firebug/firebug.js"></script>
<script src="./lib/OpenLayers.js"></script>
<script type="text/javascript">
function consoleLog() {
OpenLayers.Console.log("This is the result of an OpenLayers.Console.log() call");
}
function consoleWarn() {
OpenLayers.Console.warn("This is the result of an OpenLayers.Console.warn() call");
}
function consoleError() {
OpenLayers.Console.error("This is the result of an OpenLayers.Console.error() call");
}
function consoleDir() {
OpenLayers.Console.dir(OpenLayers);
}
function consoleDirxml() {
OpenLayers.Console.dirxml(document.getElementsByTagName('body')[0]);
}
</script>
</head>
<body>
<h1 id="title">Debug Example</h1>
<div id="tags"></div>
<p id="shortdesc">
Demonstrate console calls to a Firebug console. Requires Firefox. Mostly for developers.
</p>
<div id="docs">
<p>
To run OpenLayers in debug mode, include the following script
tag <b>before</b> the tag that loads OpenLayers:
<pre> &l<span>t;script src="../lib/Firebug/firebug.js"&g</span>t;&l<span>t;/script&g</span>t;</pre>
The path to firebug.js must be relative to your
html file. With this script included calls to OpenLayers.Console
will be displayed in the Firebug console. For browsers without
the Firebug extension, the script creates a Firebug Lite console.
This console can be opened by hitting <b>F12</b> or <b>Ctrl+Shift+L</b>
(<b>?+Shift+L</b> on a Mac). If you want the Firebug Lite console
to be open when the page loads, add <b>debug="true"</b> to the opening
html tag of your page. Open the console and click on the links below
to see console calls.
</p>
<ul>
<li>
<a href="javascript: void(consoleLog());">OpenLayers.Console.log()</a>
</li>
<li>
<a href="javascript: void(consoleWarn());">OpenLayers.Console.warn()</a>
</li>
<li>
<a href="javascript: void(consoleError());">OpenLayers.Console.error()</a>
</li>
<li>
<a href="javascript: void(consoleDir());">OpenLayers.Console.dir()</a>
</li>
<li>
<a href="javascript: void(consoleDirxml());">OpenLayers.Console.dirxml()</a>
</li>
</ul>
<p>
The Firebug website has a complete list of
<a href="http://www.getfirebug.com/console.html">console calls</a>.
Note that not all are supported with Firebug Lite.
</p>
</div>
</body>
</html>
説明を訳してみました。
Firebug コンソールを呼び出すコンソールのデモ。 Firefox が必要です。主に開発者用です。
デバッグモードで OpenLayers を実行するには、OpenLayersを読み込むタグの前に次のようにスクリプトタグを挿入ます：
<script src="../lib/Firebug/firebug.js"></script>
firebug.js へのパスは、html ファイルへの相対パスです。この挿入されたスクリプトで、Firebugのコンソールに表示される OpenLayers.Console を呼び出します。 Firebug がインストールされていないブラウザでは、スクリプトがFirebug Lite コンソールを作成します。このコンソールは、F12 キーまたは Ctrl + Shift + L（Macでは ？+ Shiftキー+ L）を押すと開くことができます。ページを読み込んだとき Firebug Lite コンソールを開きたい場合は、ページの開始 html タグに debug="true" を追加します。コンソールを開き、下に表示されているコンソール呼び出しリンクをクリックします。
* OpenLayers.Console.log（）
* OpenLayers.Console.warn（）
* OpenLayers.Console.error（）
* OpenLayers.Console.dir（）
* OpenLayers.Console.dirxml（）
Firebugのウェブサイトに、コンソール呼び出しの完全なリストがあります。すべてのFirebug Lite でサポートされていないことに注意してください。
0 件のコメント:
コメントを投稿