JavaScript エラーを解消する

JavaScript エラーを解消する

Posted at November 10,2005 11:50 PM
Tag:[JavaScript]

JavaScriptエラーWindows IE6.0 でページを表示した時、ステータスバー左下に画像のような黄色いアイコンと「ページでエラーが発生しました」という情報が表示されることがあります。これがいわゆる「JavaScript エラー」で JavaScript の実装に問題があることを示しています。
エラーが発生するのは体裁の良いものではなく、場合によってはページが正常に表示されない場合もありますので、できれば解消したいところです。

ということで、JavaScript エラーの解消方法をご紹介します。ただしエラーを解消するには JavaScript の修正を伴うケースが少なくないため、プログラミングが苦手な方については原因発見までとなります(後はスクリプト配布元に問い合わせましょう)。

2013/7/31追記:最新ブラウザを使った「JavaScriptエラーを表示・確認する方法のまとめ」をエントリーしました。

1.エラー詳細の表示

IEのJavaScriptエラー詳細IEの場合、JavaScript エラーが発生している状態でステータスバーに表示されている部分をダブルクリックすると左のようなダイアログが開き、そこにJavaScript エラーの詳細が表示されます(表示されていない場合は[詳細の表示]をクリックします)。
Firefox であれば [ツール]-[JavaScript コンソール] を選択します。Netscape7.1 は[ツール]-[Web開発]-[JacaScriptコンソール]です。Opera8 は[ツール]-[詳細ツール]-[JavaScriptコンソール]です。
以下、利用者が多く、エラーの確認が一番分かりやすい(と思われる) Firefox によるエラー原因の確認方法を説明します。

2.エラー原因の確認

FirefoxのJavaScriptエラー詳細Firefox で[ツール]-[エラーコンソール]を選択すると画像のようなダイアログが開き、現在のページで発生している JavaScript エラーが表示されます。何も表示されなければそのページに問題はありません(ただし4項に例外を記しています)。
この時、エラーコンソール左上のメニューが[すべて] または [エラー]が選択されている状態にしてください。[警告]や[メッセージ]ではエラーが表示されません。また エラーコンソールを開くと、それまでのページ表示で発生したエラーがすべて表示される可能性があります。この場合はコンソール右側にある[クリア] をクリックして情報を一旦クリアし、ページをリロードすれば現在のページのエラーだけが表示されます。

サンプルでは「func is not defined」というエラーが表示されています。これは 「func というスクリプトを起動しようとしているが、func 自体がみつからない」ということを示すエラーです。このようなエラーが発生した場合は、func というスクリプトが記述されている外部ファイルが正常に読み込まれていないか、あるいは起動元のスクリプト(関数)名が誤っていないか等を確認しましょう。

FirefoxのJavaScriptエラー詳細 また左の「element has no properties」というエラーは、「スクリプトは存在するが処理が誤っている」というエラーです。エラー画面のURL部分をクリックするとエラーとなっているファイルを表示し、エラー発生箇所を反転表示してくれます(下はその抜粋です)。

FirefoxのJavaScriptエラー詳細

具体的には、hogehoge という ID属性のスタイルを非表示にしようとしているのですが、hogehoge という ID属性自体が存在しないため、element という変数には何も設定されません。で、次の行で何も設定されていない変数(=スタイル)のプロパティを制御しようとしているためエラーになります。
この場合はスクリプトに hogehoge という ID属性がページに存在しないケースを考慮する if 文を追加して

function func() {
    element = document.getElementById("hogehoge");
    if (element) {
        element.style.display = 'none';
    }
}

とします。スクリプト修正後、コンソール右側にある[クリア] をクリックして情報を一旦クリアしてからブラウザを更新すればエラーは解消します。

3.外部ファイルが存在しない場合のエラーを発見する

下記リストのように JavaScript を外部ファイルとして読み込む場合があります。

<script type="text/javascript" src="http://www.koikikukan.com/menufolder.js"></script>

