web-dev-qa-db-ja.com

javascriptコンソールの `binding.pry`？

Rubyでは、コードの任意の場所にbinding.pryと入力できます。その実行時点で、コンソールはREPLになり、すべてのローカル変数にアクセスして変更を加えることができます。任意のコードを実行します。

例：

# foo.rb
require 'pry'
n = 5
binding.pry
puts "your number is #{n}"

私がそれを実行するとき：

$ Ruby foo.rb

From: /Users/cgenco/Desktop/foo.rb @ line 4 :

    1: # foo.rb
    2: require 'pry'
    3: n = 5
 => 4: binding.pry
    5: puts "your  number is #{n}"

[1] pry(main)> n = 100
=> 100
[2] pry(main)> exit
your number is 100

これは、特に複雑なセットアップが必要な状況でのデバッグにおける素晴らしいツールです。コードが必要な場所でbinding.pryと入力し、いじり回して、作成する必要のあるコードを見つけて、洗練されたコードを追加するだけです。実際のソースコードに。

ブラウザコンソールで動作するjavascript用の pry のようなツールはありますか？

javascriptrubyread-eval-print-looppry
25
cgenco

コード内でdebugger;を この回答が示唆する として試してください。 ブラウザ開発ツールが開いている必要があります。

29
Pigueiras

ほとんどのブラウザには、これと非常によく似た開発ツールがあります。

たとえば、Chromeでは Ctrl+Shift+I 開発者ツールパネルを表示します。 [ソース]タブをクリックすると、読み込まれたJavaScriptファイルを参照できます。ここから、左マージンをクリックしてブレークポイントを設定できます。これで、ページをリロードすると、指定した行でJavaScriptの実行が一時停止します。

パネルの下部には「コンソールを表示」ボタンがあり、REPLで遊ぶことができます。

これが私が今述べたすべてを説明するスクリーンショットです：

Screenshot of Chrome developer tools on StackOverflow

Firefox、IE、Safari、Operaにも同様のツールがあります。詳細については、「開発者ツール[選択したブラウザ]」をGoogleで検索してください。

7
Dan Tao

Node.jsにはデバッガーと呼ばれる素晴らしいものがあることを述べておきたいと思います。

超短いチュートリアル：

  1. このようにアプリを実行することです：

node debug appname.js

  1. 通常の代わりに

node appname.js

https://nodejs.org/api/debugger.html デバッガーツールを見つける前に、依存関係を必要とするこれを行う方法がたくさん見つかったので、これを投稿しました。

4
zack999