JavaScript初心者がブレイクポイントを設定できない理由は？

前へ 次へ
このQ&Aのポイント
  • JavaScript初心者がChrome developer toolsを使ってデバッグを行っている中で、ブレイクポイントが設定できない問題に悩んでいます。
  • 他のHTMLファイルではスクリプトが表示されるのに、現在制作しているファイルだけ表示されない理由は何でしょうか？
  • 問題の原因について、要素の検証のスクリーンショットを添付しています。
回答を見る
  • ベストアンサー

javascript初心者です。

javascript初心者です。 現在、勉強の為に書いているコードを Chrome developer tools を使ってjavascript のデバッグを行っているのですが、 Sourcesからスクリプトが表示されません。。。 なので、ブレイクポイントが設定出来ず、悩んでいます。 制作環境は mac os X エディター：mi ※勉強中という理由により １つのhtmlファイルにスタイル、スクリプトをまとめて書いています。 他のhtmlファイルはSourcesからスクリプトが表示されます。 現在制作しているファイルだけ見れないのはなぜでしょうか？ 要素の検証のスクショを添付します。 よろしくお願い致します。

画像を拡大する

質問者が選んだベストアンサー

  • ベストアンサー
  • b0a0a
  • ベストアンサー率49% (156/313)
回答No.4

>ANo.2補足 原因は知りません しかし自分もしょっちゅう遭遇してるので仕様だと思います あまり気にしなくていいと思います

sui1193
質問者

お礼

b0a0a様 補足の回答ありがとうございます。 経験者の方に気にしなくていいと言われると 心強いです。学習も次に進めるので楽しくなります。 ありがとうございます。

その他の回答 (3)

回答No.3

No1で回答したものです。 添付の画像を確認したところ、ajax通信を行っているようですが、developer toolsのConsoleに、「XMLHttpRequest cannot load file:～. Origin null」のようなエラーは出ていませんでしょうか？ もし出ているのならば、ajax通信時にChromeのセキュリティ制限で、ローカルファイルを読み込めないことが原因と思われます。 参考サイトをご確認頂き、Chromeのショートカットに起動オプションを設定して下さい。 または、ローカル環境にWebサーバを構築することで、回避できるかと思います。

参考URL：
http://www.finefinefine.jp/web/jquery/kiji861/
sui1193
質問者

補足

tetsuo0101様 重ねての回答、誠にありがとうございます。 developer toolsのConsoleに、「XMLHttpRequest cannot load file:～. Origin null」のようなエラーは出ていませんでしょうか？とのことですが、 Consoleには<top frame> ▼ しか表示されていません。 他の方からのご指摘により、埋め込みスクリプトを外部ファイルにしたところ、 Sourcesからスクリプトを確認できました。 しかし、他のファイルは、１つのhtmlファイルにスタイル、スクリプトを まとめて書いても、 Sourcesから、エディターの行数と同じ行数からスクリプトが確認できるので、 なぜ、このファイルだけ見れないんだろう？と、もやもやしています。

  • b0a0a
  • ベストアンサー率49% (156/313)
回答No.2

スクリプトは外部ファイルにして下さい

sui1193
質問者

補足

b0a0a様 回答ありがとうございます。 ご指摘より、埋め込みスクリプトを外部ファイルにしたところ、 Sourcesからスクリプトを確認できました。ありがとうございます。 また、他のファイルは、１つのhtmlファイルにスタイル、スクリプトを まとめて書いても、 Sourcesから、エディターの行数と同じ行数からスクリプトが確認できるので、 なぜ、今回の制作中のファイルだけ見れないんだろう？と、もやもやしています。

回答No.1

htmlのソースを開示できますか？ また、chrome以外のブラウザでは見えますでしょうか？

sui1193
質問者

補足