この menufolder.js 自体が存在しない場合、外部ファイルに書かれたスクリプトを起動する箇所で JavaScript エラーが発生し、結果的に外部ファイルが正常に読み込まれていないことが分かります。が、外部ファイルを単に読み込むだけで、ファイルに書かれたスクリプトをページで一切使用していない場合、Firefox のコンソールでは正常に読み込まれているかどうかまではチェックできません。

NetscapeのJavaScriptエラー詳細そもそも script タグ自体が冗長なのですが、Netscape7.1 の[ツール]-[Web開発]-[JavaScriptコンソール]を利用すれば、外部ファイルを引き込めない部分でエラーを発見することが可能です。Netscape では左図のように「syntax error」として表示され、リンクをクリックするとファイルが存在しない旨のHTMLソースが表示されます(IE/Firefox/Opera ではエラーは表示されませんでした)。

Netscape であれば2項のエラー解析も Firefox と同様の操作が可能なので、JavaScript エラー解消には Netscape7.1 をお勧めします。

2007.02.02 追記
Firefox の記述を Firefox 2 用に修正しました。

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

Amazonアフェリエイト 商品プレビューのエラー from Mistgrass Weblog
 Amazonのアフェリエイトで「商品プレビュー」という機能があります。Amaz... [続きを読む]

Tracked on July 9, 2007 12:14 PM
コメント

yujiroさん
いつもど素人の質問ですみません。
JavaScriptがよくわかっていないので申し訳ありませんが、時間があればご教示ください。
最近、多分TinyMCE MT3.3用を入れてからと思いますが、IE(6でも7でも)で/cgi/mt/mt.cgi の画面(login したすぐ後)で、リンクされていない部分にカーソルを当てるとJavaScriptエラーがでます。内容は構文エラーです。Netscapeでは特段のエラーは表示されませんが、Netscape7.1 の[ツール]-[Web開発]-[JavaScriptコンソール]には以下の表示がでます。表示されているディレクトリーは、TinyMCE プラグインには存在しません。他のディレクトリーに該当ファイルはあります。lolipopとは別のエラーなんでしょうか。エントリー編集には支障がないので無視していますが、お手空きの時にこれはどう解釈したらいいのかご教示いただければありがたいです。JavaScriptコンソール

[1] Posted by n_shuhei : October 26, 2006 6:03 PM

>n_shuheiさん
こんにちは。
ご質問の件につきまして、原因は不明ですが、エラーが発生する詳細は下記の通りです。

マウスでリンクされていない部分にカーソルをあてた時、そのリンクから、JavaScript コンソールの2つめ表示されている URL の editot_plugin.js を読み込もうとしますが、(指定されたディレクトリにファイルが存在しないため)404エラーになります。
が、ブラウザはこの404エラーのHTMLファイルを JavaScript ファイルとして処理してしまうため、「1行目の html タグは syntax error ですよ」というエラーを表示する、という訳です。
1つめのエラーも、404エラーのHTMLファイルをCSSとして読み込もうとしているために発生しているエラーのようです。

マニュアル通りにインストールされているのであれば配布元で確認された方がいいかもしれません。
なお、私も試しにプラグインをインストールしましたが(Windowsですが)同様の事象は発生しませんでした。また(見落としていなければ)旧バージョンも imagemanager というディレクトリは存在しないようです。
それではよろしくお願い致します。

[2] Posted by yujiro : October 27, 2006 10:26 AM

>yujiroさん
お忙しいのに早速の回答ありがとうございます。
TinyMCEの配布元に問い合わせて見ることにします。

[3] Posted by n_shuhei : October 27, 2006 11:46 AM

>n_shuheiさん
どういたしまして。
ではでは!

[4] Posted by yujiro : October 28, 2006 1:24 AM

>yujiroさん
配布元への問い合わせには、mixiメンバーに登録しなければならないことやフォーラムとコミュニティと間違えていたため質問を見てもらうのが遅くなりました。以下のような回答がすぐにあり、その通り実行しますとエラーがでなくなりました。
IEを使っている人は多いと思いますが。
ご参考までに、配布元のDakinyさんからの回答を引用します。

