Google ChromeでJavaScriptデバッガーを起動するにはどうすればよいですか？

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

Windowsの場合：CTRL- SHIFT- JOR F12

Macの場合：⌥- ⌘-J

レンチメニューからも利用できます（[ツール]> [JavaScriptコンソール]）：

これをソースに追加してみてください：

debugger;

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

WindowsおよびLinux：

Ctrl+ Shift+ Iキーで開発者ツールを開く

Ctrl+ Shift+ J開発者ツールを開き、コンソールにフォーカスを移動します。

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

マック：

⌥+ ⌘+ Iキーで開発者ツールを開く

⌥+ ⌘+ J開発者ツールを開き、コンソールにフォーカスを移動します。

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

ソース

その他のショートカット

プレスF12ChromeブラウザでのファンクションキーのJavaScriptデバッガを起動し、「スクリプト」をクリックします。

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

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

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

ここでは、開発者ツールにアクセスするためのショートカットを見つけることができます。

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

Shift+ Control+ I開発者ツールウィンドウを開きます。左下から2番目の画像（次のようなもの）がコンソールを開いたり隠したりします。

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

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

こちらをご参照ください

Macユーザーの場合は、Google Chrome->メニュー[表示] -> [ 開発者] -> [ JavaScriptコンソール ]に移動します。

現在、Google Chromeに新機能が導入されています。この機能を使用することで、Chromeブラウズでコードを編集できます。（コードの場所の永続的な変更）

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

ありがとう

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

chrome://inspect

F12 で開発者パネルが開きます

CTRL + SHIFT + C ホバーと検査ツールが開き、ホバーすると要素が強調表示され、クリックして[要素]タブに表示できます。

CTRL + SHIFT + I コンソールタブで開発者パネルを開きます

右クリック>検査 任意の要素を右クリックし、[検査]をクリックして、[開発]パネルの[要素]タブで要素を選択します。

ESC 要素または同様のものを右クリックして検査し、DOMを見て「要素」タブを表示する場合は、ESCを押してコンソールを上下に切り替えることができます。これは両方を使用するのに便利な方法です。

これらはあなたが見るツールです

を押す F12

Chromeのコンソールから実行できますconsole.log(data_to_be_displayed)。