tetsuo0101様 回答ありがとうございます。 chrome でhtml のソースは開示できます。 メニュー→ツール→ソースを表示 にて確認しました。 chrome 意外のブラウザで確認したところ、 firefoxの　要素の調査　からデバッグページにてソースが確認出来ています。 safariの　要素の詳細を表示　からファイルのDOMツリーとソースコードを確認しています。 chromeのみ ファイルの種類もリンクを張っているjQuery.min.js しか確認できません。 初心者の現状把握なので言葉足らず、また不適切な表現かもしれませんが、 回答頂ければ幸いです。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • javascript初心者です。

    javascript初心者です。 javascript (jQuery) のエラー (デバッグ) について質問です。 サイト制作時、エディター(mi)で書いたコードを ブラウザ(chrome)で確認し、自分の意志と違う表示に なったとき、記述ミスならば、要素の検証のコンソールタグに どこに記述ミスがあるか教えてくれますが、 意図しない表示でコンソールに何も指摘がない場合に 制作者の方はどう原因を突き詰めていますか？ 不躾な質問で申し訳ないです。。。

  • JavaScriptの開発環境について

    JavaScriptを使ったwebページの制作を行いたいのですが、使いやすい開発環境が見つからずこまっております。 現在はデバッグにChromeのデベロッパツールを使用しており、コンソールやデバッグ、コードの整形機能等、を利用していますが、コードの編集が出来なくて不便に思っています。 （ネットで検索するとコードの編集もできると書いてあるので使い方が解ってないだけなのでしょうか？） Webプログラマの方等、実際に使用している開発環境等ありましたら教えて頂きたいです。 よろしくお願いいたします。 参考までに現在の開発環境---------------------------------------------------------- ・MacOS 10.6.8 ・eclipse javaIDEを使用 （整形ができない、コードの補完機能やエラーの検出が出来無いのでJavaScriptの開発には不向き？） ・Chromeのデベロップツール

  • JavaScriptでページが移動しても

    JavaScriptの勉強をはじめたばかりなので、 的外れな質問をしてしまうかもしれないのですが宜しくお願いします。 Google ChromeやFirefoxのdeveloper toolsのコンソールにスクリプトを書いて 実行しています。 JavaScriptでは一つ目のページで実行したスクリプトで 次のページのフォーム操作などは出来ますか？ 注文をする時に、一番初めのページで大きさなどを選んで、submitメソッドを使ってそのページのフォームを送信する事は出来ました。 そしてフォームを送信するとページが変わり、次のページにもまた違うセレクトメニューの項目が出てきて選択項目を選んでフォームを送信する事も出来ました。 １ページずつならコンソール部分にスクリプトを書いて、項目を選択してフォームを送信する事は出来るようになったのですが、 一番初めのページで次のページ分のスクリプトを合体させ、次のページ分の処理も一回の実行でしようとしても次のページ分の処理が出来ません。 ページが移動しても流れが止まらず処理させる事って出来ますか？ その場合どのような物を初めのページと次のページのスクリプトの間に挟めばいいのですか？

  • javascript初心者

    プログラミングの勉強をしようと思い、まずはじめに、javascriptの勉強をしているのですが、 現在のスキルは簡単なカレンダーや電卓、フォームに入力された内容を変数に入れて計算、結果を表示するなど、基本的な事をようやくできるようになったレベルです。 そこでさらにレベルアップしたい！と思っているのですが、そういう人向けの、 勉強サイトを教えてもらえないでしょうか？ javascriptの勉強サイトは検索すればたくさんでてくるのですが、それらのサイトはうえにあげたようなもののサンプルプログラムを解説した、初心者向けのサイトばかりに思えます。 もう一歩進んだ、実用性のある物を学びたいと思っています。 また、勉強サイトでなくても、javascriptで書かれた、かっこいいサイト、便利なプログラム、おもしろいゲームなどのサイト、要するに「javascriptをうまく使えばこういう事もできるのかー！」と思えるようなサイトも教えて欲しいです。 よろしくお願いします。

  • Ajaxのデバッグ方法

    Ajax、Javascriptを勉強中なのですが、webアプリのデバッグに　Google Chrome Deveoper Tools　が非常に役立つと聞きました。 いざ使ってみようと思ったのですが、いまいち使い方がわかりません。 1年くらい前に、だれかのブログで「Google Chrome Deveoper Toolsを使えばjavascriptのコードも自由に書き換えることができる」という記事を見て自分の作ったアプリを公開しても問題ないのか不安を抱えています。 （ソース元は忘れましたが、変数の値ならまだしも、コードそのものを変更可能となると、WEBアプリをクラックさせることもたやすいので、そんなことが可能なのか気になっています。） HTMLやCSSは tool上で書き換えることができ、ローカルに保存できることがわかりましたが、javascriptの変数の値やコードを書き換えて実行させることができません。 Google Chrome Deveoper Tools　で変数の値やコードの書き換えなどはできないのでしょうか？

  • 【JavaScript】いまどき未対応のブラウザなんてありますか？

    JavaScript初心者です。 現在専門書を見て勉強しているのですが、頻繁に「古いブラウザ対策」の記述が出てきます。たとえば、 <script type="text/javascript"><!-- document.write("ようこそ！"); //--> </script> の　<!--　や　//-->　とか、 if (document.images) { などです。 シェア0.5％未満のブラウザは無視してかまわないと考えているのですがこれについてご意見お願いいたします。できれば仕事でWeb制作されている方のご意見が助かります。よろしくお願いいたします。

  • いくつものJavaScriptは使えませんか？

    ひとつのHTMLにいくつかのJavaScriptを入れています。ひとつは</HEAD>のまえに外部ファイルを呼び出す形で <SCRIPT LANGUAGE="javascript"src="script/css.js"> </SCRIPT></HEAD> このような形。 そのほか<BODY>～</BODY>の間に<SCRIPT LANGUAGE="JavaScript">～</SCRIPT>という形で、日付表示とお気に入り登録を入れています。 この二つと外部ファイルの呼び出しは作動するのですが、なぜかリンクをクリックして出させる小窓はぜんぜん表示されません（下記内容です） <script> //Popup Window Script //By JavaScript Kit (http://javascriptkit.com) //JavaScript tutorials and over 400+ free scripts function openpopup(){ var popurl="thankyou.htm" winpops=window.open(popurl,"","width=450,height=450,toolbar,") } </script> <a href="javascript:openpopup()">Click here to open window</a> この内容だけで、HTMLに貼り付けると うまくいのですが・・・・・(^^；

  • javascriptのデバッグについて

    最近phpとjavascriptに手を出しました。 現在xamppでApacheを起動しphpをテキストエディタで書いていましたが phpファイルの中にjavascriptを組み合わせて少し複雑なページを作ってみようと思いました。 しかしjavascriptは全くの初心者でphpファイルの中にjavascriptが混在しているためデバッグをどのように行えばよいのかわかりません。 FireBugを入れてみましたがどうもうまくいかず困りました。 こういった場合どのような開発環境が良いのでしょうか教えてください。 よろしくお願いします。

  • 外部JavaScriptファイルから呼び出したい！

    ページを早く表示させるために、コピー＆ペーストでスクリプトを外部ファイル化しました。 <script language="JavaScript" src="../js/menu.js"></script> ↑とコピペした外部ファイルへリンクさせ、その後、 <script language="JavaScript">mmLoadMenus();</script> と記述してある部分があるのですが、うまく呼びだせてないようでランタイムエラーがでます。 すべてのJavaScriptを1ファイル内に記述しているときはうまく動作しているのですが、外部ファイルに切り離すとエラーが出ます。 外部ファイル化したために、mmLoadMenus();が動作しないので、どなたか分かる方、アドバイスをお願いします！！

  • 途中のjavascriptを後で読み込ませるには？

    こんにちは 現在htmlファイルで <html> : <body> : AAAAAAAAAAAAAA AAAAAAAAAAAAAA <div> <script type="text/javascript"> <script type="text/javascript" src="http://hogehoge.com/hoge.js"></script> <noscript>ブラウザのjavascript機能をONにしてご覧ください</noscript> </div> : BBBBBBBBBBBBBBBB BBBBBBBBBBBBBBBB : </body> </html> のような形のソースを入れているのですが、 これだとjavascriptのソースの読み込みが終わるまで、 次のソースをみることができません。 （実はこのjavascript部分がある動画サーバーからの埋め込みソースで、 　２、３秒くらいかかってしまうのです） １）javascriptを早く読み込む方があれば教えてください。 もしくは ２）ページを表示してからjavascript部分を読むようにするには 　　どうすれば良いのか教えてください。 　　（これだとページのあとからjavascript部分が表示されるので、 　　　ストレスが無いので・・・） ちょっとしたアドバイスでもよいので、宜しくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する