【Tools】Chromeデベロッパーツールを使いこなすための5つのTips

つい数記事前にCSS DigというCSSデバッグツールをご紹介したのですが、やはりChromeのデベロッパーツールは充実していますね。本日は基本的な使い方ではなく、もっと便利に使うためのTipsをご紹介します。

(CSS Digに関するページはこちら

※ キーはMacとなっています。Windowsユーザーの方CommandCtrlに読み替えてください。

1. Command+Pで開きたいファイルをサーチブラウジング

Screen Shot 2015-04-15 at 15.35.56

2. Command + Opt + Fでソースコード内検索

Screen Shot 2015-04-15 at 15.39.50

3. Ctrl + G で行番号指定したところまでいく

Screen Shot 2015-04-15 at 15.41.46

4. Sublime Textみたいに複数行にカーソルを置いて編集

commandを押しながらカーソルを複数箇所におけます!
(ちなみにcommand+Dで同じ文字列を選択していくこともできる!)
Screen Shot 2015-04-15 at 15.46.16

5. minifyされても整形できる

Screen Shot 2015-04-15 at 15.47.45

このようなJSでも。
Screen_Shot_2015-04-15_at_15_47_50

ぽちっと押すと。
Screen Shot 2015-04-15 at 15.48.00

見やすく!

まとめ

いかがでしょうか?
デベロッパーツールを使いこなすことは最も必要なスキルの一つだと思っているので、是非こういった便利な機能は把握しておきたいですね!

そのほかにもスマフォの傾きをシミュレートさせたり、カラーピッカーもついていたりと、とても充実したツールが揃っているので是非マスターしてみてください!

参考サイト:
15 Must-Know Chrome DevTools Tips and Tricks | Tutorialzine

フォローして続編をチェック

@universionsをフォロー