Debugging Javascript in Capybara feature specs can be challenging (to say the least), because AFAIK you can’t drop ‘debugger’ into your javascript and run the code and be debugging in Chrome.
However, I learned today you can do a little fancy footwork to be able to look at results from console.log inside of a capybara debugging session. (These tips are for debugging, you wouldn’t actually leave this stuff in your code.)
This only work if you are spec using capybara-webkit (remember :js => true must be set on your feature spec). See capybara-webkit docs for information about setting that up.
You’ll want to write some log output in your Javascript at the point where you want to examine some stuff:
Goes in your Javascript:
Then, in your feature spec, you’ll put a Ruby debugger after where that javascript has run. In my case I use byebug, but other Ruby debuggers will work fine too (like pry)
Goes in your integration spec, after where the Javascript console log output was executed:
When you drop into the debugger, you can use page.driver.console_messages to see the messages. (In the example below, I’ve used pp which stands for “pretty print” to make it more readable)