2014年09月19日

Google Chrome でページ上の任意の要素(オブジェクト)の詳細を表示する方法

▼ クリックすると、GIF アニメーション画像が画面中央に大きく表示されます

( 最初の停止は 4秒で、途中の文字説明は4秒停止します。最後6秒停止して元へ戻ります )

現行のブラウザでは、皆 console.log と console.dir が実行できますが、Google Chrome でオブジェクトを表示したい場合3通りの方法があります。

1) $("セレクタ")
2) console.log( オブジェクト )
3) dir( オブジェクト )

1) は、コマンドライン API のメソッドで、jQuery が読み込まれていなくても同じ記述でオブジェクトを参照できます。
1) と 2) は同じ結果の場合もあれば違う場合もあるので目的に応じて利用するといいと思います。
3) は、console.dir の別名で、オブシェクトの情報を階層構造で全て表示します。

これらを使い、ページ上のインスペクトされた任意の要素を表示する手順です。

1) 要素を選択( 虫眼鏡アイコンでインスペクトモードに入って選択 )
2) Elements タブで対象としたいオブジェクトを確定させる
3) 右クリックして Copy CSS path でセレクタ文字列を取得
4) $("セレクタ文字列") で参照します



posted by at 2014-09-19 20:19 | ブラウザ | このブログの読者になる | 更新情報をチェックする

Google Chrome のデベロッパーツールで要素の追加をリアルタイムで表示テストする

▼ クリックすると、GIF アニメーション画像が画面中央に大きく表示されます

( 最初の停止は 6秒で、途中の文字説明は4秒停止します。最後6秒停止して元へ戻ります )

Google Chrome のデベロッパーツールを F12 で開いて、このブログのメニューの追加をテストしています。メニューは LI要素が一つの単位なので、既存のメニューユニットをクリップボードにコピーしてから、編集モードに移行して今あるメニューの後ろに一つ追加し、テキスト表示を変更してうまく表示されるかをテストしています。




▼ 編集モード



Google Chrome のデベロッパーツールでは、このような大きなエディタを開かなくても、属性を直接ダブルクリックすれば、編集可能な状態になります。

また、そのような状態で属性全体を全てクリアすると、属性単位で削除する事も可能です。以下は、属性側をダブルクリックしたので、属性が選択されて編集可能になっています。



値をダブルクリックすると、値が選択されます。但し、属性の値が URL の場合はクリックするとウインドウを開いてしまうので、属性を選択してからカーソルを移動させるか、前述の大きなエディタを使うといいと思います。



タグ:Google Chrome
posted by at 2014-09-19 13:09 | ブラウザ | このブログの読者になる | 更新情報をチェックする