インラインスクリプトをデバッグしてみよう!

12月になり、外もだいぶ寒くなってきましたね。
冬は多肉に水をあげすぎると根腐れしてしまうので、最近は多肉おさぼり系エンジニアのほりです。

はじめに

今日はインラインスクリプトのデバッグ方法についてご紹介したいと思います。

インラインスクリプトはブラウザもキャッシュしないので、あまり推奨してないとは思うのですが、何だかんだデバッグする機会って結構あると思うんです。そこで、今回はおすすめのデバッグ手法を2点ほど紹介したいと思います。

「chrome」の画像検索結果

デバッグしてみよう!

今回使用するブラウザは Google Chrome 78.0.3904.108(Official Build)で、デバッグには DevTools を利用します。今回すぐにデバッグお試しいただけるよう codepen にサンプルコードを用意しました。

See the Pen VwYYyVZ by Naoya Hori (@wwnhori) on CodePen.

注目していただきたいのは、以下の箇所です。

  <script>
  console.log('welcome to japan');
  //# sourceURL=http://debug/welcome2japan.js
  </script>

上記の //# sourceURL ディレクティブを利用することで、インラインスクリプトをあたかも外部スクリプトのように扱うことができます。インラインスクリプトが複数に分かれている場合でも、それぞれ記載すれば別々の外部スクリプトとして扱うことができます!

Google Chrome でサイトを閲覧している場合は今すぐこのページで試すことができます!

まず、F12 で DevTools を開いていただき、 Ctrl + P でコマンドウィンドウを開いて 「welcome」 と入力してみてください。

見えてきたでしょうか…

見事に外部スクリプト化に成功していますね!

インターネットを使いながら歓喜する人のイラスト1

そのまま DevTools を開いたまま、 codepen の画面に戻って「click me」ボタンをクリックしてみてください。

今度は debugger というところでブレークポイントが止まりましたね!

そう、DevTools を開いている状態で debugger ステートメントを通過するとブレークポイントの役割を果たしてくれます!

目からうろこのイラスト(男性)

まとめ

・script タグ内に //# sourceURL ディレクティブを入れることで、外部JSとして扱ってデバッグ可能となる
・debugger ステートメントを利用することでブレークポイントを仕掛けることができる

他にも「こんなテクニックもあるよ!」というのがあれば、是非おしえてください!

関連記事

プロジェクトストーリー

技術

コメント

この記事へのコメントはありません。

カテゴリー

TOP
TOP