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

10034 ワード
Chrome デバッグ JavaScript ChromeDevTool JavaScript テキストリンク

はじめに

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

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

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

やってみよう

例えば、以下のような 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! と表示されるという簡単なものです。

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

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

こちらのサイト で Run をクリックしてみてください。
すると、開発者ツールで hello-world.js として読み込めます！

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

応用編

sourceURL を工夫して書こう

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

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

例えば、以下のような 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>

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

こちらのサイト で試すことができます。

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

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

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

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

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

※ 直接のファイル編集は Inspected target disconnected になってうまくできませんでした。

まとめ

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

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