※こちらの記事が400はてブ以上ついて、総合とテクノロジーの人気エントリーに入りました！

こんにちは。Kazutaka Shimizuです。
フリーランスとしてPM、エンジニアをやっています。

元々はWebマーケティングのコンサルタントをやっていましたが、独学でWeb開発を勉強してプロダクトを作って起業しました。

最近は創業した会社を離れ、フリーランスとして活動したり、プログラミングを独学した経験をこちらのツイッターで発信しています。

かずたか@プログラミング独学で2社起業 (@kazutaka_dev) | Twitter

みなさんはGoogle Chromeのデベロッパーツールをご存知ですか？

ドットインストールなど一部のプログラミング学習サービスでは、デベロッパーツールのレッスンがあるなど、おそらく全く知らない人はかなり少ないと思います。

しかし、とにかく多機能なため、意外と便利な機能を使ったことがないというプログラミング初心者の方も多いようです。

僕自身、何度か自分のTwitterでこうしたデベロッパーツールの機能について取り上げたのですが、どれも非常に反応がよく、知りませんでした！というコメントを頂きました。

あるHTMLの要素にCSS適用したつもりが、なぜかうまく当たらないこと多々あるかと思います

そんな時はデベロッパーツールのコンソールタブに
$$(‘CSSのセレクタ’);
と入力すると、そのセレクタに該当する要素がブラウザ上で存在するか簡単に確認できるので大変便利ですよー！ pic.twitter.com/VuKqqElB05

— かずたか@プログラミング独学して起業した人 (@kazutaka_dev) April 16, 2019

chromeのデベロッパーツールでの変更を
そのまま保存できるの知ってましたか？

やり方は
1、変更する
2、sourceタブを開く
3、変更したファイルを右クリックし、「save as」

いい感じにレイアウト整えたのに
変更点忘れて反映させられなかったとかよくあるので
ぜひ使ってみてください pic.twitter.com/hrHAl3UNjI

— かずたか@プログラミング独学して起業した人 (@kazutaka_dev) December 29, 2018

基本的な使い方をするだけでもとっても便利なデベロッパーツールですが、こうした意外に知らないけど便利な機能もたくさんあるので、今回はそれについて書いていきたいと思います。

目次
・デベロッパーツールとは？
・意外と知らない便利な機能
　1. ツール上で編集した変更点をファイルに反映させる
　2. ツール上で編集した箇所を表示
　3. セレクタに該当するHTML要素がブラウザ上で存在するかをチェック
　4. 不要なCSSやJavascriptを洗い出し、整理する
　5. Sassの記述箇所をツール上で表示
　6. 擬似セレクタが当たった状態のCSSを確認
　7. 要素に最終的に適用されているcssを確認
　8. エミュレーターのデバイスを追加
　9. 実機で開いたページを解析する
　10. 通信速度を制限してサイトの表示をテスト
　11. 要素に設定されているイベントの一覧を見る
　12.  Javascriptのブレイクポイントを設定
　13. テーマを変更　

※この記事に頂いた感想です

こんなにデベロッパーツールの機能をまとめてくれている記事はなかなかないから、コーダーの人には絶対読んでほしいです！

知らなくてすぐ使えそうだったのは、3番のHTMLにCSSがちゃんと適応できているかチェックできる方法のやつ。

知らない機能がいっぱいありましたhttps://t.co/NhFDbzqIxl

— 東京フリーランス (@Tokyo_FreeIance) May 8, 2019

Webサイト制作：意外と知らない？HTML/CSSを書く上で便利なデベロッパーツールの機能13選 https://t.co/5l1Tt6HLTB

— Webクリエイター ボックス (@webcreatorbox) May 9, 2019

とても勉強になったので是非参考にどうぞ！

意外と知らない？HTML/CSSを書く上で便利なデベロッパーツールの機能13選｜Kazutaka Shimizu @kazutaka_dev｜note（ノート） https://t.co/yUWMpUPQVQ

— ばーにゃん (@baanyan0) May 9, 2019