新型「CodePen」は、コンソール画面が搭載されてJavaScriptプログラミングが快適になった！ : うえぶはっく

HTML/CSS/JavaScriptを使ったWebプログラミング環境をすぐに用意でき、シェアや埋め込みも簡単な「CodePen」をみなさん使っているでしょうか？

ちょっとした実験や、自作のWebアプリを手っ取り早く公開したり、ポートフォリオとして利用している人も多いわけですが、今回のバージョンアップに伴い…ようやく「コンソール画面」が搭載されたのでご紹介しようと思います！

まずは、CodePenにアクセスして、トップ画面から「＋New Pen」ボタンをクリックしましょう！

すると、コードエディタが表示されます。

このエディタ下段にある「Console」というボタンをクリックすると、コンソール画面が表示されるようになっているのです！

これは、ブラウザなどに搭載されている「デベロッパーツール」から閲覧できるコンソール画面とほぼ同じになっています。

つまり、いちいちデベロッパーツールを起動しなくても、CodePenの画面上から「console.log()」などを確認することが出来るようになったので便利！…ということですね。

ちなみに、この新機能に伴いシェアする時のURL末尾に「?editors=1111」のような4桁の数字を指定することでコンソール画面を含めたコードの「表示・非表示」も可能になっています。

この4桁の数字は、左からそれぞれのコード画面に対応していて、「1(HTML)1(CSS)1(JS)1(Console)」となっており、「1」が表示で「0」が非表示になります。

つまり、

http://codepen.io/ユーザー名/pen/****?editors=1010

こう書くと、CSSとコンソール画面が非表示となり、

http://codepen.io/ユーザー名/pen/****?editors=0011

こう書けば、JavaScriptコードとコンソール画面が最初から表示された状態にできるという意味になります。

これは、地味に便利なのではないでしょうか。。

すでにCodePenを使っている人はもちろんですが、これから使ってみようと思っている人はぜひこの新機能を試してみてください！

・「CodePen」公式サイト