ＳＱＬの窓
<< jQuery/JavaScript … | TOP | IE の占める割合の… >>

2014年06月28日


Google Chrome : デベロッパーツールの table コマンドで、オプジェクトのプロパティをテーブル表示して Excel に貼り付ける

 
デベロッパーツールのコンソールだけで動く Command Line API というものがあります。

※ table コマンドは、console.table メソッドとしても利用できるので、ページ内からも実行できます
※ ここで使用する処理は、Firebug では動作しました。


(注意) ページに同名のメソッドがあると、そちらが優先されます。jQuery があると、$ は使用できないので注意して下さい。( 逆にその場合は jQuery を使えばいいのですが )

$0 - $4 は、Elemnts タブで選択したオブジェクトを履歴として記憶しています。( $0 が最新 )
$_ は、直前の処理結果の内容が記憶されています。
  1. $_
  2. $0 - $4
  3. $(selector)
  4. $$(selector)
  5. $x(path)
  6. clear()
  7. copy(object)
  8. debug(function)
  9. dir(object)
  10. dirxml(object)
  11. inspect(object/function)
  12. getEventListeners(object)
  13. keys(object)
  14. monitor(function)
  15. monitorEvents(object[, events])
  16. profile([name])
  17. profileEnd([name])
  18. table(data[, columns])
  19. undebug(function)
  20. unmonitor(function)
  21. unmonitorEvents(object[, events])
  22. values(object) 
このコマンドは、オブジェクトのプロパティの一覧を縦の左端に置いて、列の内容は全てのプロバティにある全てのプロパティになるので、名前が同じプロバティは同じ列に表示されますが、無い部分は未定義として表示されるため、表示前に適当な構造にしておく必要があります。

▼ 単にオブジェクトのコレクションだと収拾がつかない



そこで、以下のようにコマンドラインで実行すると、意図した一覧を取得する事ができます。

var a = {};var b = $$("img"); for( i=0; i< b.length; i++ ){ a[i] = {}; a[i]["src"] = b[i].src; };table(a)

このコマンドをフリーの画像素材を提供している『足成』で実行してみました。



この結果をブラウザでドラッグして選択してコピーして Excel にテーブル形式で貼り付ける事ができます。



※ 列は、必要に応じて増やす事が可能です。



一行で記述しなくても、普通に以下のように記述して貼り付けて実行する事もできます。

var a = {};
var b = $$("img");
for( i=0; i< b.length; i++ ){
	a[i] = {};
	a[i]["src"] = b[i].src;
	a[i]["幅"] = b[i].width;
}
table(a)


$$ は、document.querySelectorAll() と同じであり、jQuery にも無いので使用しています。for の 一般的なループを使用しているのは、for in だとプロパティの一覧になる為、length 等のコレクションそのもののプロパティも対象になるので使用していません。

jQuery が使えるのであれば、以下のようにも記述できます

var a = {};
$("img").each( function(idx){
	a[idx] = {};
	a[idx]["src"] = this.src;
	a[idx]["幅"] = this.width;
});
table(a);


コンソール側では無く、デバッグの為にページのスクリプトとして記述する場合は以下のようになります。
(画像の場合は全て読み込まれていない場合は正しいサイズは取得できていない場合があります)

var a = {};
var b = document.querySelectorAll("img");
for( i=0; i< b.length; i++ ){
	a[i] = {};
	a[i]["src"] = b[i].src;
	a[i]["幅"] = b[i].width;
	a[i]["高さ"] = b[i].height;
}
console.table(a)
【Google Chromeの最新記事】
posted by lightbox at 2014-06-28 13:44 | Google Chrome | このブログの読者になる | 更新情報をチェックする



Powered by Seesaa
container 終わり



✅ フリーフォントで簡単ロゴ作成
✅ フリーフォントでボタン素材作成
✅ フリーフォントで吹き出し画像作成
✅ フリーフォントではんこ画像作成
✅ ほぼ自由に利用できるフリーフォント
✅ フリーフォントの書体見本とサンプル
✅ 画像を大きく見る為のウインドウを開くボタンの作成
✅ CSS ドロップシャドウの参考デモ
✅ イラストAC
✅ ぱくたそ
✅ 写真素材 足成
✅ フリーフォント一覧
✅ utf8 文字ツール
右サイド 終わり
base 終わり