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

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

こんにちは。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,882文字/画像38枚
この記事が含まれているマガジンを購入する
全て単品で買うと約6000円のところを、マガジンで購入すると65%お得です。 6記事含まれています。

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

全て単品で買うと9000円のところを、マガジンで購入すると60%お得です。 割引額が一番高いマガジンになります。

1000はてブ以上の記事、noteの公式マガジンに掲載されたプログラミング学習記事の他に、1年でTwitterのフォロワーを30倍、6...

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

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

Kazutaka Shimizu

999円

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

137

Kazutaka Shimizu

【65%OFF】プログラミング学習関連のnoteまとめ

1000はてブ以上の記事、noteの公式マガジンに掲載されたプログラミング学習の記事が含まれてます。
2つのマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。