Debugging WebAssembly with modern toolsYouTube↗  IA↗(long shot)
Science & Technology  14.3K views 244 likes 25 dislikes   17 Dec 2020
Chrome for Developers 814K subscribers N/A YouTube↗


Please select the problem
You must specify your email and describe the problem in detail
Describe your problem in detail if it's not obvious

Click to Play Video Click to Play Video
(upbeat music)
（明るい音楽）
- Hello, my name is Ingvar Stepanyan,
こんにちは イングヴァル・ステパンヤンです
and I am a WebAssembly Developer Advocate at Google.
GoogleのWebAssembly デベロッパーアドボケートです
Today we are going to talk about some WebAssembly debugging,
今日は WebAssemblyの デバッグについて説明します
and look at some of the improvements that Emscripten
また この分野で行っている Emscriptenと——
and Chrome DevTools have made in this area
Chrome DevToolsの 改善についてもお話します
for C++ applications.
C++アプリケーション用の改善です
First of all, let's take a look
初めに 基本的なデバッグ操作を——
at the basic debugging experience.
見てみましょう
For this example, let me create a C library
この例では Cライブラリを作成して——
for calculating Fibonacci numbers.
フィボナッチ数を計算します
So I’m defining an export function fib.
その際に エクスポート関数 fibを定義します
It accepts a single parameter,
これは 単一のパラメータを受け取ります
an index that we should want to get, the Fibonacci number.
取得するフィボナッチ数のインデックスです
And the body itself
そして 関数の本体は——
is a fairly straightforward implementation of the algorithm,
かなり単純なアルゴリズムの実装です
where each next number is the sum of the previous two.
次の数値は それぞれ前の2つの合計です
On the HTML side, I'm implementing
HTML側では Emscriptenで——
the JavaScript generated by Emscripten, initializing it,
生成したJavaScriptを実装して 初期化します
and once it's done,
それが完了すると——
I'm calling the expert fib function with some sample index.
サンプルのインデックスを使って エクスポートしたfib関数を呼び出します
Let's say 10.
ここでは 10とします
Now we need to compose this module.
次に このモジュールを 構成する必要があります
So I'm invoking MCC with fibonacci.c, the filename,
まず ファイル名fibonacci.cを 使って emccを呼び出します
and then passing some parameters exchange,
その際に いくつかのパラメータを渡します
which generates an ES module.
これで ESモジュールが生成されます
And I'm building it with optimizations enabled.
ビルドは 最適化を有効にして行います
Now when I to go to Chrome, I can see the result
Chromeに移動すると コンソールに——
in the console as I would expect,
予想通りの結果が表示されます
and I can go to the sources to inspect.
ソースを表示して調べてみましょう
When it do that on the left,
ソースを表示すると 左側には——
I can see the generated JavaScript and WebAssembly files.
生成されたJavaScriptと WebAssemblyファイルが表示されます
And I can set a breakpoint at my entry point.
エントリポイントには ブレークポイントを設定できます
And when I do that it will stop there, and from there,
そうすると その場所で停止し そこから——
I can step into the Emscripten generic JavaScript.
Emscriptenの汎用 JavaScriptにステップインできます
When it's taken again,
もう一度ステップインします
I can jump right away from JavaScript into
すると JavaScriptから——
the generated WebAssembly module.
生成したWebAssemblyモジュールに ジャンプします
Now, what I see here is a raw disassembly view
さて ここに表示されているのは WebAssemblyモジュールの——
of the WebAssembly module.
未加工の逆アセンブリビューです
It looks quite scary,
これはかなり複雑です
but luckily it's not something that most developers
しかし 幸いなことに ほとんどのデベロッパーは——
will need to deal with,
これを扱う必要はありません
as it's the most basic debugging experience
これは最も基本的な デバッグエクスペリエンスであるため——
that you can get without any help from Compiler.
コンパイラの助けなしで実行できます
Still you can see that DevTools
DevToolsが——
has helpfully generated a function name for us.
関数名を生成してくれるので助かります
That is showing up in Call Stack and to the Assembly.
これは コールスタックとアセンブリに 表示され——
It based it on the expert name.
エクスポートした名前に基づいています
So that even when you don't have
そのため デバッグ情報が——
any debugging information attached,
付属していなくても大丈夫です
you still at least get readable stack traces.
少なくとも 読むことができる スタックトレースは取得できます
We can also see the style parameter,
スタックのパラメータも確認できます
you’ve got [inaudible]
[inaudible] var0です
and we can even scroll to the Scope View
スコープビューまでスクロールすると——
and see the value of 10 we passed from the JavaScript site.
JavaScriptサイトから渡した 値10を確認できます
in this view, I can also step up as individual instructions.
このビューでは 個々の命令の ステップオーバーも可能です
I can enter our main loop.
メインループに入ることもできます
I can set a break point
ブレークポイントを設定し——
to say, run a sample a couple of times.
サンプルを数回実行することもできます
And once I do that, I can see how the var0,
これを実行すると var0はデクリメントされます
our counter, gets decremented while var1 and var2
これはカウンタでしょう var1とvar2は——
look like consequent Fibonacci numbers.
生成されたフィボナッチ数のようです
And then I also have var3, which to be honest,
そしてvar3もあります 正直なところ——
just have no idea what it is as it is something
これは何であるかわかりません
not generated by the compiler.
コンパイラによって 生成されたものかもしれません
So while this works and provides at least
この仕組みは機能しており 少なくともいくつかの——
some debugging experience, it's also not a great one
デバッグ操作は可能ですが 優れたものとは言えません
as it takes quite a bit of guesswork to understand
これらすべての命令の意味を 理解するには——
what all these instructions mean
かなりのあて推量が必要です
and what all these variables are
変数についても同様です
and how it matches to our original code.
元のコードのどの部分と 対応しているのかもわかりません
Even on such a tiny example,
これはとても小さな例ですが——
on logic opposites it becomes an even bigger problem.
大きなアプリでは 問題はさらに大きくなります
In fact, let me demonstrate
もう少し複雑な例について——
a slightly more complicated example.
デモンストレーションしてみましょう
In this one I'm going to compile a C++ application
ここでは C++アプリケーションを コンパイルします
for drawing a Mandelbrot fractal.
マンデルブロフラクタルを描画するものです
You can see how this application's still fairly small.
このアプリケーションは かなり小さいことがわかります
It's a single file, contains 50 lines of code,
単一のファイルで 50行のコードが含まれています
but this time I'm also using some external libraries
ただし今回は いくつかの外部ライブラリを 使用しています
like STL for graphics,
グラフィック用のSDLがその例です
as well as complex numbers from the C++ startup library.
また C++標準ライブラリの 複素数も使っています
So I am initializing the STL.
まず SDLを初期化します
And after that, I am generating a plot
その後 いくつかの ランダムな色を使って——
with some random colors.
プロットを行います
I don't care what they are for the purpose of the demo.
デモなので 色は何でも構いません
And then I’m doing a bunch of calculations
次に たくさんの計算を行います
on complex numbers, as per Mandelbrot formulas
マンデルブロの公式による 複素数の計算です
to determine a set of color of each pixel on the screen.
これにより 画面上の各ピクセルの 配色を決定します
Finally, once it's all over,
最後に すべての計算が終わったら——
I'm drawing everything to the canvas.
結果をキャンバスに描画します
Now we're going to compile it very similarly
今回はフィボナッチの例と とてもよく似た方法で——
to the Fibonacci example.
コンパイルします
Except I'm allowing it to use as much memory as it needs
ただし今回は 必要なだけのメモリを 使用できるようにします
and passing some parameters to link it
また いくつかのパラメータを渡して——
with the STL library and generate a default HTML
SDLライブラリとリンクし デフォルトのHTMLを生成します
instead of the custom one.
カスタムのHTMLではありません
Once it's compiled, I can open the results in Chrome
コンパイルしたら Chromeで結果を開くことができ ます
and see our beautiful fractal shape with some random colors.
ランダムな色の美しいフラクタル形状を ご覧ください
Once again, I can open DevTools
もう一度DevToolsを開きます
and see the generating JavaScript
生成したJavaScriptと——
and WebAssembly in the sources panel.
WebAssemblyをソースパネルで 確認しましょう
Except this time when I open the WebAssembly file
ただし今回は WebAssemblyファイルを開いても——
it looks a lot, lot larger and quite incomprehensible.
内容がとても多く 到底理解できません
So I can still search for the main function
しかし main関数を 検索することはできます
and I can recognize some imports,
また いくつかのインポートも認識できます
and I can set a break point inside of the main function and
さらに main関数内に ブレークポイントを設定できます
whether it loads a page, it will get hit.
すると ページをロードするたびに ヒットします
And from there, once again,
そしてここでも——
I can step into the main code, but at this point,
メインコードにステップイン することが可能です
I just have no idea what all those instructions are
ただし この時点では 命令が何であるのかはわかりません
and what all those variables mean
また 変数の意味もわかりません
as it has zero resemblance with my original code.
元のコードとの類似性が ゼロであるためです
What we would want instead is to sample
代わりに行うことができるのは——
part of the original C++ code we wrote,
記述した元のC++コードの一部を サンプルすることです
and are actually familiar with.
これは実際におなじみの方法ですね
And turns out we can do just that.
それができることをお見せしましょう
First of all, we need to go to the main provider
まず 画面のメインプロバイダーに 移動して——
on the screen and installed this Chrome extension.
このChrome拡張機能を インストールします
It's been developed by the Chrome DevTools team
Chrome DevToolsチームが 開発したものです
to support debug information provided by Emscripten.
これは Emscriptenが提供する デバッグ情報をサポートします
Once it is installed, let's compile some module
インストールしたら いくつかのモジュールをコンパイルしましょう
by saving optimizations and enabling debugging
最適化は省略し デバッグを有効にします
by this [inaudible] instead,
[inaudible] このようにします
I'm also adding one extra flag to specify why DevTools
また フラグを１つ追加して DevToolsが——
should be looking for sources.
ソースを探す場所を指定します
In this case, in the one directory from this folder,
今回は このフォルダの 親ディレクトリを指定します
we compile to it.
コンパイル先の親です
Now let me compile it.
では コンパイルしましょう
This time, when I open DevTools,
DevToolsを開いてみます
in addition to the usual JavaScript and WebAssembly,
すると 通常のJavaScriptと WebAssemblyに加えて——
I can see that it locates and finds
表示されるものがあります
my original C++ code as well.
それは 元のC++コードです
I can not only see it,
表示するだけでなく——
but I can also set a break point inside of it.
ブレークポイントを設定することもできます
And when that reloads the page,
ページをリロードすると——
it will stop right there instead of the raw disassembly.
そこで停止します 未加工の逆アセンブリではありません
Moreover, if I look in the scope view,
スコープビューを見てみましょう
then instead of some auto-generated names,
自動生成された名前の代わりに——
I can now see the original C++ variables as well
元のC++変数も表示されています
with their corresponding types.
対応する型も表示されます
When stepping, I'm also no longer stepping through
ステップインするときも ステップ実行するのは——
individual instructions,
個々の命令ではありません
but rather over familiar source level C++ expressions.
おなじみのソースレベルのC++式を ステップ実行できます
For those the only variables that are initialized,
初期化される変数については——
width and height, but let me skip, for example,
つまり 幅や高さなどです
pause (inaudible) generation.
他のすべての生成処理を含め スキップしましょう
Once I do that, I expand up a letter E,
次に パレットを展開します
as well as expands the nested structures
ネストされた構造も展開します
and look at the colors it generated
そして生成された色を確認できます
and verify that they look okay and random enough.
特に問題がなく 十分にランダムであることを確認します
From there I can step over for example,
さらにステップオーバーすることもできます
center initialization,
センターの初期化などにです
and I can observe the real and imaginary parts
複素数の実数部と虚数部も——
of the complex number.
観察できます
- I can also step into the loop and once I'm inside of it,
ループにもステップインできます ループの中に入ると——
I can see the X and Y variables as well.
変数xとy変数も確認できます
So let me step a few more times.
数ステップ進みましょう
I have generated a point,
ポイントを生成しました
I can verify that it’s generate zero zero.
0, 0が生成されていることを 確認できます
Let it run few more times.
さらに数回実行します
The same X is three and the point real part should be non-zero.
同じように xは3で ポイントの実部はゼロ以外のはずです
When I expanded it, yep, I can verify that.
展開すると それを確認することができます
Similarly, I can step through a few more variables
同様に さらにいくつかの変数を ステップスルーできます
and let me just skip to the part where it picks a color.
色を選択する部分までスキップします
At this point, we can get it from the palette.
この時点で パレットから色を取得できます
I stepped through that and now I can expand the color
ステップスルーすると 今度は色を展開できます
and check which RBG values it picked for this pixel.
このピクセルに対して どのRBG値が選択されたかを確認できます
I believe that this provides
これにより——
much more natural debugging experience.
はるかに自然なデバッグ体験が 提供されると確信しています
We source level break point's steps
ソースレベルの ブレークポイントやステップ実行
and value from that is that you can
その値の確認
already use today for your apps.
これらは 皆さんのアプリで すぐに利用できます
One thing that is worth noting is that for larger apps
注目に値することの１つは 大きなアプリの場合です
the debugging information can be much larger
デバッグ情報はWebAssemblyの コードやデータ自体よりも——
than the WebAssembly code and data itself.
はるかに大きくなる可能性があります
It might be desirable to split it out
それを分割するほうが 望ましいかもしれません
so that it doesn't get doubled for non debugging sessions.
そうすれば デバッグセッションを除き サイズが倍になることはなりません
For our Mandelbrot example,
マンデルブロの例で——
we can check the file size of the generic WebAssembly
汎用WebAssemblyの ファイルサイズを確認してみましょう
and see that it's around 670 kilobytes.
約670キロバイトであることがわかります
Now we can recompile it just like a bow
以前のように再コンパイルしてみます
but with one extra option.
ただし １つのオプションを追加します
There's G separate dwarf,
gseparate-dwarfです
which allows us to specify a file name,
ここには ファイル名を指定できます
but Emscripten should split out and put the debug build.
ただし Emscriptenは分割して デバッグビルドを配置する必要があります
When we do that and check the boundary size again,
これを行って境界サイズを もう一度確認すると——
we can see that we go down by 25, almost 30 kilobytes.
25キロバイト ほぼ30キロバイトまで 下がっていることがわかります
This doesn't look like much because we only have
これは ソースファイルが 50行の単一ファイルなので——
a single 50 line source file.
大したことはありません
But as your application grows,
しかし アプリケーションが 大きくなると すぐに深刻になります
situation quickly gets flipped and the debugging information
バイナリによっては デバッグ情報が——
can be actually taking most of the space in some binary.
ほとんどのスペースを 使用しているものもあります
In fact, Google Earth is successfully using
実際の成功例は Google Earthです
the new debugging experience combined with this option
新しいデバッグエクスペリエンスと このオプションと組み合わせました
to debug WebAssembly builds
そして 大規模な C++アプリケーションの——
of their large C++ application on the web.
WebAssemblyビルドを ウェブ上でデバッグしています
You can see how they can all set break points
すべてブレークポイントが どのように設定されているかは——
in the source of the click handler,
クリックハンドラのソースで確認できます
and they can trigger them from the web page,
これらのブレークポイントは ウェブページや——
steps for the C++ expressions,
C++式のステップからトリガーできます
and of some of the variables,
一部の変数からもトリガーできます
just like we did in our trivial demo.
今回のデモでは それをお見せしました
All in all, this has some amazing improvements
まとめると 今回は いくつかのすばらしい改善を行っています
that will unlock even more applications
それによって 多くのアプリケーションの 制限を取り払うことができます
and allow them to bring their experiences
そして そのような アプリケーションを——
to even more users across a shared cross-platform web.
共有クロスプラットフォームウェブ全体の 多くのユーザーに提供できます
Still, it's not the end of the journey.
それでも これは旅の終わりではありません
There are still more features to be at work here.
さらに多くの機能の開発に取り組んでいます
Just to name a few, we'll be adding raw memory inspector
ほんの少しだけ例を挙げましょう rawメモリビュー用の——
for raw memory view, custom formatters for C++ types,
rawメモリインスペクタ C ++タイプのカスタムフォーマッタ
working on improved profiling code coverage support,
コードカバレッジの プロファイリングサポートの改善などです
and many more.
他にもたくさんあります
Thank you for listening and please stay tuned
ご視聴ありがとうございました
for the future updates.
今後のアップデート情報にご期待ください
(upbeat music)
（明るい音楽）
Similar videos:

