获取 Ruby Opal 代码中的错误行
Get the error line in a Ruby Opal code
class Test
def initialize
end
def crash
print x
end
end
Test.new.crash
显然这个片段会在第 8 行崩溃。如果你用 Opal 解析它,你会得到这个编译代码:
/* Generated by Opal 0.8.0.beta1 */
(function(Opal) {
Opal.dynamic_require_severity = "error";
var self = Opal.top, $scope = Opal, nil = Opal.nil, $breaker = Opal.breaker, $slice = Opal.slice, $klass = Opal.klass;
Opal.add_stubs(['$print', '$x', '$crash', '$new']);
(function($base, $super) {
function $Test(){};
var self = $Test = $klass($base, $super, 'Test', $Test);
var def = self.$$proto, $scope = self.$$scope;
def.$initialize = function() {
var self = this;
return nil;
};
return (def.$crash = function() {
var self = this;
return self.$print(self.$x());
}, nil) && 'crash';
})(self, null);
return $scope.get('Test').$new().$crash();
})(Opal);
当然会抛出同样的错误。
但是,有没有办法确定这个错误来自Ruby行?
我可以看到这个问题:Is there a way to show the Ruby line numbers in javascript generated by Opal, but I don't understand the answer: it leads me to https://github.com/opal/opal/tree/0-6-stable/examples/rack 我不确定我应该看什么或做什么。
当我 运行 我的 javascript 时,我有一个 index.html
文件加载 opal.min.js
和 opal-parser.min.js
,最后我有我的编译 Ruby-Javascript 代码在 <script>
标签中。
Opal 有 source map support, to facilitate this kind of source level of debugging. I will not go into details about sourcemaps, but HTML5Rocks has a great article 深入介绍了该主题。
这是使用 Opal 进行设置的最小样板文件:
让index.rb
成为我们的源文件:
class Test
def initialize
end
def crash
print x
end
end
Test.new.crash
既然您不想使用很多无关的实用程序,那么让我们直接使用 Opal API。创建一个文件 builder.rb
来编译上面的文件:
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
文件,仅包含:
require 'opal'
最后创建一个 index.html
允许我们在浏览器中 运行 脚本。
<!DOCTYPE html>
<html>
<head>
<script src="opal_lib.js"></script>
<script src="build.js"></script>
</head>
<body>
</body>
</html>
现在实际编译您的文件,运行:
ruby builder.rb
这将生成已编译的 javascript 文件 opal_lib.js
和 build.js
,它们被我们的 index.html
文件引用。现在只需在浏览器中打开 index.html
。您将获得完整的调用堆栈和源代码视图:
源文件行号可用:
作为使用浏览器的替代方法,您也可以使用 Node.js 来达到同样的目的。这需要您安装 Node.js
和 npm
。您还需要安装 npm 模块 source-map-support
npm install source-map-support
现在可以打开节点repl,输入以下内容:
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 以获得 gem 法力gement。这是获取 Opal Master 的 Gemfile
:
source 'http://production.cf.rubygems.org'
gem 'opal', github: 'opal/opal'
要编译你必须 运行:
bundle install
bundle exec ruby builder.rb
其他人提到的 Sprockets 集成/机架集成在下面使用相同的 API,抽象出管道。
更新:
由于我们在堆栈中有正确的行号,因此以编程方式解析堆栈并将此行号提取到变量中是公平的:
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
当然你也可以做到 ruby(但如果你在浏览器中 运行 这样做,你还必须在此处包括 source-map-support):
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
class Test
def initialize
end
def crash
print x
end
end
Test.new.crash
显然这个片段会在第 8 行崩溃。如果你用 Opal 解析它,你会得到这个编译代码:
/* Generated by Opal 0.8.0.beta1 */
(function(Opal) {
Opal.dynamic_require_severity = "error";
var self = Opal.top, $scope = Opal, nil = Opal.nil, $breaker = Opal.breaker, $slice = Opal.slice, $klass = Opal.klass;
Opal.add_stubs(['$print', '$x', '$crash', '$new']);
(function($base, $super) {
function $Test(){};
var self = $Test = $klass($base, $super, 'Test', $Test);
var def = self.$$proto, $scope = self.$$scope;
def.$initialize = function() {
var self = this;
return nil;
};
return (def.$crash = function() {
var self = this;
return self.$print(self.$x());
}, nil) && 'crash';
})(self, null);
return $scope.get('Test').$new().$crash();
})(Opal);
当然会抛出同样的错误。
但是,有没有办法确定这个错误来自Ruby行?
我可以看到这个问题:Is there a way to show the Ruby line numbers in javascript generated by Opal, but I don't understand the answer: it leads me to https://github.com/opal/opal/tree/0-6-stable/examples/rack 我不确定我应该看什么或做什么。
当我 运行 我的 javascript 时,我有一个 index.html
文件加载 opal.min.js
和 opal-parser.min.js
,最后我有我的编译 Ruby-Javascript 代码在 <script>
标签中。
Opal 有 source map support, to facilitate this kind of source level of debugging. I will not go into details about sourcemaps, but HTML5Rocks has a great article 深入介绍了该主题。
这是使用 Opal 进行设置的最小样板文件:
让index.rb
成为我们的源文件:
class Test
def initialize
end
def crash
print x
end
end
Test.new.crash
既然您不想使用很多无关的实用程序,那么让我们直接使用 Opal API。创建一个文件 builder.rb
来编译上面的文件:
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
文件,仅包含:
require 'opal'
最后创建一个 index.html
允许我们在浏览器中 运行 脚本。
<!DOCTYPE html>
<html>
<head>
<script src="opal_lib.js"></script>
<script src="build.js"></script>
</head>
<body>
</body>
</html>
现在实际编译您的文件,运行:
ruby builder.rb
这将生成已编译的 javascript 文件 opal_lib.js
和 build.js
,它们被我们的 index.html
文件引用。现在只需在浏览器中打开 index.html
。您将获得完整的调用堆栈和源代码视图:
源文件行号可用:
作为使用浏览器的替代方法,您也可以使用 Node.js 来达到同样的目的。这需要您安装 Node.js
和 npm
。您还需要安装 npm 模块 source-map-support
npm install source-map-support
现在可以打开节点repl,输入以下内容:
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 以获得 gem 法力gement。这是获取 Opal Master 的 Gemfile
:
source 'http://production.cf.rubygems.org'
gem 'opal', github: 'opal/opal'
要编译你必须 运行:
bundle install
bundle exec ruby builder.rb
其他人提到的 Sprockets 集成/机架集成在下面使用相同的 API,抽象出管道。
更新:
由于我们在堆栈中有正确的行号,因此以编程方式解析堆栈并将此行号提取到变量中是公平的:
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
当然你也可以做到 ruby(但如果你在浏览器中 运行 这样做,你还必须在此处包括 source-map-support):
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