tweeeetyのぶろぐ的めも

アウトプットが少なかったダメな自分をアウトプット<br>＼(＾o＾)／

【chrome extensions】Google Chrome拡張機能の作り方② - デバッグの方法(console.log)

chrome extensions

はじめに

前回は簡単なひな形とともにchrome extensionsの導入を説明してみました。
【chrome extensions】Google Chrome拡張機能の作り方① - ひな形も置いておく

manifest.jsonやbackground.jsなどの機能については
他サイトでも結構説明がありますが、デバッグ方法が載ってるところが意外に少ないです。

最初、console.logいれてみたけどそもそもどこに出んだよ！って 自分も思ったのでそんな自分のような人のためにメモ

おしながき

  1. background.jsをデバッグする
  2. content.jsをデバッグする
  3. popup.html(js)をデバッグする

これらがデバッグできればおおよそ進められるかと思います。

前提

前提として前回作ったサンプル一式を使います。

サンプル

https://github.com/tweeeety/chrome-extensions-sample

このサンプルにはあらかじめconsole.logが入れてあるので
これを確認できればデバッグできたとします。

また、このextensionsをchromeに読み込んでこんな形で動くところからスタートです。 f:id:tweeeety:20150304223141p:plain

1. background.jsをデバッグする

まずはbackground.jsです。
background.jsはextensionsをchromeに読み込んだり
拡張機能タブ内の作ったextension欄にあるリロードリンクでリロードしたタイミングで走るスクリプトです。

デバッグ
まとめ
  • 読み込まれるタイミング : extension読み込み時、リロード時
  • デバッグ方法：拡張機能タブでバックグラウンド ページリンクをクリック
  • 再読み込みの方法 : リロード

2. content.jsをデバッグする

content.jsは、webコンテンツが読み込まれた際に読み込まれます。
webコンテンツとはyahooなどのwebサイトです。

もしyahooでyahoo.jsというjavascriptを読み込んでいたとすると下記の順番で読み込まれます。

  1. extensionsのcontent.js
  2. yahooのyahoo.js
デバッグ
まとめ
  • 読み込まれるタイミング : webコンテンツ読み込み時
  • デバッグ方法：webコンテンツ開いた状態でCommand + Option + Iキー
  • 再読み込みの方法 : リロード

3. popup.html(js)をデバッグする

最後にpopup.html(js)です。
これはくせ者で最初ぜんぜんわかりませんでした。

デバッグ

  • ポップアップを開いた状態で右クリックします。
    要素の検証というメニューが表示されるのでクリックします。 f:id:tweeeety:20150304230700p:plain

  • するとbackground.jsのデバッグツールや
    Command + Option + Iキーで表示されるデバッグツールとは別に
    さらにデバッグツールが開きます。
    f:id:tweeeety:20150304230707p:plain

こちらではポップアップのElementsやCSSも確認できます。

まとめ
  • 読み込まれるタイミング : ポップアップ開いた時
  • デバッグ方法 : ポップアップを開いた状態で右クリック > 要素の検証
  • 再読み込みの方法 : ファイルの保存(リロードの必要は無い)

参考

いくつかメモったのでこちらも参考に

おわり

今回はデバッグ方法をメモりました。
最初デバッグ方法がわからなくて手間取ったので同じような方の助けになれば！
enjoy!