※当サイトの記事には、広告・プロモーションが含まれます。

トップ > JavaScript > ChromeのデベロッパーツールでJavaScriptのプログラムをチェック

ChromeのデベロッパーツールでJavaScriptのプログラムをチェック

JavaScript HTML/CSS

今回は、職場の先輩に教わったプログラミングをしていく上でのお役立ち情報を紹介したいと思います。

 

データの流れはどうなってるの？

自分のように、プログラミング初学者が真っ先に躓くのは、データの流れが把握できないことだと思います。

複数のファイルを行ったり来たりする場合、どこでどのファイルに切り替わるのかがなかなか理解できなかったりします。 

 

ソースコードが合ってるのか？

かろうじて、プログラムでやりたいことが見えて、いざソースコードを記述して実行した時に、自分の期待した通りの反応が返ってこないことがあります。データが取得できてるかを確認できれば、ソースコードのどのあたりに間違いがあるのかを判断する目安になります。

そんな時に、ブラウザのデベロッパーツールの出番です。

 

⇩  詳しくは下記サイトへ 

・JavaScriptのデバッグのコツと技 | プログラミング | POSTD

 

Chromeデベロッパーツールでデバッグ

今回は、Chromeのデベロッパーツールを使っていきます。

『スティッキーヘッダー』と『ハンバーガーメニュー』を実装した際に、上手く解決できなかった際に、職場の先輩に解決してもらった時に、データを取得するコードをどの場所に書くかで取得される値が変わることを教えてもらいました。

/* header */

#header {
  position: relative;
  max-width: 1024px;
  min-height: 300px;
  padding-top: 15%;
  margin: 0 auto;
  border-top: 8px solid #00b1c5;
  background: url(../img/main04.png) #FFFFFF no-repeat;
  background-position: center; 
  background-size: contain;
}
#header-inner {
  position: absolute;
  top: -8px;
  max-width: 1024px;
  width: 100%;
  margin: 0 auto;
}
#header-inner h1 {
  position: absolute;
  top: 0;
  max-width: 1024px;
  width: 100%;
  font-size: 14px;
  font-weight: initial;
  margin: 0 auto;
  color: #FFFFFF;
  line-height: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  background: rgba(0, 0, 0, 0.32);
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#99000000,EndColorStr=#99000000);　/*IE8以下にrgbaのような効果を適用*/
  text-align: right;
}
.right-space {
  display: inline-block;
  margin-right: 24px;
}
#header-inner img {
  max-width: 180px;
  padding: 8px 8px 0;
}
#header #header-inner ul {
  float: right;
  font-family: 'Work Sans','Droid Sans', sans-serif;
  font-size: 16px;
  font-size: 0.8rem;
  height: 68px;
  line-height: 62px;
}
#header #header-inner ul li {
  float: left;
  margin-right: 20px;
}
#header #header-inner ul li a {
  color: #ffffff;
  font-size: 14px;
  text-shadow: 0px 4px 3px rgba(0,0,0,0.8),
               0px 8px 13px rgba(0,0,0,0.3),
               0px 18px 23px rgba(0,0,0,0.3);
  text-decoration: none;
}
/* スティッキーヘッダー */
#change {
  background: rgba(0, 84, 255, 0.32);
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  margin: 0 auto;
  display: none;
  z-index: 9999;
}
#change h1 {
  font-family: 'Dancing Script', cursive;
  font-size: 20px;
  font-size: 2rem;
  float: left;
  font-weight: bold;
  color: #1c262f;
}
#change .sticky-logo-area img {
  max-width: 200px;
  display: inline-block;
  padding: 8px;
}
#change ul {
  float: right;
  font-family: 'Work Sans','Droid Sans', sans-serif;
  font-size: 8px;
  font-size: 0.8rem;
  height: 68px;
  line-height: 68px;
  
}
#change ul li {
  float: left;
  margin-right: 20px;
}
#change ul li a {
  color: #FFFFFF;
  display: block;
  font-size: 14px;
  text-shadow: 0px 4px 3px rgba(0,0,0,0.1), 0px 8px 13px rgba(0,0,0,0.8), 0px 18px 23px rgba(0,0,0,0.3);
  text-decoration: none;
}
/* ハンバーガーメニューのアイコン部分  */
#top-head {
    top: 0;
    position: static;
    width: 100%;
    margin: 0;
    line-height: 1;
    z-index: 999;
}
#top-head a,
#top-head {
    color: #fff;
    text-decoration: none;
}
#top-head .inner {
    position: relative;
}
#top-head .logo {
    float: left;
    font-size: 36px;
}
 
