Is there a way to show the Ruby line numbers in javascript generated by Opal

Question

For debugging purposes I would like to see the corresponding Ruby Source position in the javascript file generated by Opal.

Is there a simple way to achive this? I tried

# config.ru
require 'bundler'
Bundler.require

run Opal::Server.new { |s|

  s.append_path 'public'
  s.append_path 'src'
  s.debug = true
  s.source_map = true

  s.main = 'application'

  s.index_path = 'index_opal.html'
}

this is my application file

require 'math' require 'opal' require 'opal-jquery'

require 'consolelogger'
require 'harpnotes'
require 'abc_to_harpnotes'
require 'opal-raphael'
require 'opal-jspdf'
require 'opal-jszip'
require 'opal-abcjs'
require 'opal-musicaljs'
require 'raphael_engine'
require 'pdf_engine'
require 'controller'
require 'harpnote_player'
require 'text_pane'

puts "now starting zupfnoter"
puts "zupfnoter

I can only see this file in the source maps, but not the ones included by 'require'

I can even set breakpints to the puts statments at the end but nowhere else.

Answer 1

Here's an example on how to setup a rack up that serves source maps correctly

https://github.com/opal/opal/tree/0-6-stable/examples/rack (Opal v0.6.x)

---

UPDATE: The problem seems to be that you're not in debug mode.

Explanation: Current sourcemaps implementation doesn't work with concatenated assets and Sprockets doesn't support sourcemaps natively so it doesn't preserve them during concatenation.

Sprockets debug mode with Opal and Rack

To enable debug mode you need to add debug = true and use an Erb index.html in Opal::Server:

# config.ru

run Opal::Server.new do |s|
  s.append_path 'src'
  s.source_map = true
  s.main = 'application'
  s.index_path = 'index.html.erb'
  s.debug = true
end

then in your index.html.erb you need to use the helper instead of a hardcoded script tag:

<%# index.html.erb %>
…
<%= javascript_include_tag 'application' %>
…