> n_shuheiさん 
 
http://・・・・・・/cgi/mt/mt-static/TinyMCEforMT/js/tiny_mce/plugins/imagemanager/editor_plugin.js  
と言うのはTinyMCEと連動するMCImageManegerを使用する時の設定です。 
MCImageManegerをご利用でない場合、imagemaneger呼び出しをしない設定にして使って見て下さい。 
具体的には 
/plugin/TinyMCEforMT/TinyMCEforMT110.pl 
の163行目の末尾から 
,imagemanager 
を取り除いて見て下さい。 
過去、開発及びテスト環境ではそれらの症状は出ていませんので、IE7のインストールにより、JavaScriptの動作環境が変更になったからかも知れません。 
 
または、Firefoxでは上記の現象が起こりませんので、動作環境を保証しているFF1.5かFF2.0をご利用ください。 
※Netscape7.1は動作対象外です。 
※IE7.0は動作はしますが、詳しく動作調査しておりません。 
 
なお、作業が伴う場合はご自分の責任でお願いします。 
以上、よろしくお願いします。 
[5] Posted by n_shuhei : October 30, 2006 5:58 PM

>n_shuheiさん
こんばんは。
ご連絡ありがとうございました。
また貴重な情報、ありがとうございます!

[6] Posted by yujiro : October 31, 2006 12:09 AM

初めましてyujiroさん
どうしてもjavascriptのことでわからないことがあるのでよろしければ
ご指南ください。
エラーでjavascript:function%20voiと表示されるのですがこれは
どのような時におこりうることなのでしょうか?
そのページは注意書きにjavascriptをオンにしなければ閲覧ができない
ページで、動作環境にも制限があるページなんですが調べてみたところ
一応それには該当していないようです。
荒唐無稽な質問で恐縮ですが、お心当たりがあればどうかご教授お願いします。

[7] Posted by RISA : July 5, 2007 10:59 PM

>RISAさん
こんばんは。
すいませんがご質問の内容だけでは判断しかねますので、差し支えなければそのサイトのURLをお知らせ頂けますでしょうか。
それではよろしくお願い致します。

[8] Posted by yujiro : July 7, 2007 2:50 AM

情報不足で申し訳ありませんでした。
主に文章の創作等をなさっているサイトさんなのですが
URLは下記になります

http://rainxdrop.hp.infoseek.co.jp/works.html

大変お手数ですがどうぞよろしくお願い致します

[9] Posted by RISA : July 7, 2007 11:49 AM

>RISAさん
こんばんは。
分かりました。
「javascript:function%20voi」はエラーではなく、aタグのhref属性にそのように記述されているのがステータスバーに表示されているだけです。
回答になっていなければすいませんが、とりあえずご連絡まで。

[10] Posted by yujiro : July 10, 2007 2:24 AM

ご丁寧な回答どうもありがとうございました。
しかし再度閲覧を試みてはみたのですが、やはり
「実行しましたがエラーが表示されました」→「javascript:function%20voi」
という流れになるのでやはり文章の閲覧は無理でした
以前はその様になることはなく普通に見ることもできていたので
どうやらそのサイトさんのところに何らかの不具合があるのかなと。
今後はそちらと連絡を取り合って解消に努めていくつもりです。
yujiroさん、本当にどうもありがとうございました。

[11] Posted by RISA : July 10, 2007 6:46 PM

>RISAさん
こんにちは。
現在は閲覧できるみたいですよ。
ではでは!

[12] Posted by yujiro : July 11, 2007 3:46 PM

html のカレンダーを作成するプログラムをJavaScriptで作成してある
ものを、Google Chrome で開くと、正常に動くのですが、
Tnternet Explorer で機動するとエラーになります。
対処の方法を教えていただけないでしょうか。

[13] Posted by 深沢 : May 21, 2011 9:29 PM

>深沢さん
こんにちは。
ご質問の件ですが、不具合が発生しているURLをご連絡願えますでしょうか。
それではよろしくお願い致します。

[14] Posted by yujiro logo : May 23, 2011 10:08 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)