/* Fixed */
#top-head.fixed {
    margin-top: 0;
    top: 0;
    position: fixed;
    padding-top: 10px;
    height: 55px;
    background: #fff;
    background: rgba(255,255,255,.7);
    transition: top 0.65s ease-in;
    -webkit-transition: top 0.65s ease-in;
    -moz-transition: top 0.65s ease-in;
}
#top-head.fixed .logo {
    font-size: 24px;
    color: #333;
}
#top-head.fixed #global-nav ul li a {
    color: #333;
    padding: 0 20px;
}
#global-nav {
    float: right;
} 
/* Toggle Button */
#nav-toggle {
    display: none;
    position: absolute;
    right: 12px;
    top: 36px;
    width: 34px;
    height: 36px;
    cursor: pointer;
    z-index: 101;
}
#nav-toggle div {
    position: relative;
}
#nav-toggle span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #FFFFFF;
    left: 0;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
    top: 0;
}
#nav-toggle span:nth-child(2) {
    top: 11px;
}
#nav-toggle span:nth-child(3) {
    top: 22px;
}  
@media screen and (max-width: 810px) {
    #top-head,
    .top-inner {
        width: 100%;
        padding: 0;
    }
    #top-head {
        top: 0;
        position: static;
        margin-top: 0;
    }
    .logo-area {
        position: fixed;
        height: 68px;
        line-height: 68px;
        z-index: 100;
    }
    #nav-toggle {
        position: fixed;
    }
    /* Fixed reset */
    #top-head.fixed {
        padding-top: 0;
        background: transparent;
    }
    #mobile-head {
        background: #fff;
        width: 100%;
        height: 56px;
        z-index: 999;
        position: relative;
    }
    #top-head.fixed .logo,
    #top-head .logo {
        position: absolute;
        left: 13px;
        top: 13px;
        color: #333;
        font-size: 26px;
    }
    #header #header-inner ul {
        float: none;
        height: auto;
        line-height: 44px;
    }
    #header #header-inner ul li {
        float: none;
        margin: 0;
    }
    #header #header-inner ul li a {
        color: #ffffff;
        font-size: 14px;
        text-shadow: 0px 4px 3px rgba(0,0,0,0.1), 0px 8px 13px rgba(0,0,0,0.3), 0px 18px 23px rgba(0,0,0,0.3);
    }
    #change {
        display: none;
    }
    #global-nav {
        position: absolute;
        /* 開いてないときは画面外に配置 */
        top: -580px;
        background: rgba(0,0,0,0.5);
        width: 100%;
        text-align: center;
        padding: 0;
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
    }
    #global-nav ul {
        list-style: none;
        position: static;
        right: 0;
        bottom: 0;
        font-size: 14px;
    }
    #global-nav ul li {
        float: none;
        position: static;
    }
    #top-head #global-nav ul li a,
    #top-head.fixed #global-nav ul li a {
        width: 100%;
        display: block;
        color: #fff;
        font-size: 18px;
        line-height: 100px;
    }
    #nav-toggle {
        display: block;
    }
    /* #nav-toggle 切り替えアニメーション */
    .open #nav-toggle span:nth-child(1) {
        top: 11px;
        -webkit-transform: rotate(315deg);
        -moz-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    .open #nav-toggle span:nth-child(2) {
        width: 0;
        left: 50%;
    }
    .open #nav-toggle span:nth-child(3) {
        top: 11px;
        -webkit-transform: rotate(-315deg);
        -moz-transform: rotate(-315deg);
        transform: rotate(-315deg);
    }
    /* #global-nav スライドアニメーション */
    .open #global-nav {
        /* #global-nav top + #mobile-head height */
        -moz-transform: translateY(672px);
        -webkit-transform: translateY(672px);
        transform: translateY(672px);
    }

/* Effect1
 *************************************** */
/* 擬似要素の共通スタイル */
    .change-border01::after,
    .change-border01::before,
    .change-border01__inner::after,
    .change-border01__inner::before {
        background-color: #3498db;
        content: '';
        display: block;
        position: absolute;
        z-index: 10;
        transition: all .3s ease;
        -webkit-transition: all .3s ease;
    }
/* 左上へ配置 */
    .change-border01::after {
        height: 1px;
        left: -1px;
        top: -1px;
        width: 0px;
    }
