web-dev-qa-db-ja.com

Google ChromeのインラインJavascriptにブレークポイントを設定する方法は？

Google Chromeで開発者ツールを開くと、プロファイル、タイムライン、監査などのすべての種類の機能が表示されますが、jsファイルとhtmlおよびjavascriptコードの両方にブレークポイントを設定できるなどの基本的な機能がありません！ JavaScriptコンソールを使用しようとしましたが、それ自体バグがあります。たとえば、JSエラーが発生すると、ページ全体を更新しない限り、そこから抜け出すことができません。誰か助けてもらえますか？

javascriptdebugginggoogle-chrome
193
ace

[ソース]タブを使用すると、JavaScriptでブレークポイントを設定できます。その下のディレクトリツリー（上矢印と下矢印）で、デバッグするファイルを選択できます。同じタブの右側で[再開]を押すと、エラーから抜け出すことができます。

115
Rian Schmits

<script>タグ内、またはHTMLタグ属性内のコードについて話しているのですか？

<a href="#" onclick="alert('this is inline JS');return false;">Click</a>

どちらにしても、 debuggerキーワード は次のように機能します：

<a href="#" onclick="debugger; alert('this is inline JS');return false;">Click</a>

N.B。Chromeは、開発ツールが開いていなくてもdebuggersで一時停止しません。

JSファイルと<script>タグにプロパティブレークポイントを設定することもできます。

  1. Sourcesタブをクリックします
  2. Show Navigatorアイコンをクリックして、ファイルを選択します
  3. 左側の余白の行番号をダブルクリックします。対応する行がBreakpointsパネル（4）に追加されます。

enter image description here

196
Matt Ball

スクリプトに名前を付けることもできます。

<script> ... (your code here) //# sourceURL=somename.js </script>

もちろん、「somename」をある名前で置き換えます;）、それは通常のスクリプトとして「Sources> top>（no domain）> somename.js」でchromeデバッガーに表示されます。他のスクリプトのようにデバッグする

42
buildhome.eu

開発者ツールが[スクリプト]タブで開いている間に、スクリプトを含むページを更新します。これにより、ファイルリストに（プログラム）エントリが追加され、スクリプトを含むページのhtmlが表示されます。ここからブレークポイントを追加できます。

39
Gruff Bunny

特にajaxによって返されたhtml内のスクリプトをデバッグするための別の直感的な簡単なトリックは、スクリプト内にconsole.log（ "test"）を一時的に置くことです。

イベントを発生させたら、開発者ツール内のコンソールタブを開きます。 「test」デバッグ出力ステートメントの右側にソースファイルのリンクが表示されます。ソース（VM4xxxなど）をクリックするだけで、ブレークポイントを設定できます。

追伸：さらに、クロムを使用している場合は、@ Matt Ballが提案しているように、「debugger」ステートメントを配置することを検討できます。

16
ken

私の状況とそれを修正するためにしたこと：
次のように、HTMLページにJavaScriptファイルが含まれています。
ページ名：test.html

<!DOCTYPE html>
<html>
    <head>
        <script src="scripts/common.js"></script>
        <title>Test debugging JS in Chrome</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div>
         <script type="text/javascript">
            document.write("something");
         </script>

        </div>
     </body>
</html>

次に、ChromeでJavascriptデバッガーを入力し、[スクリプト]タブをクリックして、上記のようにリストをドロップダウンします。 scripts/common.jsをはっきりと見ることができますが、ではなく現在のhtmlページを見ることができますtest.htmlドロップダウンで、埋め込みjavascriptをデバッグできませんでした：

<script type="text/javascript">
  document.write("something");
</script>

それは困惑していました。ただし、古いスクリプトtype = "text/javascript"を埋め込みスクリプトから削除した場合：

<script>
  document.write("something");
</script>

..そしてページを更新/リロードしました。出来上がり、ドロップダウンリストに表示され、すべてが再び元通りになりました。
これは、htmlページに埋め込まれたjavascriptのデバッグに問題がある人に役立つことを願っています。

10
Aditya Singh

スクリプトの先頭にdebugger;を追加するとうまくいきました。

4
JEKO

私も同じ問題を抱えていました。<script>タグ内のJavaScriptをデバッグする方法です。しかし、その後、「（インデックス）」と呼ばれる「ソース」タブの下に括弧が付いています。行番号をクリックして、ブレークポイントを設定します。

enter image description here

これはChrome 71です。

3
ocarlsen

[スクリプト]タブが表示されない場合は、Chromeを正しい引数で起動していることを確認してください。引数--remote-Shell-port=9222を使用してサーバー側JavaScriptをデバッグするためにChromeを起動したときに、この問題が発生しました。引数なしでChromeを起動しても問題ありません。

2
user473864

この問題に出くわしましたが、私のインライン関数には、angularJSビューがありませんでした。そのため、index.htmlのみがデバッガーの[ソース]タブで使用可能であったため、ロード時にデバッグを追加するためにインラインスクリプトにアクセスできませんでした。

これは、インラインで特定のビューを開いていたとき（これについて選択の余地がなかった）、アクセスできないことを意味していました。

ヒットする唯一の方法は、誤った関数を配置するか、インラインJS関数内で呼び出すことでした。

私のソリューションが含まれています：

function doMyInline(data) {
        //Throw my undefined error here. 
        $("select.Sel").debug();

        //This is the real onclick i was passing to 
        angular.element(document.getElementById(data.id)).scope().doblablabla(data.id);
    }

つまり、ボタンをクリックすると、chromeコンソールでプロンプトが表示されました。

Uncaught TypeError: undefined is not a function

ここで重要なのは、この原因です。VM5658:6これをクリックすると、インラインをステップスルーし、後でブレークポイントを保持することができました。

それに到達するための非常に複雑な方法..しかし、それは機能し、動的にビューをロードするシングルページアプリを扱うときに役立つかもしれません。

VM[n]には重要な値はなく、n onはスクリプトIDと同じです。この情報はここにあります： Chrome "[VM]"

2
Pogrindis

Visual Studio（2012）を使用すると、同じ問題が発生し、IIS Expressに切り替えて問題を解決しました！

scriptタグのtype属性は考慮しませんでした。

何らかの理由で、Visual Studio開発サーバーは、Chromeがブレークポイントを有効にするために必要なすべてを提供しません。

1
escape-llc

QはFirefoxに関するものではないことは知っていますが、自分で答えるためだけにこの質問のコピーを追加したくありませんでした。

Firefoxの場合、scriptタグに対して @ matt-ball が提案することを行うには、debugger;を追加する必要があります。

したがって、コードで、デバッグする行の上にdebuggerを追加してから、ブレークポイントを追加できます。ブラウザにブレークポイントを設定しただけでは停止しません。

これがChromeに関する質問であるため、Firefoxの回答を追加する場所ではない場合。しないでください：（答えを引いた後、投稿する場所を教えてください。投稿を喜んで移動します。）

0
T04435

これは Rian Schmits 'answer 上記の拡張です。私の場合、JavaScriptコードにHTMLコードが埋め込まれており、HTMLコード以外は表示されませんでした。おそらくChromeデバッグは長年にわたって変更されましたが、[ソース/ソース]タブを右クリックすると、ワークスペースにフォルダーを追加します。プロジェクト全体を追加できたので、すべてのJavaScriptにアクセスできました。詳細は このリンクで をご覧ください。これが誰かの助けになることを願っています。

0
Patricia