つい数記事前にCSS DigというCSSデバッグツールをご紹介したのですが、やはりChromeのデベロッパーツールは充実していますね。本日は基本的な使い方ではなく、もっと便利に使うためのTipsをご紹介します。
(CSS Digに関するページはこちら)
※ キーはMacとなっています。Windowsユーザーの方Command
をCtrl
に読み替えてください。
1. Command+Pで開きたいファイルをサーチブラウジング
2. Command + Opt + Fでソースコード内検索
3. Ctrl + G で行番号指定したところまでいく
4. Sublime Textみたいに複数行にカーソルを置いて編集
commandを押しながらカーソルを複数箇所におけます!
(ちなみにcommand+Dで同じ文字列を選択していくこともできる!)
5. minifyされても整形できる
このようなJSでも。
ぽちっと押すと。
見やすく!
まとめ
いかがでしょうか?
デベロッパーツールを使いこなすことは最も必要なスキルの一つだと思っているので、是非こういった便利な機能は把握しておきたいですね!
そのほかにもスマフォの傾きをシミュレートさせたり、カラーピッカーもついていたりと、とても充実したツールが揃っているので是非マスターしてみてください!
参考サイト:
15 Must-Know Chrome DevTools Tips and Tricks | Tutorialzine
Author Profile
Latest entries
- 2018.04.16プロフェッショナルインタビュー【企業編】広島から全国、そして世界を目指す!株式会社MIRAIのハイレイヤー分析
- 2016.10.21プロフェッショナルインタビュー【企業編】【後編】「夢があればブラックじゃない」福岡の技術集団オルターブースはベーシスト小島氏と愉快な仲間たち
- 2016.10.18プロフェッショナルインタビュー【企業編】【前編】福岡の技術集団オルターブース。楽曲を作れると思ってCOBOLを書いていたベーシスト小島氏と愉快な仲間たち
- 2016.09.02プロフェッショナルインタビュー【フリーランス編】【後編】代理店の仕事は気が楽だけど、それでも直接受ける案件が大事。JUSO Coworkingオーナー深沢さんの仕事