サイト内のJavascriptのコードを直接編集して実行できるブックマークレット

Tweet

Pocket

サイト内で紹介されているJavascriptのサンプルコードなどを編集してconsole.logなどで出力したいことはありませんか？

今回はシンタックスハイライトされたコードを直接編集して実行できるブックマークレットを作成してみました。

ブックマークレットについてと設定方法は以下を参照してください。
どのブラウザ（スマホも）でも使えるGoogleサイト内検索！ブックマークレットが便利！

コード編集ブックマークレット

このブックマークレットをクリックするとサイト内に直接文字を書き込めるようになります。サンプルコードなどを直接編集して、編集したコードを選択し再度ブックマークレットをクリックするとJavascriptを実行します。
 
JavaScript編集実行
 

上記をブックマークバーにドラッグするか下記をURLにコピペしてください

javascript:(function(b){var d=document,w=window;if(d.selection){t=d.selection.createRange().text;}else if(w.getSelection){t=w.getSelection().toString();}else if(d.getSelection){t=d.getSelection().toString();}eval(t);b.contentEditable=!b.isContentEditable;})(document.body);

コード詳細

javascript:
  (function(b){
    //document、windowオブジェクト設定
    var d=document,w=window;

    //ブラウザ上で選択された文字列を取得。IE、Firefoxで取得方法が異なる
    if(d.selection){
      t=d.selection.createRange().text;
    }else if(w.getSelection){
      t=w.getSelection().toString();
    }else if(d.getSelection){
      t=d.getSelection().toString();
    }

    //選択された文字列をJavasscriptで実行
    eval(t);

    //ブラウザ上で直接編集できるよう設定。クリックする毎にON,OFFを切り替える。常に編集した場合はtrueを設定
    b.contentEditable=!b.isContentEditable;
  })
  (document.body);

Tweet

Pocket

Related posts:

どのブラウザ（スマホも）でも使えるGoogleサイト内検索！ブックマークレットが便利！ エンジニアに便利！Qiita検索ブックマークレット Google検索に便利！Google検索用ブックマークレット Youtube動画で遊ぶブックマークレット 競合サイトの人気記事をワンクリックで調査・分析できる！はてブ記事ブックマークレット Twitterで便利なブックマークレット