Chromeでデバッグ！～デベロッパーツールでCSSとJSをいじる～

CSSを編集する

CSSは、Elementsのタブの右側で編集することができます。

編集する部分を選択する

前回同様、虫眼鏡を使って編集する部分を選択しましょう。

ここで、前回は説明しなかった、青・緑・オレンジの表示について簡単にご説明いたします。

青い部分

パディングとマージンを除いたコンテンツ本来の大きさです

緑部分

パディング部分を示します

オレンジ部分

マージン部分を示します

適用されているCSSを確認する

CSSを編集できる部分には、現在選択したコンテンツに適用されているCSSが表示されています。適用されているCSSは、4種類あります。

1. タグのstyle属性に記述されているCSS
2. CSSファイルに記述されているCSS
3. ブラウザのデフォルトのスタイル
4. Inspector Stylesheetに記述されたスタイル(後で解説)

CSSファイルに記述されているCSSについて

CSSファイルに記述されているCSSには、ファイル名と行が右上にあります。

このファイル名と行をクリックすると、Sourcesに移動し、CSSファイルのソースを確認・直接編集することができます。

Inspector Stylesheetに記述されたスタイル

Inspector Stylesheetは、最初は存在しません。タグのstyle属性に記述されているCSSの枠の右側にある「＋」をクリックすることにより初めて追加されます。

※ ページを更新したり、画面を閉じると内容も全てなくなりますので、気を付けてください。

このInspector Stylesheetは、新しくCSSファイルを増やしたような形になります。たとえば、タグのStyle属性には、:beforeや:afterなどの疑似要素は追加できませんが、inspector-stylesheetには記述できます。

JavaScriptを実行する

Chromeでデバッグする上で、最も便利なのは、簡単にJavaScriptが実行できることだと思います。少し、初心者向けからは外れてしまいますが、いくつかの実践例もご紹介いたします。

コンソール画面を開く

JavaScriptを実行するには、コンソール画面に移動します。

アラートを出してみよう

さっそく、ページ内でアラートを出してみましょう。

アラートを出すには、alert() を使います。

alert('Hello World');

JSをコンソール画面の「＞」の部分にコピー&ペーストし、Enterキーを押すとJSが実行されます。

※実行せずに改行するには、Shiftキーを押しながらEnterキーを押します。

コンソール画面にいろいろ出力してみる

コンソール画面は、JSを書く以外にも実行したときの実行結果やエラー・警告などが表示されます。

JavaScriptがなぜか動いていない場合は、コンソール画面を確認して、エラーが表示されていないか確認してみましょう。

※404エラーについても表示されます。ページをUPした場合、読み込めてないコンテンツはないかもここで確認できます。

コンソール画面にテキストを出力させる（console.log()について）

console.log()を使うと、コンソール画面の出力結果にいろいろなものを出力させることができます。

console.log('Hello World');

jQueryが読み込まれているページでは、jQueryも実行できます。下記は、jQueryでcopyRightBlockというクラスのテキストを取得し、console.log()で出力しています。

console.log($('.copyRightBlock').text());

console.log()は、JavaScriptのデバッグを行う時に大変活躍します。

console.logを使った簡単なデバッグ例

コンソール画面上だけではなく、JavaScriptのファイル内にもconsole.log()は使用できます。そこで、今回は、下記のソースを少しデバッグしたいと思います。

var name="webcrew";//webcrewというテキストの入った変数を作成
var contents = $('
').text(name);//newContentsというクラスの入ったdivのテキストに先ほどのnameを追加
$('body').apend(contents);//bodyに追加

さて、これをそのまま実行すると、エラーが出てしまって実行されません。下記の文が出てくると思います。

Uncaught TypeError: undefined is not a function

では、このエラーがどこの部分のエラーなのかを、console.log()を使って調べてみましょう。

var name="webcrew";
console.log('1行目 OK');
var contents = $('
').text(name);
console.log('2行目 OK');
$('body').apend(contents);
console.log('3行目 OK');

書くのはめんどくさいのですが、全部の行の後にconsole.log()でここはOKだよ！という文を出力させてみました。実行結果は、以下の通りになりました。

1行目 OK
2行目 OK
Uncaught TypeError: undefined is not a function

実行結果を見ると、3行目のOKが出ていないので、3行目に問題があることがわかりました！

このようにして、行の間にconsole.logを出させることにより、どこで止まっているか？ということがわかりやすくなりました。ちなみに、動くコードはこちら。

var name="webcrew";
console.log('1行目 OK');
var contents = $('
').text(name);
console.log('2行目 OK');
$('body').append(contents);
console.log('3行目 OK');

「append」となるべき部分が、「apend」となっている、というエラーでした。

console.logを使ったちょいむず？デバッグ例

bodyに「newClass」というクラスをつけて、 そのクラスがあるときに、「newClassがあるよ！」というアラートを出したいとします。

$('body').addClass('newClass'); // クラスをbodyに付与
if( $('body').hasClass('neClass') ) {
    alert('newClassがあるよ！');
}

が、これを実行してもアラートはいつまでも出ません。エラーも出ません。さぁ、困った!

if文の中身が実行されるには、条件式（ifの直後の括弧内）がtrueになっていないといけません。そこで、console.log() でif文の条件式の内容を書きだしてif文の条件式が何を返しているのかを見てみます。

※条件式にfalseやundefinedなどコンテンツが存在しませんよ、という内容以外のコンテンツ（文字列など）が入っていると、それはtrueとみなされます

$('body').addClass('newClass');
console.log($('body').hasClass('neClass')); // ここで条件式を確認
if( $('body').hasClass('neClass') ) {
    alert('newClassがあるよ！');
}

実行した結果は、このようになります。

false

$('body').hasClass('neClass') が false を返していることがわかりました。
falseを返しているということは、newClassが本当にないか、条件文が間違っているかのどちらかが考えられます。
良く見ると、「newClass」となっているべきところが、「neClass」となってしまっていました。

エラー内容が良くわからない・・・
エラーは出てないけど、思った通りに動かない・・・
という方は、console.log()で色々確認してみましょう！

まとめ

• デベロッパーツールでは、CSSの編集ができる
• 青（コンテンツ）・緑（パディング）・オレンジ（マージン）でコンテンツを色分けしてくれる
• CSSには、4種類ある
  ・タグのstyle属性に記述されているCSS
  ・CSSファイルに記述されているCSS
  ・ブラウザのデフォルトのスタイル
  ・Inspector Stylesheetに記述されたスタイル
• コンソール画面からJavaScriptを実行する
• console.log()でコンソール画面にいろいろ出力できる