- 開発
READ MORE
BPSの福岡拠点として一緒にお仕事させて頂いてます、株式会社ウイングドアの馬場です。
今回は、Web開発で日々お世話になっているChrome DevToolsの使い方で、最近知ったことをまとめてみました。
Chrome DevToolsは、Chromeに組み込まれたウェブ作成およびデバッグツールのセットです。
「デベロッパーツール」とか「開発者ツール」と呼ばれたりしますね。
これを起動しない日はほとんどないと言っていいくらいです。
時々見た目の変化に気づいて「あっ、更新されたんだな」と思っています。
この記事の執筆時、私の環境では以下のバージョンでした。
chrome://version/
と入力するショートカットキーから起動できます。
Macだとcommand + option + i
。
いつもこのように起動していたのですが、ちょっと便利な方法があることに気づきました。
まず起動前の状態で、検証したい内容を選択し、右クリックで「検証」を選択して起動させます。
すると、すでに該当の要素が選択された状態になってくれます。
おぉ〜、親切ですね。
ここで生成されたhtmlを確認することができます。
ダブルクリックで編集可能になるので、スタイルを試すのにも使えます。
選択している要素の階層が深かった場合、これまでは ▶︎
をクリックして展開していたのですが、
キーボード操作でも展開できることを知りました。
右矢印
左矢印
.cls
でクラスを追加するスタイルを編集したい場合はelementを単純に編集していました。
(でも、class="hoge"
とか書くのが面倒。。。)
簡単な方法がありました。
Stylesタブで、.cls
をクリックするとクラスを追加できます。
さらに +
をクリックすると、選択している要素を設定した上ですぐにスタイルが書けます。
それから、検索について。
今見ているファイルから検索するショートカットは
command + f
なのですが、一気に検索する方法もあります。
command + option + f
今回はChrome DevToolsの数ある機能のうち、Elementsタブについて知らなかったことをまとめてみました。
初めて見たときはとっつきにくい感じがしたのですが、いろいろ便利でおもしろいです。
株式会社ウイングドアでは、Ruby on RailsやPHPを活用したwebサービス、webサイト制作を中心に、
スマホアプリや業務系システムなど様々なシステム開発を承っています。