Next-level web apps on desktop
Chrome for Developers
29.6K views 836 likes 241 dislikes 18 Dec 202059% match

Updating the way we work
Chrome for Developers
16.5K views 200 likes 24 dislikes 16 Dec 202059% match

Connecting hardware devices to the web
Chrome for Developers
11.5K views 445 likes 12 dislikes 21 Dec 202057% match

Upgrading DevTools' architecture to the modern web
Chrome for Developers
10.4K views 338 likes 5 dislikes 23 Dec 202055% match

Superpowers for next gen web apps: Machine learning
Chrome for Developers
65.1K views 1.9K likes 30 dislikes 15 Dec 202055% match

Web development on Chrome OS (Chrome Dev Summit 2019)
Chrome for Developers
17.3K views 455 likes 25 dislikes 25 Nov 201948% match

Predictive prefetching for the Web (Chrome Dev Summit 2019)
Chrome for Developers
6.2K views 215 likes 2 dislikes 25 Nov 201946% match

Oh the things you’ll compile - modern WebAssembly (Chrome Dev Summit 2019)
Chrome for Developers
21.1K views 396 likes 16 dislikes 12 Nov 201946% match

What’s new in Material Design for the web (Chrome Dev Summit 2019)
Chrome for Developers
38.1K views 915 likes 22 dislikes 22 Nov 201946% match

