この記事はTomek Sułkowskiさんによる
フロントエンドエンジニア向けアドベントカレンダーの翻訳記事です。
とても勉強になったので許可を得て翻訳させていただきました。元記事はこちら。
休暇まであと24日です。私はこれからDevToolをより効果的に、そしてもっと楽しく使うためのコツを紹介する短い記事を書いていきたいと思います。昨日までで計11個なので今日は12番から、Elementsタブのテーマで始めます。
12. “h”で隠れる
Elementsタブで選択した要素は"h"と打つだけで隠すことができます。"h"ともう一度打つと再度表示させることができます。これは、例えばスクリーンショットを撮りたいけれども、取扱いに気をつけなければいけないデータがうつっているので隠したいといった場合に非常に便利です。
13. 要素をドラッグ&ドロップする
htmlの1部がDOMツリーの別の場所でどのように見えるか確認したい時は、ドラッグ&ドロップしてみてください。パソコンで色々なものをどこへでもドラッグ&ドロップできるのと同じ要領です（´-`)
14. ...もしくはコントロールを使いましょう！
現在選択している要素をDOM構造の中で少し上に動かしたり下に動かしたりしたい時は、ドラッグ&ドロップのかわりに[ctrl] + [⬆] / [ctrl] + [⬇]([⌘] + [⬆]/ Macでは[⌘] + [⬇])を使うこともできます。
15. 基本的にはエディタです
ここまででドラッグアンドドロップ、編集、コピーが(もちろん[ctrl]+[v]でペーストも)出来るようになりましたね。ですから他のテキスト/ペイントエディタでも標準的に使えるコマンドで操作ができると聞いてもさほど驚かないでしょう。
例えば、1度Elementsタブのhtml構造をぐちゃぐちゃにしたとして、[ctrl] + [z] (Macでは[⌘] + [z])でどんな変更も元に戻せますし、[ctrl] + [shift] + [z]でやり直しもできます。
Elementsパネルは楽しいですね！今日は4つのtipsを駆け抜けてきました。
それではまた明日おあいしましょう
ここからはいつも通り。なにか新しいことを学べたらぜひ
→ もっと多くの人の目に止まるように拍手👏ボタンをお願いします！
→ 他の投稿も見逃さないように**Twitter (@sulco)をフォロー**してください！