Dartのプロファィリングツールについて(訳 「Observatory: A Profiler for Dart App」、「Getting Started with Observatory」)

# はじめに

Androidで、「Eclipse Memory Analyzer Tool」がアプリ開発の友達であったように。Dartでアプリを開発する時も、カパレッチをとったり、メモリーの使用量やリークチェック、断片化チェックを常にしながら開発をしてくと思います。

本文では、Dartのプロファイリングツールである、Observatoryについて説明します。


# 補足

本文の本体は「なぜなにTorrent」の方にあります。
https://www.gitbook.com/book/kyorohiro/doc_hetimatorrent
変更とかは、こちらがメイン

# 訳
以降、Dartのプロファィリングツールについての訳です。


## Observatory: A Profiler for Dart App
(https://www.dartlang.org/tools/observatory/)の訳

Observatoryは profiling と debugging 用のツールです。

```
ObservatoryはFreeでGETできます。
https://www.dartlang.org/downloads/ から取得できます。
issueやrequestは、 http://dartbug.com/new で受け付けています。
```

Observatoryは動作中のDart VM の中身を覗くことができます。そして、即座にレポートしてくれます。

* どの部分に時間を費やしていたか
* allocatedした メモリーを調べます。
* コードのどの部分が実行されたわかります
* メモリーリークをデバックできます
* メモリーの断片化をデバックできます


次のビデオは、Dart Developer Summit をレコードしたものです。John McCutchan と Todd Turnidge で　使い方について解説しています。

https://youtu.be/y39pZCExsOs?list=PLOU2XLYxmsIIQorIS8gagUiMau9S84vZV


### Using Observatory
* [get started with Observatory](Observatory_GetStarted.md)<--- 次のSectionにて、和訳済み

To learn about specific features, read these pages:

* [Allocation Profile](https://www.dartlang.org/tools/observatory/allocation-profile.html)
* [Code Coverage](https://www.dartlang.org/tools/observatory/code-coverage.html)
* [CPU Profile](https://www.dartlang.org/tools/observatory/cpu-profile.html)
* [Debugger](https://www.dartlang.org/tools/observatory/debugger.html)
* [Evaluating Expressions](https://www.dartlang.org/tools/observatory/evaluate.html)
* [Heap Map](https://www.dartlang.org/tools/observatory/heap-map.html)
* [Isolate](https://www.dartlang.org/tools/observatory/isolate.html)
* [Metrics](https://www.dartlang.org/tools/observatory/metrics.html)
* [User and VM Tags](https://www.dartlang.org/tools/observatory/tags.html)
 
The following pages have reference information about Observatory:

* [dart: The Standalone VM](https://www.dartlang.org/tools/dart-vm/#observatory)
* [Glossary of VM Terms](https://www.dartlang.org/tools/observatory/glossary.html)
* [Screens in Observatory](https://www.dartlang.org/tools/observatory/screens.html)

##### Support and discussion

Join the [Observatory discussion mailing list](https://groups.google.com/a/dartlang.org/forum/#!forum/observatory-discuss) to ask questions and chat with users.

##### Filing bugs and feature requests
To see existing issues or create a new one directly, see all [Observatory issues](https://github.com/dart-lang/sdk/labels/Area-Observatory).



　
　
　



# Getting Started with Observatory　(Observatoryを始めよう!!)

[https://www.dartlang.org/tools/observatory/get-started.html](https://www.dartlang.org/tools/observatory/get-started.html)の訳


#### [Contents]
* Get Observatory
* Start Observatory
  * Standalone apps from the command line
  * Web apps
* Observatory UI
* VM screen
* What next?

```
ObservatoryはFreeでGETできます。
https://www.dartlang.org/downloads/ から取得できます。
issueやrequestは、 http://dartbug.com/new で受け付けています。
```

### Get Observatory
Observatory は Dart SDK 中の toolsのひとつです。[https://www.dartlang.org/downloads/](https://www.dartlang.org/downloads/)　からダウンロードできます。

Dartでアプリケーションをつくる場合2つの方法があります。 ひとつは、standalone applications として動作させる方法です。もうひとつは、web applications　として動作させる方法です。 standalone appsの場合、 command line から Observatory を使う事ができます。
また、browser-based apps の場合、command line からDartium 上でアプリを起動させる事で、Observatory を利用できます。
つまり、どちらの場合でもObservatoryを利用する事ができます。


### Start Observatory
standaloneか web appかによって、 Observatory 有効にする方法は異なります。
しかし、測定結果のUIについては、だいだい同じです。

##### Standalone apps from the command line

Observatoryを有効にするには、dartvm を起動する時にオプションを追加します。
例えば、
```
dart --observe <script>.dart
```

次に、お好みのブラウザーで http://localhost:8181 にアクセスしてください。Observatory UI　が表示されます。


デフォルトでは、このサービスは同コンピュータからのみ許可されています。
この制限は、ssdhでport foward するなどして回避することもできます。

```
ssh -L8181:127.0.0.1:8181 user@targetmachine
```

LinuxやMacを使っている場合は、IGQUITメッセージを送る事で、この機能を後から有効にすることもできます。Observatory UI へのアドレスは、コンソール上(STDOUT)に表示されます。

```
$ ps ax | grep dart
<pid> pts/61   Sl+    0:01 dart example.dart
$ kill -s SIGQUIT <pid>
Observatory listening on http://127.0.0.1:<port>
```

### Web apps
Dartium上でアプリを起動してください。例えば、WebStormで実行する場合は、index.htmlとかを右クリックして、pop-up menuからRunをを選択します。

Dartiumの中で、 select View > Developer > JavaScript ConsoleとしてCosoleを立ち上げると、以下のように表示されます。
```
Observatory listening on http://127.0.0.1:56246
```
このアドレスから、Observatory UI にアクセスできます。


コマンドラインから起動する事ものできます。より詳細な情報は、　https://www.dartlang.org/tools/dart-vm/#observatory を参照してください

* Mac OS:
```
cd <path-to-demo>/sunflower/web
<path-to-Dartium>/Chromium.app/Contents/MacOS/Chromium --DART_FLAGS="--steal_breakpoints --pause-isolates-on-start" sunflower.html
(#)kyorohiroの環境では、--DART_FLAGS="--steal_breakpoints --pause-isolates-on-start --observe --enable-vm-service --pause-isolates-on-exit"としました。
```


* Windows:
```
cd <path-to-demo>\sunflower\web
<path-to-Dartium>\Chromium\Application\chromium.exe --DART_FLAGS="--steal_breakpoints --pause-isolates-on-start" sunflower.html
```

* Linux:
```
cd <path-to-demo>/sunflower/web
<path-to-Dartium>/chromium-browser --DART_FLAGS="--steal_breakpoints --pause-isolates-on-start" sunflower.html
```


### Observatory UI
Observatory は browser-based で動作します。

上部に青色のパーが表示さけます。その左に文字が表示されます。リフレッシュボタンが右にあります。リフレッシボタンを押すと情報が更新されます。

![ObservatoryBar.png](https://qiita-image-store.s3.amazonaws.com/0/54192/af636f0a-694c-8b71-af21-efee70a0649f.png)

blue bar の中には、 breadcrumb trail　がありす。これは、Observatory UI 上のどころいるかをしめしています。このItemをクリックすることができます。

このItem上にマウスカーソルを合わせると、drop-down menus が表示されます。
以下スクリーンショットのようになります。このスクリーンショットは、profile.dart$main 上にマウスカーソルを合わせたものです。 debugger, cpu profile, allocation profile, and heap map が表示されます。

![ObservatoryBreadCrumb.png](https://qiita-image-store.s3.amazonaws.com/0/54192/05dd4fe4-44a8-b9b7-1783-147a379d5c8b.png)


breadcrumb bar を利用する事で、いつでも [VM screen](https://www.dartlang.org/tools/observatory/screens.html#vm-screen) に戻る事ができます。


次のSectionでは、VM Screenについて説明します。Observatoryで利用可能Screendについては、[Screens in Observatory](https://www.dartlang.org/tools/observatory/screens.html)を参照してください。


### VM screen
Observatoryに最初に接続した時、VM screenが表示されます。この時、この瞬間の情報がサンプリングされます。

例えば以下のような表示がされます。:
![ObservatoryVM.png](https://qiita-image-store.s3.amazonaws.com/0/54192/928ade65-8e22-997b-7ec4-e46bc8c53142.png)


この情報は、Refresh button をクリックする事で更新されます。

vm screenn　には　以下の情報が含まれます。

##### ○version
どのバージョンのVMなのか?どのアーキテクチャーのVMなのか?
##### ○started at
VMを起動した時のThe time stamp
##### ○uptime
VM動作している時間
##### ○refreshed at
最後にサンプリングした時間
##### ○type checks enabled
type errorsをチェックするかどうか
##### ○asserts enabled
assertion statements を評価するかどうか。
##### ○pid
process ID

以下は、isolatesの一覧です。

![VM-IsolateList.png](https://qiita-image-store.s3.amazonaws.com/0/54192/546bdc78-ddb4-17f0-bbdc-3eb69973e9f8.png)


詳しくは [User and VM Tags](https://www.dartlang.org/tools/observatory/tags.html)　を参照してください。

さまざまなObservatory screen を持ちます。詳しは [Screens in Observatory](https://www.dartlang.org/tools/observatory/screens.html) を参照してください.

isolateについては [Isolate](https://www.dartlang.org/tools/observatory/isolate.html)を参照してください.


### What next?
Where you should go next depends on what questions you’d like to answer.

##### ○専門用語について知りたいなら!!
[Glossary of VM Terms](https://www.dartlang.org/tools/observatory/glossary.html)

##### ○UIの画面の機能が知りたいなら!!
[Screens in Observatory](https://www.dartlang.org/tools/observatory/screens.html)

##### ○どの処理に時間を費やしているかしりたいなら!!
[CPU Profile](https://www.dartlang.org/tools/observatory/cpu-profile.html)

##### ○“power” profiling について知りたいなら!!
[User and VM Tags](https://www.dartlang.org/tools/observatory/tags.html)

##### ○breakpointsを設定したいなら!!
[Debugger](https://www.dartlang.org/tools/observatory/debugger.html)

##### ○アプリの metrics を集めたいなら!!
[Metrics](https://www.dartlang.org/tools/observatory/metrics.html)

##### ○メモリーの割り当てについて知りたいならば!!
[Allocation Profile](https://www.dartlang.org/tools/observatory/allocation-profile.html)

##### ○メモリーの断片化について知りたいならば!!
[Heap Map](https://www.dartlang.org/tools/observatory/heap-map.html)

##### ○Dart codeを照会/変更したいならば!!
[Evaluating Expressions](https://www.dartlang.org/tools/observatory/evaluate.html)

##### ○特定のコードが実行されたかどうか知りたいならば!!
[Code Coverage](https://www.dartlang.org/tools/observatory/code-coverage.html)

##### ○stack traceを知りたいならば!!
[Debugger](https://www.dartlang.org/tools/observatory/debugger.html)

##### ○isolateについて知りたいならは!!
[Isolate](https://www.dartlang.org/tools/observatory/isolate.html)