web-dev-qa-db-ja.com

Google Chromeを使用して、HTMLページに埋め込まれたJavaScriptをデバッグおよび編集します。

Chrome開発者ツールを使用すると、JavaScriptが.jsファイルにある場合、ブラウザーでJavaScriptを編集できます。ただし、HTMLページに埋め込まれているJavaScriptを編集することはできません。すなわち：

<script type="text/javascript> 
// code here that I want to debug/edit
</script>

特定のページにかなりの量のJavaScriptが埋め込まれているため、これは私にとって大きな問題です。

この質問と同様： WebページのJavaScriptブロックを編集... live しかし、これはchromeではなくfirefoxについてです。

Googleを使用してHTMLページに埋め込まれたJavaScriptを編集するにはどうすればよいですかChrome Developer Tools？

javascriptdebugginggoogle-chrome
56
Mark Robinson

実際にchromeはそれを可能にし、開発者ツールウィンドウのソースタブでHTMLファイルを選択します。JavaScriptの代わりにHTMLが表示され、_<script>_タグまた、デバッグするものをスクリプト化する_debugger;_コマンドを追加することもできます。

_<script>
 // some code
 debugger; // This is your breakpoint
 // other code you will able to debugg
</script>
_

ウェブサイトをリリースしたいときは_debugger;_を削除することを忘れないでください。

29
antyrat

インライン/埋め込みJavaScriptを含むファイルを見つけるのに苦労しました。同じ問題を抱えている他の人にとって、これは役に立つかもしれませんし、そうでないかもしれません...

Windowsの場合はChrome 21.0.1180.89 mを使用します

enter image description here

非常に慎重に配置されたボタンをクリックすると、すべてのファイルが表示されます。見る：

enter image description here

これでデバッグを開始できます...

enter image description here

30
Theo

これらの答えはどれも私にとってはうまくいきませんでした。

私に役立つのは、ページにすでにJavaScriptがロードされている場合、そのjavascriptをコピーして編集し、コンソールに貼り付けると、関数または再定義が必要なものが再定義されます。

たとえば、ページに次のものがある場合：

<script>
var foo = function() { console.log("Hi"); }
</script>

スクリプト間でコンテンツを取得して編集し、次のようにデバッガーに入力できます。

foo = function() { console.log("DO SOMETHING DIFFERENT"); }

そしてそれは私のために働くでしょう。

またはあなたが好きなら

function foo() {
    doAThing();
}

ただ入ることができます

function foo() {
    doSomethingElse();
}

そしてfooは再定義されます。

おそらく最善の回避策ではありませんが、動作します。

18
byronaltice

[要素]タブに移動してスクリプトを見つけ、必要な部分を右クリックして[HTMLとして編集]を選択します。

[HTMLとして編集]が表示されない場合は、ノードをダブルクリックすると、強調表示され編集可能になります。

1
brimble2010