見出し画像

意外と知らない?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,880文字 / 画像38枚
この記事が含まれているマガジンを購入する
全て単品で買うと約10000円のところを、マガジンで購入すると5000円以上お得です。 割引額が一番お得なマガジンになります。

プログラミングに関する有料noteが全て含まれます。1000はてブ以上の記事、noteの公式マガジンに掲載されたプログラミング学習記事など。

全て単品で買うと5000円のところを、マガジンで購入すると50%お得です。ツール関連の有料noteが今後も追加されていきます。

プログラムを書いたり学習したりするのに便利なツールに関するnoteのまとめです。 1000はてブ以上の記事、note公式マガジンに掲載され…

または、記事単体で購入する

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

かずたか@プログラミング独学して起業した人

1,480円

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

愛してます!
181
Anycloud Inc.COO ex-SAGOJO Inc. COO マーケのコンサル→プログラミング独学して起業。 プログラミング、データ分析、デジタルマーケディングなどが得意。 学校講師、プロボクサーもたまに。

この記事が入っているマガジン

【4000円お得】プログラミング学習note全部載せ
【4000円お得】プログラミング学習note全部載せ
  • 9本
  • ¥4,480

プログラミングに関する有料noteが全て含まれます。1000はてブ以上の記事、noteの公式マガジンに掲載されたプログラミング学習記事など。

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。