GoogleChromeのデベロッパーツールのconsoleオブジェクト

googleChromeのデベロッパーツール、特にコンソールはとても便利です。

v17でのconsoleオブジェクトについてまとめました。

consoleオブジェクトの以下21個のメソッドについてまとめました。

  • assert
  • count
  • debug
  • dir
  • dirxml
  • error
  • group
  • groupCollapsed
  • groupEnd
  • info
  • log
  • markTimeline
  • memory
  • profile
  • profileEnd
  • profiles
  • time
  • timeEnd
  • timeStamp
  • trace
  • warn

以下のサイトを参考にしました。

assert

第一引数がtrueの時は何も出力しません。falseの時はエラー表示と共に残りの引数を出力します。

debug dirxml info log warn error

黄色マークが付くwarnと赤マークが付き呼び出し元が表示されるerror以外は違いが見つかりませんでした。

元ネタと思われるFirebugでは違いがあるのですが、GoogleChromeでは上位の機能が取り込まれているようです。

引数が一つの場合は単純にそれを表示します。



文字列の他に数値、配列、オブジェクト、DOMオブジェクトも表示する事が出来ます。



また、これらの命令は引数が二つ以上、かつ第一引数に”%s”の様な単語があると、残りの引数を順番に当てはめます。

Firebugのドキュメントによるとパターンは%s、%d、%i、%f、%o、%cの六種類の様ですが、GoogleChromeにおいてはいくつかのパターンが同じ動作をします。

%d、%i、%fは数字の表記方法を区別するはずですが、全て%sの文字列の表記になります。

%oはクリックで展開する事も出来ます。

dir

上記のdebug等は複数の引数を受け取ることが出来ましたが、dirは一つの引数を受け取るだけです。

配列を[“a”,”b”]と表示するdebug等に比べ、配列も折りたたみで表示をしてprototypeも表示してくれるのが一番大きな変更点です。

一つの変数をしっかり確認したい時に使うと良いと思います。

trace

今までは引数に渡された値を詳しく知る為の関数でしたが、consoleの機能はそれだけではありません。

console.trace();は呼び出された時点での呼び出し元を表示します。画像ではデベロッパーツールから呼び出されたのでInjecedScriptが表示されていますが、webページ内から呼び出した場合は(anonymous function)が一番下になります。console.error関数でも同じ物を呼び出すことが出来ます。値の確認も同時に行いたい時はerrorと使いわけると良いと思います。

count

行ごとに呼び出された回数を表示します。引数は無くても構いません。関数の頭に書いておいて、何回関数が呼ばれたか・・・を調べるのに使えそうです。



コンソール画面では一度実行した後でも再度同じコードを実行すると値が引き継がれます

MemoryInfo

MemoryInfoは関数ではなくプロパティです。

名前からメモリの情報をしる事が出来ると思っていたのですが、現状はgoogleMapでもニコニコ動画でも全てゼロのままでした。

また、関数ではないので、コンソールではなくhtml中から呼び出す時はconsole.dir(console.MemoryInfo);と呼び出す必要があります。

markTimeline timeStamp

console画面ではなくtimeline画面の為の関数です。こまめにこの関数を書いておけば、重い処理の原因特定をより容易に行う事が出来るでしょう。

この二つの関数も違いは分かりませんでした。

time timeEnd

二つの関数はセットで使います。timeが呼び出されてからtimeEndが呼び出されるまでのミリ秒を表示します。

引数にタイトルを付けて、同じタイトル同士で紐付けされます。

profile profileEnd profiles

これらの関数はセットで使います。timeと似ていますが、経過時間より細かい情報を調べることが出来ます。

また、timeはtimeEndで結果が呼び出せましたが、profileはprofilesプロパティで結果を調べる必要があります。

group groupCollapsed groupEnd

コンソール画面にインデント構造を作ります。groupとgroupCollapsedでインデントを下げる。groupEndで上げます。

groupとgroupCollapsedの違いは初期状態で開いているか閉じているかです。



以上がconsoleオブジェクトの機能です。

今まで処理時間を調べる時は毎回書いていたのですが、time関数で簡単に測定できそうです。

また最後に、v17からコンソールに単語補完機能が付きました。

現在のファイルを解析してとまではいきませんが、組み込み関数名の入力は短縮化されそうです。

GoogleChromeで完璧なAdblockが来る日も近いであろう

GoogleChromeは拡張から通信を操作出来ないので、FireFoxの様な広告を読み込まない拡張を作るのは不可能でした。現時点でのGoogleChrome用Adblockはロード後非表示にする事しか出来ません。ですが、GoogleChromeの新しい拡張機能で任意の通信を切断する事が出来るかも知れません。実際に任意の通信を切断する拡張機能を付せて紹介します。 続きを読む GoogleChromeで完璧なAdblockが来る日も近いであろう

GoogleChromはスタンドアロンのダウンローダーを作る事が出来るのか?

Pixivとかニコニコ動画の動画をブラウザ、この場合はGoogleChrome13だけで保存したい。

探せば上記のサイト対応のダウンローダーの拡張機能はいくつか見つかりますが、どれもこれも作者のサーバーと通信をして、そこからダウンロードしています。つまり作者のサーバーがダウンしたら使えなくなってしまう。

なんで作者の対応サイト(Pixiv、ニコニコ動画)のサーバーのデータを拡張機能の作者のサーバーからダウンロードする必要があるかと言うと、対応サイトからブラウザに送信されるデータは「ブラウザ内で表示してね」と指示されているから。

その指示内容を「これはファイルとして保存してね」と書き換える作業が必要なんだけど、そこはchromeの拡張機能からはいじくれない場所だから、サーバーでchromeの拡張でない、指示内容を書き換え出来る環境で書き換えている。

まあその指示内容ってのは、つまりレスポンスヘッダな訳で、どうにかしてサーバーから受信したデータに

Content-Disposition: attachment; filename=”画像ファイル.jpg”

を差し込みたい。が、chromeの拡張では出来ない。出来なかった。今までは。

chrome.experimental.webRequest という機能がChromeのベータ版で導入されたらしい。

これはhttpリクエストヘッダ、レスポンスヘッダの取得、書き換えが可能という今までの拡張では不可能だった所に手が届く待ちに待った機能!だと思ってた。

WebRequest API – Google Chrome Extensions – Google Code

リファレンスによると、取得できるイベントは

  • onAuthRequired
  • onBeforeRedirect
  • onBeforeRequest
  • onBeforeSendHeaders
  • onCompleted
  • onErrorOccurred
  • onResponseStarted
  • onSendHeaders

ほうほう、なんか送信前のイベントが多いけど、狙っていたレスポンス開始時のコードもあるじゃないか

と、ここまで喜んでいたんだけど、よくみたらレスポンス開始時は取得だけで書き換え出来ないんですってね奥さん

MAJI超がっかりですよ。これが書き換えできれば、自由にヘッダを追加して、任意のファイル名でダウンロード可能になるのに。

気になるのはやっぱり文字コードかな。詳しく調べてないけど、このヘッダーの文字コードは何かに合わせなくていいのか とか。

ファイル保存時は決まったフォルダに任意のファイル名しか指定出来ないけど、これはちょっときつい。

自由自在どこのフォルダにもアクセスできたら超危険なのは流石に理解してるから、せめて指定したフォルダの中ならサブフォルダも作れるようにして欲しい。

そうすりゃダウンロードフォルダ/pixiv/ユーザーA/作品名/漫画のページ1,2,3・・・と整理出来るのに。

とりあえずレスポンスヘッダの書き換えが出来たら俺が一番最初にニコニコのダウンローダーをつくろっと