BTC:--
ETH:--
BCH:--
XRP:--

Chromeでjavascriptをconsole.logを使ってデバッグする方法。

  • JS

Chromeでjyavascriptをデバッグする方法の一つが、

console.log(値);

です。
console.logってmicrosoftのcmd.exeではなく、chromeのコンソールです。

Ctrl+Shift+I
でデベロッパー画面を表示させて、Consoleを選びます。

例として下記のjsとhtmlを使います。

<body>
<div id="main">
 <p id="me" class="data1"><a id="a1" class="aiueo" href="#">aaa</a></p>
 <p id="you" class="data1"><a id="a2" class="aiueo" href="#">bbb</a></p>
 <p id="him" class="data1"><a id="a3" class="aiueo selected" href="#">ccc</a></p>
</div>
<script type="text/javascript">
$(function(){
    $(".data1 a").click(function() {
      console.log($(".data1").find(".selected").attr("id"));
      return false;
    });
});
</script>
</body>

aaaのリンクをクリックすると、先ほど選択したConsole画面に値が表示されます。

window.alertでも値は表示できるのですが、変数の値がObjectだったりすると表示がObjectとなってしまい確認することができません。
Console.logであれば中身も確認することができるのでデバッグにとても便利な機能です。

メニューを閉じる