「JavaScript」タグアーカイブ

jQueryエラー:js/jquery.min.map 404 (Not Found)

読み込んだ覚えも無いのにcromeでデバッグすると次のエラーメッセージが表示されていました。原因を調べていて解決したのでメモっておきます。

js/jquery.min.map 404 (Not Found) 

 

1つ目の対策

こんなソースを読み込んだ覚えも無かったので調べていたところ

/assets/js/jquery.jsの中に以下のコードを見つけました。

/*! jQuery v1.9.1 | (c) 2005, 2012 jQuery Foundation, Inc. | jquery.org/license
//@ sourceMappingURL=jquery.min.map
*/

原因はこれなので削除します。

/*! jQuery v1.10.2 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license
*/

こうする事によりJavaScriptのエラーは消えます。

jQueryに手を入れる必要があるのに少し抵抗がある人は2つ目の対策を試してみてください。

 

2つ目の対策

jquery.jsの変更をしたくない場合には、jquery.min.mapをjquery.jsと同じフォルダに置いてあげるとOKです。

 

 

Google Crome を使ってJavaScriptをデバッグするには?

Google Cromeに標準で備わっているJavaScriptデバッガーを使う時の

効率的なショートかっととかのまとめです。

 

一応、Google Cromeの中にある以下のボタンを押す事によりステップオーバー等を行うことも可能ですが、ショートカットコマンドを使った方が効率が良いです。

crome_js

以下にも記していますが、F10のステップオーバーを行う場合には次のアーチ状のアイコンをクリックします。

ステップオーバーするには?

F10を押します。これはVisual Studioと同じデバッグコードです。

crome_f10

 

では、実際によく使うショートカットコマンドを紹介します。

 

ステップオーバーする

F10

ステップインする

F11

JavaScriptのデバッグ実行を有効・無効設定を行う

残念ながらこのショートカットコマンドは、Cromeに用意されていないので以下のアイコンを直接クリックして有効・無効を切り替えます。

crome_stop

 

 

実行中のスコープ内の全変数の値を確認する

Cromeのデバッガを起動すると Scope Variables という部分が表示されるのでそれをクリックします。すると現在デバッグ中のファンクションの中に含まれている全変数の値を確認する事が出来ます。いちいち変数名を選択してAdd Watchなどする必要が無く大変便利な機能です。

crome_scope