Day 1: Chrome Dev Summit 2020
Chrome for Developers
15.9K views 628 likes 8 dislikes 09 Dec 202046% match

Chrome and the web in 2020
Chrome for Developers
54K views 552 likes 56 dislikes 09 Dec 202045% match

Faster apps with JSON.parse (Chrome Dev Summit 2019)
Chrome for Developers
300.2K views 12.8K likes 0 dislikes 22 Nov 201945% match

Tools for fast Angular applications (Chrome Dev Summit 2019)
Chrome for Developers
8.8K views 328 likes 6 dislikes 22 Nov 201945% match

Ready player web: Building modern web games (Chrome Dev Summit 2019)
Chrome for Developers
13.5K views 412 likes 28 dislikes 17 Nov 201944% match

Chrome Dev Summit 2019 - Day 2 Livestream
Chrome for Developers
12.3K views 195 likes 7 dislikes 12 Nov 201943% match

Chrome Dev Summit 2019 - Day 1 Livestream
Chrome for Developers
21.8K views 461 likes 5 dislikes 11 Nov 201943% match

Using WebAssembly and Threads (Chrome Dev Summit 2018)
Chrome for Developers
19.8K views 493 likes 11 dislikes 13 Nov 201843% match

Speed highlights (Chrome Dev Summit 2019)
Chrome for Developers
6.7K views 188 likes 5 dislikes 14 Nov 201942% match

