files/ja/tools/debugger/how_to/use_a_source_map/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

---
title: ソースマップを使用する
slug: Tools/Debugger/How_to/Use_a_source_map
translation_of: Tools/Debugger/How_to/Use_a_source_map
---
<p>{{ToolsSidebar}}</p>

<p>ブラウザーが実行する JavaScript ソースは、開発者が作成した元のソースから何らかの方法で変換される場合があります。例えば:</p>

<ul>
 <li>より効率よくサーバーから提供するためにコンバインおよび <a href="https://en.wikipedia.org/wiki/Minification_(programming)">ミニファイ</a> されることがよくあります。</li>
 <li><a href="http://coffeescript.org/">CoffeeScript</a> や <a href="http://www.typescriptlang.org/">TypeScript</a> のような言語からコンパイルするように、ページで実行する JavaScript が機械生成されることがあります。</li>
</ul>

<p>このような状況では、ブラウザーがダウンロードした変換後のソースよりも、元のソースをデバッグするほうがとても容易です。<a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">ソースマップ</a> は変換後のソースと元のソースを関連付けるファイルであり、ブラウザーが元のソースを再構成して、そのソースをデバッガーに提供できます。</p>

<p>デバッガーでソースマップを使用可能にするには、以下のことが必要です:</p>

<ul>
 <li>ソースマップを生成します。</li>
 <li>変換後のソースに、ソースマップを指し示すコメントを含めます。コメントは以下のような構文です:</li>
</ul>

<pre class="brush: js"><code>//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map</code></pre>

<p>{{EmbedYouTube("Fqd15gHC4Pg")}}</p>

<p>上の動画では <a href="https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html">https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html</a> を読み込んでいます。このページは、初めに CoffeeScript で記述して JavaScript に変換した "main.js" という名前のソースを読み込みます。変換後のソースには、ソースマップを指し示す以下のようなコメントが含まれています:</p>

<pre class="brush: js"><code>//# sourceMappingURL=main.js.map</code></pre>

<p>デバッガーの <a href="/ja/docs/Tools/Debugger/UI_Tour#Source_list_pane">ソースリストペイン</a> では元の CoffeeScript ソースが "main.coffee" として表示されて、ほかのソースと同様にデバッグできます。</p>

<p>最後に、ブラウザーのバージョンによっては about:config でこの機能を有効化しなければならない場合があります。</p>

<ol>
 <li>ブラウザーを開いて about:config と入力します。<br>
  <img alt="How to open about:config inside firefox." src="https://mdn.mozillademos.org/files/14815/about_1.png" style="height: 149px; width: 700px;"></li>
 <li>動作保証対象外であることを受け入れます。<br>
  <img alt="Accept about:config warranty." src="https://mdn.mozillademos.org/files/14817/about_2.png" style="height: 207px; width: 700px;"></li>
 <li><strong>devtools.source-map.locations.enabled</strong> を検索して <strong>true</strong> に設定します。<br>
  <img alt="Change the sourcemap boolean value for devtools." src="https://mdn.mozillademos.org/files/14819/about_3.png" style="height: 104px; width: 700px;"></li>
</ol>