`binding.pry` for javascript console?

Question

In Ruby, I can type binding.pry anywhere in my code and at that point of execution my console will enter a REPL where I have access to all local variables, can make changes, and execute any arbitrary code.

Example:

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

When I run it:

$ 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

This is an incredible tool in debugging, especially for situations that require a complicated setup: I can just type binding.pry at the spot I need more code, mess around, figure out what code needs to written, then add the polished code to the actual source code.

Is there a tool like pry for javascript that works in a browser console?

score 31 · Answer 1 · edited May 23 '17 at 12:09

31

Try with debugger; in your code as this answer suggests. Your browser developer tools must be open.

edited May 23 '17 at 12:09

Community

1
1

answered Jun 13 '13 at 20:27

Pigueiras

18,778
10
64
87

Ahh perfect! This is precisely what I was looking for - can't believe I didn't already know about it. – cgenco Jun 14 '13 at 18:24
2

Note to future self: add `debugger` at some point in your node script, then run it with `node inspect SCRIPT.js`, then type "cont" and hit enter, then when your script hits the `debugger` line it'll stop. To enter a REPL type "repl" and hit enter. – cgenco Feb 14 '21 at 02:28

score 10 · Accepted Answer · answered Jun 13 '13 at 20:24

Most browsers have developer tools that are quite similar to this.

In Chrome, for example, hit Ctrl+Shift+I to bring up the developer tools panel. Click on the "Sources" tab and you can browse any JavaScript files that have been loaded. From here you can set breakpoints by clicking in the left margin. Now when you reload the page, JavaScript execution will pause at the line you indicated.

At the bottom of the panel there is a "Show console" button that will open up a REPL you can play around with.

Here is a screenshot illustrating everything I just mentioned:

Screenshot of Chrome developer tools on StackOverflow

There are similar tools in Firefox, IE, Safari, and Opera. Just Google for "developer tools [your browser of choice]" to learn more about them.

awesome, thanks a lot, this is the first time I managed to follow through instructions on how to set pry-like console in js, others were just confusing. — Evgenia Karunus, Nov 19 '15 at 01:12

score 4 · Answer 3 · answered May 13 '15 at 19:56

I would like to mention that Node.js has a nice thing called Debugger.

Super short tutorial:

is to run your app like this:

node debug appname.js

instead of the usual

node appname.js

Do yourself a favor see: https://nodejs.org/api/debugger.html I posted this because I found lots of ways to do this that require dependancies before I found the debugger tool!

cgenco · Answer 4 · 2023-01-24T21:32:27.867

1

~9 years after asking this question I stumbled on exactly what I was looking for: pryjs.

Include it with either import pry from "pryjs" or const pry = require("pryjs") then invoke it with eval(pry.it) instead of binding.pry.

It works how you'd expect.

2023 edit: it looks like pryjs hasn't been updated in several years and isn't working.

edited Jan 24 '23 at 21:32

answered Jan 10 '22 at 20:26

cgenco

3,370
2
31
36

`binding.pry` for javascript console?

4 Answers4