質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

7053閲覧

動的に読み込んだjavascriptファイルをchromeのデベロッパーツールでデバッグできない

annderber

総合スコア98

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2017/12/22 02:58

編集2017/12/22 04:55

お世話になります。

現在、非同期でhtmlの一部を書き換える処理を作成しています。
その中で、そのソース内にscriptタグが含まれていて動的にjavascriptファイルを読み込む箇所があるのですが、読み込んだスクリプトファイルがchromeのデベロッパーツールのsourceパネルに表示されず、デバッグができません。

動的に読み込んだjavascriptファイルをデベロッパーツールでデバッグできる方法はないでしょうか。

非常に短いですがコード記載いたします。

html

1 2**main.html 3<!DOCTYPE html> 4<html lang="ja"> 5 <body class="nav-sm"> 6 <div id="main_contents"> 7 </div> 8 9 <script type="text/javascript" src="static/vendorsjs/jquery.min.js"></script> 10 <script> 11 $('#main_contents').load("contents.html"); 12 </script> 13 </body> 14</html> 15 16 17 18**contents.html 19<div class=""> 20 <div> 21 <h1>title</h1> 22 <div>contents</div> 23 </div> 24</div> 25<script type="text/javascript" src="js/custom.js"></script>

よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2017/12/22 03:01

かんたんなものでよいのでソースは付けられないのでしょうか?
x_x

2017/12/22 03:15

リロード(F5)してもいつも表示されないのですか?
annderber

2017/12/22 04:56

ソースを記載しました
guest

回答3

0

ベストアンサー

普段は別回答の方法で力技で止めていたのですが、調べてみたらもっと簡単な方法があったので…

動的に読み込まれるコードで、ブレークして欲しい場所にdebugger;と書くだけです。これは開発者ツールがオンの状態だと、この行でブレークするようになります。開発者ツールがオフだと止まらないので、通常利用の際には影響を与えません。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/debugger

投稿2017/12/22 03:22

masaya_ohashi

総合スコア9206

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

annderber

2017/12/22 03:27

コメントありがとうございます。 ああ、なるほど! そういえばそんなのがありました!! 助かりました!
guest

0

動的に読み込んだjavascriptファイルをデベロッパーツールでデバッグできる方法はないでしょうか。

script要素が動的に挿入されたとしても、外部スクリプトは正常に認識されるはずですので、ソース上に何がしかの間違いがあることになります。
判断材料がない事には原因を特定出来ないのですが…。

  • script要素を置けない場所に <script> が記述されている
  • <script> の記述が不正(文法違反)
  • Content-Security-Policy で禁止されている
  • そもそも、script要素が動的に挿入されていない

Re: annderber さん

投稿2017/12/22 03:33

think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

annderber

2017/12/22 03:36

コメントありがとうございます。 すいませんベストアンサー確定後にコメントいただいて。 なるほど、そういう仕様なのかと思っていたのですがそうではないんですね。 いただいた4つの項目確認してみます。 分かり次第またコメントします。
annderber

2017/12/22 04:56

コード確認してみましたが、原因が判明しませんでした。 簡単なサンプルコードを記載しましたので、ご確認いただけますでしょうか よろしくお願いいたします。
guest

0

①. 固定ページのscript内に適当な関数(Aとします)を作ります。名前も中身も適当でいいです。

JavaScript

1function debugCall() { 2 console.log("debugCall"); 3}

②. 動的に追加されるscript(Bとします)内の先頭付近で、Aを呼び出すようにしておきます。

debugCall();

③. chromeの開発者ツールで、Aにブレークポイントを設置します。
④. ブレークポイントで止まったら、ステップ実行してBのコードへ進みます。
⑤. あとはB内にブレークポイントを置くなりなんなりします。

投稿2017/12/22 03:17

編集2017/12/22 03:17
masaya_ohashi

総合スコア9206

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問