Opal ma source map support, aby ułatwić ten rodzaj debugowania źródłowego. Nie będę wdawał się w szczegóły dotyczące sourcemaps, ale HTML5Rocks ma great article, który szczegółowo omawia temat.
Oto minimalne boilerplate ustawić, że się z Opal:
Let index.rb nasz plik źródłowy:
class Test
def initialize
end
def crash
print x
end
end
Test.new.crash
Ponieważ raczej nie używać dużo obcych narzędzia: niech nam korzystać bezpośrednio Opal API. Utwórz plik builder.rb który zostanie skompilowany plik powyżej:
require 'opal'
Opal::Processor.source_map_enabled = true
Opal.append_path "."
builder = Opal::Builder.new.build('index')
# Write the output file containing a referece to sourcemap
# which we generate below : this will help the browser locate the
# sourcemap. Note that we are generating sourcemap for only code and not
# the entire Opal corelib.
#
File.binwrite "build.js", "#{builder.to_s}\n//# sourceMappingURL=build.js.map"
File.binwrite "build.js.map", builder.source_map.to_s
File.binwrite "opal_lib.js", Opal::Builder.build('opal_lib')
tworzyć również plik zawierający tylko opal_lib.rb:
require 'opal'
Wreszcie utworzyć index.html który pozwoli nam uruchomić skrypt w przeglądarce.
<!DOCTYPE html>
<html>
<head>
<script src="opal_lib.js"></script>
<script src="build.js"></script>
</head>
<body>
</body>
</html>
Teraz rzeczywiście skompilować plik, uruchom:
ruby builder.rb
To wygeneruje skompilowane pliki javascript opal_lib.js i build.js które są odniesione przez naszego pliku index.html. Teraz otwórz po prostu index.html w przeglądarce. Dostaniesz pełną rozmowę-stack i źródło widok:
Numery linii z pliku źródłowego są dostępne:
jako alternatywa do korzystania z przeglądarki możesz również użyć Node.js do tego samego celu. Wymaga to zainstalowania Node.js i npm.Potrzebny będzie również do instalowania modułu NPM source-map-support
npm install source-map-support
Teraz można otworzyć repl węzła i wprowadź następujące informacje:
require('source-map-support').install();
require('./opal_lib');
require('./build');
dostaniesz ślad stosu z prawidłowymi numerami linii źródło:
/home/gaurav/Workspace/opal-playground/opal_lib.js:4436
Error.captureStackTrace(err);
^
NoMethodError: undefined method `x' for #<Test:0x102>
at OpalClass.$new (/home/gaurav/Workspace/opal-playground/opal_lib.js:4436:15)
at OpalClass.$exception (/home/gaurav/Workspace/opal-playground/opal_lib.js:4454:31)
at $Test.$raise (/home/gaurav/Workspace/opal-playground/opal_lib.js:4204:31)
at $Test.Opal.defn.TMP_1 (/home/gaurav/Workspace/opal-playground/opal_lib.js:3032:19)
at $Test.method_missing_stub [as $x] (/home/gaurav/Workspace/opal-playground/opal_lib.js:886:35)
at $Test.$crash (/home/gaurav/Workspace/opal-playground/index.rb:8:11)
at /home/gaurav/Workspace/opal-playground/index.rb:13:10
at Object.<anonymous> (/home/gaurav/Workspace/opal-playground/index.rb:13:10)
at Module._compile (module.js:435:26)
at Object.Module._extensions..js (module.js:442:10)
Zaleca się używanie bundler do zarządzania kamieniami. Oto Gemfile do pobierania Opal Master:
source 'http://production.cf.rubygems.org'
gem 'opal', github: 'opal/opal'
Do kompilacji trzeba będzie uruchomić:
bundle install
bundle exec ruby builder.rb
zębatkami integracyjnej/integracja regałowe, które wspominają inni wykorzystanie samo API spodu, abstrahując dala hydrauliką .
Aktualizacja:
Ponieważ mamy odpowiednie numery wierszy w stosie, to jest dość programowo analizować stos i wyodrębnić ten numer linii do zmiennej:
require('./opal_lib');
require('source-map-support').install();
var $e = null;
try {
require('./build');
} catch (e) {
$e = e;
}
var lines = e.split('\n').map(function(line){ return line.match(/^.*\((\S+):(\d+):(\d+)\)/) })
var first_source_line;
for (var i = 0; i < lines.length ; i++) {
var match = lines[i];
if (match == null) continue;
if (match[1].match(/index.rb$/) {
first_source_line = match;
break;
}
}
var line_number;
if (first_source_line) line_number = first_source_line[2] // ==> 8
I oczywiście możesz zrobić to również z rubinem (ale jeśli używasz tego w przeglądarce, będziesz musiał dołączyć tutaj także wsparcie dla map źródłowych):
class Test
def initialize
end
def crash
print x
end
end
line_num = nil
begin
Test.new.crash
rescue => e
if line = e.backtrace.map{|line| line.match(/^.*\((\S+):(\d+):(\d+)\)/) }.compact.find{|match| match[1] =~ /index.rb$/ }
line_num = line[2]
end
end
puts "line_num => #{line_num}" # ==> 8
Autor odpowiedzi @ [http://stackoverflow.com/questions/24218609/is-there-a-way-to-show-the-ruby-line-numbers-in-javascript-generated-by- opal] (http://stackoverflow.com/questions/24218609/is-there-a-way-to-show--ruby-line-numbers-in-javascript-generated-by-opal) zamieścił aktualizację. Powinieneś chyba rzucić okiem ...;) – juliobetta
@juliobetta tak, to właśnie czytam. Nie używam Sprockets, Rack ani żadnego z tych rzeczy. Nawet nie wiem, co to jest. – Voldemort