webdevqa.jp.net

Google ChromeでJavaScriptデバッガを起動する方法

Google Chromeを使用しているときに、JavaScriptコードをデバッグしたいです。どうやってやるの?

394
Kevin Driedger

Windows: CTRL - SHIFT - J OR F12

マック:  - - J

レンチメニュー([ツール]> [JavaScriptコンソール])からも使用できます。

JavaScript Console Menu

307
John Sheehan

これをあなたのソースに追加してみてください。

debugger;

すべてのブラウザではありませんが、ほとんどのブラウザで動作します。コードのどこかに配置するだけで、ブレークポイントのように機能します。

385

WindowsとLinux

Ctrl + Shift + I 開発者ツールを開くためのキー

Ctrl + Shift + J 開発者ツールを開いてコンソールにフォーカスを移動する。

Ctrl + Shift + C 要素の検査モードを切り替えます。

マック:

 +  + I 開発者ツールを開くためのキー

 +  + J 開発者ツールを開いてコンソールにフォーカスを移動する。

 +  + C 要素の検査モードを切り替えます。

出典

その他のショートカット

54
user629309

を押す F12 Chromeブラウザのファンクションキーを押してJavaScriptデバッガを起動し、[スクリプト]をクリックします。

一番上のJavaScriptファイルを選択して、JavaScriptコードのデバッガーにブレークポイントを置きます。

14
Balachandar P

Ctrl + Shift + J 開発者ツールを開きます。

11
Senyai

Mac上のChrome 8.0.552では、これをメニューの下に見つけることができます表示/開発者/JavaScriptコンソール ...またはあなたが使用することができます Alt+CMD+J

6
Primc

ここには、開発者ツールにアクセスするためのショートカットがあります。

https://developer.chrome.com/devtools/docs/shortcuts

5
hernanvicente

Shift + Control + I 開発者ツールウィンドウを開きます。左下の2番目の画像から(これは次のようになります)、コンソールを開いたり隠したりします。

Show Console

2
Premanshu

専用の「コンソール」パネルを開くには、次のいずれかを行います。

  • キーボードショートカットを使用する
    • WindowsおよびLinuxの場合 Ctrl + Shift + J
    • Macの場合 Cmd + Option + J
  • Chromeメニューアイコンを選択し、メニュー - >その他のツール - >JavaScriptコンソール Chromeデベロッパーツールが既に開いている場合は、[コンソール]タブをpressname__使用してください。

こちら を参照してください

2
Venkat

Macユーザーの場合は、Google Chrome - >メニュー 表示 - > 開発者 - > JavaScriptコンソール にアクセスします。

Screenshot

1
Neo123

今グーグルクロムは新機能を紹介しています。この機能を使用することであなたはクロムブラウズであなたのコードを編集することができます。 (コード位置の恒久的な変更)

そのためには、F12キー - > [ソース]タブ - (右側) - > [ファイルシステム]を押してください - コードの場所を選択してください。それからクロムブラウザはあなたに許可を求めます、そしてそのコードの後に​​緑色で沈むでしょう。そして、あなたはあなたのコードを修正することができます、そしてそれはあなたのコードの場所にも反映されます(それはそれが永久的に変わることを意味します)

ありがとう

1
stackinfostack

私がJavaScriptデバッガに到達するために見つけた最も効率的な方法はこれを実行することです:

chrome://inspect

0
Nestor Urquiza