見出し画像

意外と知らない？HTML/CSSを書く上で便利なデベロッパーツールの機能13選

かずたか

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

画像1

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

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

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


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

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

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

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

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

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

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

ここから先は

6,241字 / 38画像

¥ 1,480

この記事が気に入ったらサポートをしてみませんか？