2014年09月19日

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

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

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

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




▼ 編集モード



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

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



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



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