インラインJavaScriptのデバッグが楽になる！意外にしらないスクリプトのマジックワード
インラインJavaScriptのデバッグってさ、めっちゃ面倒なときあるよね。ページに直書きしたJavaScriptをデバッグしたいとき、どうしてる？
まぁ、几帳面な人は外部ファイル（script.jsとか）に分けてキレイに管理するんだろうけど、ぶっちゃけそれすら面倒じゃない？特にちょっとしたコードなら、<script>タグにそのままガッと書いちゃうこと、俺もよくやるよ。
でもさ、そうやって直書きしたコードをデバッグしようとすると、ちょっと困るんだよね。デベロッパーツール（ChromeのDevToolsとか）で「ソース」タブ開いても、どこにあるんだよ！ってなることない？だって<script>タグの中だから、ファイルとして出てこないんだもん。うわ、そりゃそうだなって感じだけど、デバッグしたい身としては「なんだよこれ」ってなるよね。
debugger;で止めるの、ぶっちゃけ面倒
で、よくやる手として、debugger;ってコードに入れて止める方法があるよな。たとえば、こんな感じで適当なとこにぶち込んで、ページリロードしてデバッグするんだ：
0001 function someFunction() {
0002 console.log("ここからだよ");
0003 debugger; // ここで止まる
0004 console.log("ここまでだよ");
0005 }
これなら実行がdebugger;のとこで止まってくれて、DevToolsでコードの中身が見られる。ブレークポイント置かなくても済むから、最初は「ほぉ、便利じゃん！」って思うわけよ。
でもさ、冷静に考えてみたらこれ、めっちゃ面倒じゃない？コードのあちこちにdebugger;入れてると、実行するたび何回も止まるんだよ。たとえばif文とかループの中に入れちゃうと、もう止まりまくりで「うわ、また止まった！次！次！」ってなるし。んで、デバッグ終わったら今度はdebugger;を一個一個消さなきゃダメ。消し忘れたらまた止まるし、リロードして確認して…って、めっちゃ面倒だろ？俺、何回も「もういいよ！」って心の中で叫びそうになった（笑）。
もっと楽な方法見つけたよ！//# sourceURLだ！
でさ、もっと楽なやり方知って感動したんだ。それがこれ。コードの中に、たった一行追加するだけ：
0001 //# sourceURL=XXX.js
このXXX.jsって部分、ぶっちゃけなんでもいいんだ。my-debug-script.jsでもhoge.jsでも、適当に分かりやすい名前つけときゃいい。別に実在するファイル名じゃなくてもいいし、マジで適当でいけるよ。
やり方をザックリ教えると、こんな感じだ：
-
インラインのJavaScriptに//# sourceURLぶち込む たとえば、HTMLの<script>タグに直書きしたコードがこんなんだったとして：
0001 </p>
0002 <script> function sayHello() { console.log("よぉ、世界！"); } sayHello(); //# sourceURL=my-debug-script.js </script>
0003 <p class="break-words">一番最後に//# sourceURL=my-debug-script.jsって書いとくだけでいい。コメントっぽいけど、これがバッチリ効くんだよ。
-
デベロッパーツール開く ページ表示した状態で、DevTools開くよ。ショートカットはF12（WindowsならCtrl + Shift + Iでもいける）。んで、「ソース」タブに移動だ。
-
ソース探す ここが便利なんだけど、DevToolsでCtrl + P（MacならCmd + P）押したらファイル検索できるんだ。そしたら、さっき指定したmy-debug-script.jsって名前で検索かける。すると、めっちゃ簡単に見つかるよ！ちゃんと独立したファイルっぽく見えるから、ブレークポイント置いたり一行ずつ追ったり、普通の外部ファイルみたいにデバッグできるんだ。
-
全体検索も便利だよ もし「ファイル名忘れた」とか「コードの中の特定の文字列探したい」ってときは、Ctrl + Shift + F（MacならCmd + Shift + F）で全体検索もできる。ページ内の全スクリプトとかHTMLの中から該当する部分が見つかるんだよ。スクロールして探すの面倒なら、検索窓にキーワードぶち込んでサクッと見つけちゃうのがオススメだ。ちなみに、全体検索やると<html>タグから始まるページ全体のソースが見えるから、そこから<script>タグのとこまで下がって確認するのもアリだよ。
この方法のいいとこ
この//# sourceURLのやり方、なんがいいって、まずdebugger;を毎回入れて消して…って面倒な作業が要らないことだ。一回書いておけば、DevToolsでいつでもそのスクリプトが見られるし、ブレークポイントも自由に置ける。リロードしても勝手に止まらないから、ストレスがマジで減るんだよ。
しかも、ちょっとした直書きスクリプトで使うのにピッタリだ。外部ファイルにするまでもないけど、デバッグはちゃんとしたい、みたいなときに超便利だよ。
試してみた感想
俺、マジで毎回debugger;入れては消して、入れては消して…ってやってたから、この方法知ったときは「なんでもっと早く知らなかったんだよ！」って叫びそうになった（笑）。作業めっちゃ楽になって、直書きJavaScriptのプチイライラが一つ減った感じだ。
とりあえず試してみ！
ってわけで、インラインJavaScriptのデバッグで「うわ、面倒だな」って思ってる人、ぜひこの//# sourceURL試してみてよ。外部ファイルに分けなくても済むし、デバッグもサクサクやれるし、いいことしかないよ。
この話がデバッグの面倒さ解消に役立ったら嬉しいな。他にも「こんなやり方あるよ」ってのがあったら、逆に教えてくれよ～。