/* 右下へ配置 */
    .change-border01::before {
        bottom: -1px;
        height: 1px;
        right: -1px;
        width: 0px;
    }
/* 左下へ配置 */
    .change-border01__inner::after {
        bottom: -1px;
        height: 0px;
        left: -1px;
        width: 1px;
    }
/* 右下へ配置 */
    .change-border01__inner::before {
        height: 0px;
        right: -1px;
        top: -1px;
        width: 1px;
    }

/* hover */
    button01 {
        display: inline-block;
        color: #3498db;
        text-decoration: none;
    }
    .button01 {
        border: 1px solid rgba(0,0,0,0.1);
        position: relative;
    }
    .change-border01:hover::after,
    .change-border01:hover::before {
        width: 100%;
        width: calc(100% + 1px);
    }
    .change-border01:hover .change-border01__inner::after,
    .change-border01:hover .change-border01__inner::before {
        height: 100%;
        height: calc(100% + 1px);
    } 
    .change-border01__inner {
        -webkit-transition: 0.4s;
        -moz-transition: 0.4s;
        -o-transition: 0.4s;
        -ms-transition: 0.4s;
        transition: 0.4s; 
        display: inline-block;
        text-align: center;
        width: 100%;       
    }
    .change-border01__inner:hover {
        color: #00b1c5;
        background: rgba(255, 255, 255, 0.9);
    }   

}

@media screen and (max-width:730px){
  .logo-area {
      width: 100%;
   }
}




<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>採用情報</title>
<link rel="shortcut icon" href="favicon.ico">
        <link rel="stylesheet" type="text/css" href="css/style.css">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="js/jquery.placeholder.min.js"></script>
        <script src="js/css_browser_selector.js" type="text/javascript"></script>
        <script src="js/jquery.backgroundSize.js" type="text/javascript"></script>
		<script src="js/matchMedia.js"></script>

</head>
<body>
<header id="top-head">
<div class="top-inner">
  <div id="nav-toggle">
    <div>
         <span></span>
         <span></span>
         <span></span>
    </div>
  </div>
<div id="header">
  <div id="header-inner">
    <h1><span class="fonts-en"><span class="fonts-en right-space"></span></h1>
    <div class="logo-area">
      <img src="img/logo01.png">
      <nav id="global-nav">
        <ul>
          <li><a href="" class="button01 change-border01"><span class="change-border01__inner">トップ</span></a></li>
          <li><a href="" class="button01 change-border01"><span class="change-border01__inner">プロフィール</span></a></li>
          <li><a href="" class="button01 change-border01"><span class="change-border01__inner">稽古風景</span></a></li>
          <li><a href="" class="button01 change-border01"><span class="change-border01__inner">日時場所</span></a></li>
          <li><a href="" class="button01 change-border01"><span class="change-border01__inner">お知らせ</span></a></li>
          <li><a href="" class="button01 change-border01"><span class="change-border01__inner">会員募集</span></a></li>          
        </ul>
      </nav>
    </div><!--.logo-area-->
  </div><!--#header-inner-->
</div><!--#header-->
<div id="change">
  <div class="inner">
    <div class="sticky-logo-area">
      <img src="img/logo01.png">
      <nav id="global-nav">
        <ul>
          <li><a href="">トップ</a></li>
          <li><a href="">プロフィール</a></li>
          <li><a href="">稽古風景</a></li>
          <li><a href="">日時場所</a></li>
          <li><a href="">お知らせ</a></li>
          <li><a href="">会員募集</a></li>
        </ul></nav>
    </div><!--.sticky-logo-area-->
  </div><!-- /inner -->
</div><!-- /change -->
</div><!--.top-inner-->
</header><!--#top-inner-->

<!--途中省略-->

<script>

$(function() {
  // スティッキーヘッダー
  var $window = $(window),  // ウィンドウを指定
      $content = $("#contentWrapper"),  // #contentWrapper部分
      $chenge = $("#change");  // #change部分
 
  var sticky = false;
 
  $window.on("scroll", function (){   // ※matchMedia.jsを使うとIE9でもmathcMedia()が使えるようです。
    if(window.matchMedia('screen and (min-width:810px)').matches){
       var topContent = $content.offset().top;     // #contentの位置を取得
       if ($window.scrollTop() > topContent){　 // scroll位置が#contentの上にある場合
            if (sticky === false){
                $chenge.slideDown();　// #change部分が上がる。
                sticky = true;
            }
       } else {
            if (sticky === true){　 // scroll位置が下にある場合
                $chenge.slideUp();  // #change部分が降りてくる。
                sticky = false;
            }
       }
    }else{
       $chenge.slideUp();
    }
  });

  $window.resize(function() {
    if(!window.matchMedia('screen and (min-width:810px)').matches){
      $chenge.slideUp();
    }
  });
  $window.trigger("scroll");

  $(function(){
    // スマホサイズ時のハンバーガーメニューのアイコンをクリックした時
    $('#nav-toggle').click(function(){
        $('#top-head').toggleClass('open');
    });
  });
  
});
    
    
</script>

