Chrome Dev Toolでブックマークレットを実行する

#この記事は
ブックマークレットの作成中にChrome Dev Toolが使えることが分かったので紹介する記事です。
今まで自分は何をやっていたんだ。。と思わされる2019年の年末でした

タイトルはブックマークレットと書いてありますが、ブックマークレット限定のことではなく、開いているページで追加のJavaScriptをアドホックに実行する方法です。

##サンプルで使うコード

ブラウザで現在表示しているページで実行すると、そのページのタイトルとカノニカルURLをアラートで表示するjavascriptです。コード自体は簡単なものです。

javascript:(
    function(){
      const title = document.title;
      var href = document.location.href;
      var canonical = get_canonical();
      console.log('ページタイトル=%s \n href=%s \n カノニカルURL=%s', title, href, canonical);
      alert('ページタイトル：'+title +"\n現在のURL："+href + "\nカノニカルURL：" + canonical);
  
      function get_canonical(){
        var links = document.getElementsByTagName("link");
        for ( i in links) {
            if (links[i].rel) {
                if (links[i].rel.toLowerCase() == "canonical") {
                    return links[i].href;
                }
            }
        }
        return "";
      }
    }
)();

さて、Closure compilerを使わずに、こいつを動かしてみます。

##Chrome Dev Toolからjavascriptを動かす
ブックマークレットを動かすページを開き、F12キーを押してChrome Dev Toolを起動します。起動したらConsoleパネルを開きます。ログが出ていたら消しておきます。

Chrome Dev Toolのコンソールタブの一番下に入力欄があるので、そこにブックマークレット用のjavascriptのコードをそのまんま貼り付けします。改行したままでOKです。日本語が入っていてもOKです。

コードをコピー

あとは、エンターキーを押すだけです。

実行！

プログラムが実行され、Consoleにlogが出ています。もちろんアラートも表示されます。

コードを書いて、Closure Compilerで短縮化し、ブラウザのアドレスバーに入れて実行し、修正してはClosure Compilerで・・・という手順を踏まずに実行できます。いままでの苦労は本当に何だったのだ。。。

##デバッガーでデバッグする
今まで、ブックマークレット開発で使いたくても使いにくかったChrome Dev Toolのデバッガーも使えます。

実行でブックマークレットのコードでconsole.log()を実行しておくと、ログと一緒に行番号VM92:6が表示されます。

これをクリックすると、Chrome Dev Tool のSourceパネル開き、さきほどConsoleパネルに入力したjavascriptのコードが表示されます。行番号をクリックしてブレークポイントを設定してから再実行すると、ブレークポイントでコードが停止します。

scopeパネルで変数の内容を確認できます。変数の値を無理やり書き換えることもできます。

デバッガーでブレークポイントを設定するのにスクリプトを2回実行する方法を紹介しましたが、1回目の実行で使う方法があれば教えてください。

###デバッガーを使う方法
コード内にdebuggerステートメントを入れておくと、そこで必ずブレークします。Developer Toolのデバッガーが立ち上がるので、そこで確認できます。

#まとめ
ブックマークレットの開発段階ではChrome Dev Toolのコンソールから実行するのが一番効率がよさそうです。この作業を繰り返し開発完成したソースコードを、最後に1回だけClosure Compilerでコンパイルしてブラウザにセットするようにしましょう。

#参考資料
Chrome DevTools で JavaScript をデバッグする
https://developers.google.com/web/tools/chrome-devtools/javascript

MDN debugger
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/debugger