tweeeetyのぶろぐ的めも

アウトプットが少なかったダメな自分をアウトプット<br>\(^o^)/

jsfiddleでconsole.logの結果をresultに出すように書き換えるlogFiddle作ってみたメモ

はじめに

jsfiddleって便利ですよねー!
ちょっとしたjavascript書いて試したり、ブログに載せる用に使ったり

でも、javascript単体の記事でHTMLもCSSも使わないときどうします?
console.log出力が結果だったりしません?

ブログ用にjsfiddleで書いたはいいけど
出力はconsole.logだから結局自分でJavaScriptコンソール開いてね!だとなんか残念...orz

そんな時の自分用に
いつもどおりconsole.log(1)でresultに表示される
強引なconsole.logスクリプト書きました。って言うメモ

こんな感じです!

使い方1

jsfiddleの登録とかは済ませておいてくださいね

  • 左サイドバーExternal Resourcesをクリック

f:id:tweeeety:20140501224233p:plain

f:id:tweeeety:20140501224305p:plain

こんな感じで追加されます

f:id:tweeeety:20140501224314p:plain

  • こんな感じのソースを書いて実行するとresultにconsole.logチックに出力されます

f:id:tweeeety:20140501224324p:plain

  • 実際のjsfiddleはこちら

使い方2

使い方1ではconsole.logで出力する前に

  • logFiddle初期化
  • console.logおーばーらいど

を自前で書かなくてはいけませんでしたが、
それすらめんどくさい自分みたいな人用にそのあたりもグローバルでやっちゃうスクリプトも用意しておきました
※もちろんグローバルは汚染しますw

ってことで、使い方1のExternal ResourceにこっちのURL↓を追加すればOKです
https://rawgithub.com/tweeeety/logFiddle/master/execLogFiddle.js
※使い方1のほうのExternal Resourceは×で消してください

ってことで使ってみた感じはこちら

同じことやってる人すでにいそうですが こんくらい探すより作っちゃえ!ということで自分メモでした\(^o^)/