Page Top

console.logを使ってChromeで変数の値を確認する

February 11, 2015

jQueryで、JavaScriptの時のように変数の値を確認できるようなものには何があるのだろう?と調べたところ、console.logを使って、Chromeブラウザにおいてキーボードの「F12」を押す事で、console画面が表示され、内容を確認できるということを知りました。例えば、以下のような感じで使えます。
(※注意:<>は全角にしています。)

<script type="text/javascript">
var logo_text_height = $('#header .header-main .logo-text').height();
var text_info_height = $('#header .header-main .text-info').height();

console.log('logo_text_height:' + logo_text_height);
console.log('text_info_height:' + text_info_height);
</script>

htmlページをChromeで開き、キーボードで「F12」を押します。すると、以下の画像のような感じで右側の方にconsoleが表示されているのでそれをクリックすると、確かめたいログの値がチェックできます。
20150211_consolelog.png

最新記事