LoginSignup
0

More than 5 years have passed since last update.

DevTools tips — day 4: Elementsタブ

Posted at

この記事はTomek Sułkowskiさんによる
フロントエンドエンジニア向けアドベントカレンダーの翻訳記事です。
とても勉強になったので許可を得て翻訳させていただきました。元記事はこちら


休暇まであと24日です。私はこれからDevToolをより効果的に、そしてもっと楽しく使うためのコツを紹介する短い記事を書いていきたいと思います。昨日までで計11個なので今日は12番から、Elementsタブのテーマで始めます。

12. “h”で隠れる

Elementsタブで選択した要素は"h"と打つだけで隠すことができます。"h"ともう一度打つと再度表示させることができます。これは、例えばスクリーンショットを撮りたいけれども、取扱いに気をつけなければいけないデータがうつっているので隠したいといった場合に非常に便利です。
13.gif

13. 要素をドラッグ&ドロップする

htmlの1部がDOMツリーの別の場所でどのように見えるか確認したい時は、ドラッグ&ドロップしてみてください。パソコンで色々なものをどこへでもドラッグ&ドロップできるのと同じ要領です(´-`)
14.gif

14. ...もしくはコントロールを使いましょう!

現在選択している要素をDOM構造の中で少し上に動かしたり下に動かしたりしたい時は、ドラッグ&ドロップのかわりに[ctrl] + [⬆] / [ctrl] + [⬇]([⌘] + [⬆]/ Macでは[⌘] + [⬇])を使うこともできます。
15.gif

15. 基本的にはエディタです

ここまででドラッグアンドドロップ、編集、コピーが(もちろん[ctrl]+[v]でペーストも)出来るようになりましたね。ですから他のテキスト/ペイントエディタでも標準的に使えるコマンドで操作ができると聞いてもさほど驚かないでしょう。
例えば、1度Elementsタブのhtml構造をぐちゃぐちゃにしたとして、[ctrl] + [z] (Macでは[⌘] + [z])でどんな変更も元に戻せますし、[ctrl] + [shift] + [z]でやり直しもできます。
16.gif


Elementsパネルは楽しいですね!今日は4つのtipsを駆け抜けてきました。
それではまた明日おあいしましょう:grinning:
ここからはいつも通り。なにか新しいことを学べたらぜひ
→ もっと多くの人の目に止まるように拍手👏ボタンをお願いします!
→ 他の投稿も見逃さないようにTwitter (@sulco)をフォローしてください!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0