オパールはsource map supportを持ち、この種のデバッグのソースレベルを容易にします。ソースマップについて詳しくは触れませんが、HTML5Rocksにはトピックを詳しく網羅したgreat articleがあります。ここで
はオパールでそれを設定するための最低限の決まり文句です：あなたは、むしろ私たちが直接使用させ、余分なutiltiesの多くを使用することはありませんので
class Test
def initialize
end
def crash
print x
end
end
Test.new.crash
：
はindex.rbが私たちのソースファイルとしますOpal API
require 'opal'
最後に私たちは、ブラウザでスクリプトを実行できるようになりますindex.htmlを作成します。
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')
またのみ含むopal_lib.rbファイルを作成します。上記のファイルがコンパイルされたファイルbuilder.rbを作成します。
今
<!DOCTYPE html>
<html>
<head>
<script src="opal_lib.js"></script>
<script src="build.js"></script>
</head>
<body>
</body>
</html>
実際に実行し、ファイルをコンパイルする：
ruby builder.rb
これが私たちのindex.htmlファイルで参照されているJavaScriptファイルopal_lib.jsとbuild.jsをコンパイル生成されます。お使いのブラウザにindex.htmlを開いてください。あなたは完全なコールスタックとソースビューを取得します：
ソースファイルの行番号が用意されています。ブラウザを使用する代わりに
同じ目的でNode.jsを使用することもできます。これには、Node.jsとnpmがインストールされている必要があります。あなたも今、あなたはノードのREPLを開き、次のように入力することができますsource-map-support
npm install source-map-support
NPMモジュールをインストールする必要があります。
require('source-map-support').install();
require('./opal_lib');
require('./build');
あなたは正しいソース行番号とスタックトレースを取得します：
/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)
宝石管理にはbundlerを使用することをおすすめします。他の人が同じAPIの下に使用することを記載している
bundle install
bundle exec ruby builder.rb
スプロケット統合/ラック統合を、配管を抽象化：あなたが実行する必要がありますコンパイルするには
source 'http://production.cf.rubygems.org'
gem 'opal', github: 'opal/opal'
：ここではオパールのマスターを取得するためにGemfileです。
アップデート：私たちは、スタック内の正しい行番号を持っているので
、それはプログラム的にスタックを解析し、変数にこの行番号を抽出するために、かなりある：
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
そして、もちろんルビーもできます（ただし、ブラウザでこれを実行している場合は、ソースマップのサポートもここに含めなければなりません）：
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
答えの著者@ [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-the-ruby-line-numbers-in-javascript-generated-by-opal）が更新を掲載しました。あなたはおそらく見てください...;） – juliobetta
@ juliobettaええ、それは私が読んだものです。私はSprocketsやRackを使っていません。私はそれが何であるかを知らない。 – Voldemort