Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

はじめに

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

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

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

やってみよう

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

1.png

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

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

2.png

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

3.png

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

4.png

応用編

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>

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

5.png

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

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

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

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

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

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

6.png

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

まとめ

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

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

madobon
多肉系エンジニアです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした