HTML script 태그에 인라인으로 작성된 js를 디버깅하는 방법

소개

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>