three.htmlの<script>の中で、

var topContent = $content.offset().top; // #contentの位置を取得

となっている部分は60行目に記述されてますが、55行目に記述すると毎回取得される値が変わってしまうようです。

変数の中身を確認する方法として、ブラウザのデベロッパーツールの『ステップ実行』というものを使うと値が取得できてるか確認できます。

今回の例だと、『three.html』をブラウザで表示してる状態で、画面上で右クリックをして『検証』を選択し、Chromeのデベロッパーツールを表示させます。

f:id:ts0818:20160403185901j:plain

Chromeのデベロッパーツールの『Sources』を選択し、チェックしたいjavascriptが記述されてるファイル（今回はthree.html）を選択したら、適当な行番号をクリックします（ブレークポイントの作成）。青く表示されたら『F5』キーなどを押して更新します。 

f:id:ts0818:20160326102526j:plain

ブラウザの画面が薄暗くなったら、ブレークポイントまでで処理が止まります。（『Paurse in debugger』とブラウザ画面に表示されます。）

この状態で、変数の部分にカーソルを載せると変数の中身が見れます。（今回はtopContentの値が知りたいので、topContentの上にカーソルを載せます。『461.59375』という数値が表示されました。） 

f:id:ts0818:20160326102527j:plain

『Paurse in debugger』を解除したい時は、選択していた行番号の部分をクリックすると、青いチェック（ブレークポイント）が外れるので、その状態で『F5』キーなどを押してブラウザを更新すればデバッグモードから通常の状態に戻れます。

f:id:ts0818:20160326102529j:plain

変数などは、できるだけ関数の中に閉じ込めることで変数の汚染（むやみやたらに変更される）を防ぐことができるようです。

$content.offset( ).top;を$window.on("scrool", function( ){ });の中に内包したことで、ウインドウ画面がスクロールされた時に、$content.offset( ).top;の値が取得されることになるので、$content.offset( ).top;で取得される値が常に同じ値になるようです。

$(function() {
  // スティッキーヘッダー
  var $window = $(window),  // ウィンドウを指定
      $content = $("#contentWrapper"),  // #contentWrapper部分
      $chenge = $("#change");  // #change部分
 
  var sticky = false;
 
  $window.on("scroll", function (){   // ※matchMedia.jsを使うとIE9でもmathcMedia()が使えるようです。
    if(window.matchMedia('screen and (min-width:810px)').matches){
       var topContent = $content.offset().top;    // #contentの位置を取得
       if ($window.scrollTop() > topContent){　// scroll位置が#contentの上にある場合
            if (sticky === false){
                $chenge.slideDown();　 // #change部分が上がる。
                sticky = true;
            }
       } else {
            if (sticky === true){　    // scroll位置が下にある場合
                $chenge.slideUp();     // #change部分が降りてくる。
                sticky = false;
            }
       }
    }else{
       $chenge.slideUp();
    }
  });

  $window.resize(function() {
    if(!window.matchMedia('screen and (min-width:810px)').matches){
      $chenge.slideUp();
    }
  });
  $window.trigger("scroll");

  $(function(){
    // スマホサイズ時のハンバーガーメニューのアイコンをクリックした時
    $('#nav-toggle').click(function(){
        $('#top-head').toggleClass('open');
    });
  });
  
});

まだまだ、ブレークポイントをどこに指定したほうが良いかなどの理解が曖昧な今日この頃です。

 

⇩  chromeデベロッパーツールの使い方について詳しくは下記サイトへ

・chromeデベロッパーツールでjavascriptのデバッグをする -node.jsもあるでよ- - tumblr

・Chrome デベロッパーツールでのJavaScriptデバッグ方法 | Web Tips

・動的に読み込まれるjavascriptをデバッグする方法

今回はこのへんで。