HTML の script タグ内にインラインで書かれた js をデバッグする方法

# はじめに

HTML の script タグ内にインラインで書かれた js をデバッグする方法を共有します :blush: 

本来であれば外部ファイルとして `*.js` にすべきですが、ワケあって
`<script>` タグ内に js が書かれている場合に有効です！

この方法は `script` タグに囲まれた js を、
あたかも外部ファイルの js として扱えるようになります :sunglasses: 

# やってみよう

例えば、以下のような html があるとします。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Qiita</title>
</head>
<body>
  <div id="hello">Hello World!</div>
  <script>
  document.querySelector('#hello').addEventListener('click', function(e) {
    alert(this.innerHTML);
  }, false);
  </script>
</body>
</html>
```

`Hello World!` をクリックすると、アラート で `Hello World!` と表示されるという簡単なものです。

<img width="1218" alt="1.png" src="https://qiita-image-store.s3.amazonaws.com/0/9760/04e26631-c01c-b4fb-847d-ed2a9b923d79.png">

`script` タグの最後に `//# sourceURL=foobar.js` と書きます。

```diff
<script>
document.querySelector('#hello').addEventListener('click', function(e) {
    alert(this.innerHTML);
}, false);
+ //# sourceURL=hello-world.js
</script>
```

<img width="1217" alt="2.png" src="https://qiita-image-store.s3.amazonaws.com/0/9760/d899e9fb-9c71-dd7f-af22-07b9613bfd8c.png">

[こちらのサイト](https://jsfiddle.net/madobon/4Ld4Ltsa/) で `Run` をクリックしてみてください。
すると、開発者ツールで `hello-world.js` として読み込めます！ :laughing: 

<img width="1126" alt="3.png" src="https://qiita-image-store.s3.amazonaws.com/0/9760/aa7cf340-6c9a-2816-7c5f-8f657663a413.png">

これで、直接 `js` の編集が可能となります。`Ctrl + S` で保存すれば即時適用されます。

<img width="1127" alt="4.png" src="https://qiita-image-store.s3.amazonaws.com/0/9760/96d40621-700f-c033-e483-87973822ae98.png">

# 応用編

## sourceURL を工夫して書こう

`sourceURL` は以下のように書くこともできます。

`//# sourceURL=http://foo/bar/foobar.js`

例えば、以下のような html があるとします。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Qiita</title>
</head>
<body>
  <div id="one">one</div>
  <div id="two">two</div>
  <div id="three">three</div>
  <script>
    document.querySelector('#one').addEventListener('click', function(e) {
      alert(this.innerHTML);
    }, false);
    //# sourceURL=http://foobar/script/one.js
  </script>
  <script>
    document.querySelector('#two').addEventListener('click', function(e) {
      alert(this.innerHTML);
    }, false);
    //# sourceURL=http://foobar/script/two.js
  </script>
  <script>
    var src = "document.querySelector('#three').addEventListener('click', function(e) {" +
      "    alert(this.innerHTML);" +
      "  }, false);" +
      "//# sourceURL=http://foobar/eval/three.js"
    eval(src);
  </script>
</body>
</html>
```

この場合は、以下のようにディレクトリ構造で認識されます。

<img width="330" alt="5.png" src="https://qiita-image-store.s3.amazonaws.com/0/9760/f34c3967-ea78-8e0f-c734-8a0dcd46a17c.png">

[こちらのサイト](https://jsfiddle.net/madobon/mhgz09qn/) で試すことができます。

## 開発者ツールのコンソールでも使える！

こんな使い方もできるよというご紹介です。

開発者ツールのコンソールで以下のスクリプトを実行してみてください。

```js
alert(1); //# sourceURL=alert.js
```

`alert.js` がきちんと認識されましたね。ブレークポイントも動作しています。

<img width="1132" alt="6.png" src="https://qiita-image-store.s3.amazonaws.com/0/9760/1aed9dda-4232-ded4-c85f-6273cc74715e.png">

※ 直接のファイル編集は `Inspected target disconnected` になってうまくできませんでした。
<img width="1130" alt="7.png" src="https://qiita-image-store.s3.amazonaws.com/0/9760/246318f3-920a-6458-7477-ad6d4f88bd84.png">

# まとめ

* `script` タグに囲まれたインラインな js も外部ファイルの js と同様に扱えるようにできる。
* やり方は `script` タグの さいごに `//# sourceURL=foobar.js` と書くだけ。
* `//# sourceURL=http://foo/bar.js` なんて書き方もできる。
* `eval('alert(1); //# sourceURL=alert.js');` のような使い方もできる。
* 開発者ツールのコンソールで叩く場合にも使える。

便利なので、是非試してみてください :full_moon_with_face: