
意外と知らない?HTML/CSSを書く上で便利なデベロッパーツールの機能13選
※こちらの記事が400はてブ以上ついて、総合とテクノロジーの人気エントリーに入りました!
こんにちは。Kazutaka Shimizuです。
フリーランスとしてPM、エンジニアをやっています。
元々はWebマーケティングのコンサルタントをやっていましたが、独学でWeb開発を勉強してプロダクトを作って起業しました。
最近は創業した会社を離れ、フリーランスとして活動したり、プログラミングを独学した経験をこちらのツイッターで発信しています。
みなさんはGoogle Chromeのデベロッパーツールをご存知ですか?
ドットインストールなど一部のプログラミング学習サービスでは、デベロッパーツールのレッスンがあるなど、おそらく全く知らない人はかなり少ないと思います。
しかし、とにかく多機能なため、意外と便利な機能を使ったことがないというプログラミング初心者の方も多いようです。
僕自身、何度か自分のTwitterでこうしたデベロッパーツールの機能について取り上げたのですが、どれも非常に反応がよく、知りませんでした!というコメントを頂きました。
あるHTMLの要素にCSS適用したつもりが、なぜかうまく当たらないこと多々あるかと思います
— かずたか@プログラミング独学して起業した人 (@kazutaka_dev) April 16, 2019
そんな時はデベロッパーツールのコンソールタブに
$$(‘CSSのセレクタ’);
と入力すると、そのセレクタに該当する要素がブラウザ上で存在するか簡単に確認できるので大変便利ですよー! pic.twitter.com/VuKqqElB05
chromeのデベロッパーツールでの変更を
— かずたか@プログラミング独学して起業した人 (@kazutaka_dev) December 29, 2018
そのまま保存できるの知ってましたか?
やり方は
1、変更する
2、sourceタブを開く
3、変更したファイルを右クリックし、「save as」
いい感じにレイアウト整えたのに
変更点忘れて反映させられなかったとかよくあるので
ぜひ使ってみてください pic.twitter.com/hrHAl3UNjI
基本的な使い方をするだけでもとっても便利なデベロッパーツールですが、こうした意外に知らないけど便利な機能もたくさんあるので、今回はそれについて書いていきたいと思います。
目次
・デベロッパーツールとは?
・意外と知らない便利な機能
1. ツール上で編集した変更点をファイルに反映させる
2. ツール上で編集した箇所を表示
3. セレクタに該当するHTML要素がブラウザ上で存在するかをチェック
4. 不要なCSSやJavascriptを洗い出し、整理する
5. Sassの記述箇所をツール上で表示
6. 擬似セレクタが当たった状態のCSSを確認
7. 要素に最終的に適用されているcssを確認
8. エミュレーターのデバイスを追加
9. 実機で開いたページを解析する
10. 通信速度を制限してサイトの表示をテスト
11. 要素に設定されているイベントの一覧を見る
12. Javascriptのブレイクポイントを設定
13. テーマを変更
※この記事に頂いた感想です
こんなにデベロッパーツールの機能をまとめてくれている記事はなかなかないから、コーダーの人には絶対読んでほしいです!
— 東京フリーランス (@Tokyo_FreeIance) May 8, 2019
知らなくてすぐ使えそうだったのは、3番のHTMLにCSSがちゃんと適応できているかチェックできる方法のやつ。
知らない機能がいっぱいありましたhttps://t.co/NhFDbzqIxl
Webサイト制作:意外と知らない?HTML/CSSを書く上で便利なデベロッパーツールの機能13選 https://t.co/5l1Tt6HLTB
— Webクリエイター ボックス (@webcreatorbox) May 9, 2019
とても勉強になったので是非参考にどうぞ!
— ばーにゃん (@baanyan0) May 9, 2019
意外と知らない?HTML/CSSを書く上で便利なデベロッパーツールの機能13選|Kazutaka Shimizu @kazutaka_dev|note(ノート) https://t.co/yUWMpUPQVQ
【4000円お得】プログラミング学習note全部載せ
4,480円
プログラミングに関する有料noteが全て含まれます。1000はてブ以上の記事、noteの公式マガジンに掲載されたプログラミング学習記事など。
プログラムを書いたり学習したりするのに便利なツールに関するnoteのまとめです。 1000はてブ以上の記事、note公式マガジンに掲載され…
意外と知らない?HTML/CSSを書く上で便利なデベロッパーツールの機能13選
1,480円

気軽にクリエイターの支援と、記事のオススメができます!