The gift of giving up (Chrome Dev Summit 2019)
Chrome for Developers
4.6K views 167 likes 4 dislikes 16 Nov 201942% match

UX patterns optimized for Core Web Vitals
Chrome for Developers
17.8K views 520 likes 22 dislikes 11 Dec 202041% match

PWAs and capability highlights (Chrome Dev Summit 2019)
Chrome for Developers
8.1K views 200 likes 5 dislikes 16 Nov 201941% match

5 tips to make your PWA stand out (Chrome Dev Summit 2019)
Chrome for Developers
6.4K views 233 likes 5 dislikes 25 Nov 201941% match

Design, UX & Advanced PWAs highlights (CDS 2020)
Chrome for Developers
63.7K views 944 likes 76 dislikes 10 Dec 202041% match

Blending PWA into native environments (Chrome Dev Summit 2019)
Chrome for Developers
5.3K views 147 likes 8 dislikes 25 Nov 201941% match

3D, VR and AR on the web (Chrome Dev Summit 2019)
Chrome for Developers
15.3K views 514 likes 2 dislikes 17 Nov 201941% match

WebP in its 10th year (Chrome Dev Summit 2019)
Chrome for Developers
5K views 187 likes 3 dislikes 19 Nov 201941% match

What’s new in sign-up and sign-in (Chrome Dev Summit 2019)
Chrome for Developers
7.1K views 152 likes 5 dislikes 11 Nov 201941% match

Designing for speed and hacking user perception (Chrome Dev Summit 2019)
Chrome for Developers
9K views 539 likes 4 dislikes 15 Nov 201940% match

Hello dark mode, my old friend (Chrome Dev Summit 2019)
Chrome for Developers
24.5K views 824 likes 25 dislikes 22 Nov 201940% match

The main thread is overworked & underpaid (Chrome Dev Summit 2019)
Chrome for Developers
93.4K views 2.5K likes 68 dislikes 11 Nov 201940% match


Settings Privacy About Contact Donate