1

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.

Bernhard
  • 686
  • 8
  • 20
  • Have you tried with source maps? – Elia Schito Jun 15 '14 at 19:32
  • I tried to but was not able to make it work either. I am still searching for a kind of cookbook how to make that work. – Bernhard Jun 23 '14 at 15:37
  • I see them working in Rails with Chrome but not with Safari (not sure about Firefox). What's your setup? – Elia Schito Jul 05 '14 at 15:37
  • I am using primarily chrome. desc "Build our app to build.js" task :build do env = Opal::Environment.new env.append_path "." File.open("build.js", "w+") do |out| out << env["application"].to_s end end – Bernhard Jul 06 '14 at 16:43
  • I am using primarily chrome. I generate the JS file with a statement like this: `env = Opal::Environment.new; out << env["application"].to_s`. Where application.rb requires all other rb files. I hope there is an optin for Opal::Environment to be set, but I cannot find it. I tried source_map = true on Opal::Server with out success – Bernhard Jul 06 '14 at 16:49
  • I have an application.rb which does a require to the other Ruby sources. Statements in application.RB appear in the source map while the content of the reqired files do not. – Bernhard Aug 01 '14 at 06:39

1 Answers1

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' %>
…
Elia Schito
  • 989
  • 7
  • 18
  • Thanks for the hint. I tried it, but I could not see anything from the sourcemap nor a ruby file in the developer tools neither in Chrome no in Firefox. – Bernhard Jul 12 '14 at 22:43
  • Each JS file has its sourcemap which URL you can find at the end of the compiled file in the form of a special comment. Do you see the special comment? – Elia Schito Aug 03 '14 at 16:07
  • this is, what I see there: `//# sourceMappingURL=/__opal_source_maps__/application.js.map ; `. But I cannot see a file `application.js.map` in `__opal_source_maps__` I even see lots of comments like that in the `application.js` before each class definition. But `__opal_source_maps__` only contains one file `application` which in fact is the same content as application.rb – Bernhard Aug 03 '14 at 21:41
  • when I enter this url, e.g. `http://localhost:9292/__opal_source_maps__/controller.js.map` in the browser adress line, then I can see a lot of cryptic stuff like a source map. Therefore, the opal server seems to deliver the source maps, but I have no clue how to use them in chrome. I expected to see the ruby source there and to be able to set breakpoints. – Bernhard Aug 03 '14 at 21:51
  • **Ok, could it be that you have debug mode turned off in the asset pipeline?** _Current sourcemaps implementation doesn't work with concatenated assets (that's also due to the fact that the asset pipeline doesn't support sourcemaps natively)._ – Elia Schito Aug 04 '14 at 00:16
  • Surly this could be. I have added a line to config.ru (intial questions shows my current config.ru): `s.debug=true`(I saw this in https://github.com/opal/opal-rspec). But it has no effect, everything is as it was before. – Bernhard Aug 04 '14 at 07:52
  • Can you share the project or part of it with me so that I can try locally? (I'm `elia` on GitHub and `_elia` on BitBucket.) _In alternative, does the rack example behaves correctly?_ – Elia Schito Aug 04 '14 at 10:28
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/58604/discussion-between-bernhard-and-elia-schito). – Bernhard Aug 04 '14 at 10:46
  • In particular <%= javascript_include_tag 'application' %> ensures, that javascript is not concatenated but provided as individual assets Great answer. – Bernhard Aug 04 '14 at 13:41