web編集の際、知っているとちょっと便利な使い方 chromeのデベロッパーツール編

webサイトのcssを修正・編集したい時に、よく使うツールの一つとしてあげられるのが、google Chromeのデベロッパーツールではないでしょうか?


編集したい箇所にカーソルを合わせると、該当する部分のhtmlソースやcssコードが確認でき、そのままweb上で色を変えてみたりスタイルを追加してみたりなどのテスト編集ができる、言わずと知れた機能です。

参考にしたいサイトを調べているとき、改行の全くないソースコードを目にしたことがあるかと思います。
うわ〜ナンジャコリャ〜〜と、ちょっと敬遠しがちですが

ちょっと待ってください!

該当するソースコードを表示している時の左下の {} この部分を押してみてください。

すると一瞬にして、みやすいソースコードに整理整形されました!

これで見やすく編集もしやすくなりましたね!

SNSでもご購読できます。