💻

jsFiddleでconsole.logの結果を表示する＆npmライブラリを使う方法

2020/07/05に公開

jsFiddleとは

jsFiddle は、HTML/CSS/JavaScriptのコードをブラウザ上で実装・動作確認できるWebサービスです。ユーザー登録なしでも使えるので、簡単なコードの動作結果をちょっとシェアしたいときなんかにとても便利です。

こちらをご覧ください。

console.log（1）; するだけのコードです。jsFiddleの出力画面には（当たり前ですが）ブラウザ領域には何も表示されておらず、コンソールに 1 が出力されていますね。

これでも一応動作結果を共有することはできますが、 console.log() の出力をブラウザ領域に表示するようにできると、より見やすくなりますよね。

ちなみに、少し前にjsFiddleのアップデートがあってデフォルトでコンソールが表示されるようになりましたが、以前はデフォルトでは何も表示されていないブラウザ領域だけが見えていて、わざわざコンソールを表示しないと結果が見られませんでした。

というわけでその方法です。

とても簡単で、jsFiddleの左メニューの Resources に、以下のように https://rawgit.com/eu81273/jsfiddle-console/master/console.js というURLを入力して + をクリックするだけです。

eu81273/jsfiddle-console が読み込まれて、 console.log() の出力をDOMに出力してくれるようになるというわけです。

これで、

このように console.log() の出力内容がブラウザ領域に表示されます。

参考：jsfiddle - How do I display the results of console.log in JS Fiddle? - Web Applications Stack Exchange

似たような話で、jsFiddleでnpmパッケージを使いたいなーということもあると思います。

これも同じように Resources で読み込めばよいです。npmパッケージをCDN化してくれるサービス unpkg.com を使います。

例えば、lodash の 4.17.15 を使いたい場合なら、 https://unpkg.com/lodash@4.17.15/lodash.js というURLを Resources で読み込めばよいです。

このように、jsFiddle内でlodashを使ったコードを実行できます。

参考：javascript - How to import NPM package in JSFiddle? - Stack Overflow