Google Chromeで開発者ツールを開くと、プロファイル、タイムライン、監査などのあらゆる種類の機能が表示されますが、jsファイルとhtmlおよびjavascriptコードの両方にブレークポイントを設定できるなどの基本的な機能がありません。それ自体がバグのあるJavaScriptコンソールを使用しようとしました。たとえば、JSエラーが発生すると、ページ全体を更新しない限り、コンソールから抜け出すことができません。誰か助けてもらえますか？
回答:
[ソース]タブを使用すると、JavaScriptでブレークポイントを設定できます。その下のディレクトリツリー（上向き矢印と下向き矢印を含む）で、デバッグするファイルを選択できます。同じタブの右側にある再開を押すと、エラーから抜け出すことができます。
<script> your code </script>ような名前を追加します。<script> your code //# sourceURL=somename.js </script> これは、以下の回答で
<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>注意：debugger開発ツールが開いていない場合、Chromeはsで一時停止しません。
JSファイルと<script>タグにプロパティブレークポイントを設定することもできます。
Sourcesなくタブが呼び出されますScripts。
スクリプトに名前を付けることもできます。
<script>
... (your code here)
//# sourceURL=somename.js
</script>
もちろん、 "somename"を何らかの名前で置き換えます;）すると、それが通常のスクリプトとして "Sources> top>（no domain）> somename.js"のchromeデバッガーに表示され、他のスクリプトと同じようにデバッグできます
スクリプトが含まれているページを更新するには、スクリプトタブで開発者ツールを開きます。これにより、スクリプトを含むページのhtmlを表示する（プログラム）エントリがファイルリストに追加されます。ここから、ブレークポイントを追加できます。
私の状況とそれを修正するために
私がしたこと：次のように、JavaScriptページがHTMLページに含まれています。
ページ名：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デバッガーに入り、[スクリプト]タブをクリックして、上記のようにリストをドロップダウンします。私ははっきりと見ることができますcommon.js /スクリプトをしかし、私はできませ現在のHTMLページを参照test.htmlというので、私は埋め込まれたJavaScriptをデバッグすることができませんでした、ドロップダウンでは：
<script type="text/javascript">
document.write("something");
</script>それは困惑した。ただし、埋め込みスクリプトから廃止されたtype = "text / javascript"を削除すると、次のようになります。
<script>
document.write("something");
</script>..そして、ページをリフレッシュ/リロードしました、出来上がり、それはドロップダウンリストに表示され、すべてが再びうまくいきました。
これがHTMLページに埋め込まれたJavaScriptのデバッグで問題が発生しているすべての人に役立つことを願っています。
typeは必須属性です。HTML5では、これはオプションです。
<div>していると、デバッガーでコードが表示されません
[スクリプト]タブが表示されない場合は、正しい引数でChromeを起動していることを確認してください。引数を指定してサーバーサイドJavaScriptをデバッグするためにChromeを起動したときに、この問題が発生しました--remote-shell-port=9222。引数なしでChromeを起動しても問題ありません。
私はこの問題に遭遇しましたが、私のインライン関数は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]は重要な値はなく、nonはスクリプトIDに相当します。この情報はここにあります：Chrome "[VM]"
Visual Studio（2012）を使用して同じ問題が発生し、IIS Expressに切り替えると問題が解決しました。
scriptタグのtype属性は、それへの要因ではありませんでした。
何らかの理由で、Visual Studio開発サーバーは、Chromeがブレークポイントを有効にするために必要なすべてを提供しません。
Qが問題ではないことはわかってFirefoxいますが、この質問のコピーを追加して自分で回答するだけではありません。
Firefoxではdebugger;、@ matt-ballがscriptタグに対して提案したことを実行できるように追加する必要があります 。
したがって、コードで、debuggerデバッグする行の上に追加してから、ブレークポイントを追加できます。ブラウザーでブレークポイントを設定しただけでは停止しません。
質問がChromeに関するものであるため、Firefoxの回答を追加する場所でない場合。しないでください:(マイナスの答えは、どこに投稿すればよいか教えてください。喜んで投稿を移動します。）
これは、上記のRian Schmitsの回答を拡張したものです。私の場合、JavaScriptコードにHTMLコードが埋め込まれていて、HTMLコード以外は何も表示されませんでした。おそらくChromeデバッグは長年にわたって変化しましたが、[ソース/ソース]タブを右クリックすると、[ ワークスペースにフォルダーを追加 ]が表示されました。プロジェクト全体を追加できたため、すべてのJavaScriptにアクセスできました。詳細については、このリンクを参照してください。これが誰かの役に立つことを願っています。