30DAYSトライアルのまとめ【DAY10】

DAY10の課題は「Google Chromeの検証を使う＋LiveServerをインストールする」になります。

Google Chromeの検証(デベロッパーツール)を使う

模写コーディングをやったあとに模写元のソースを確認するためになんとなくで使用してましたが、東京フリーランスのサイトに貼られているリンクの初心者向け！Chromeの検証機能（デベロッパーツール）の使い方でしっかりと使い方、できることを確認。

そしたらGoogle Chromeの検証ってソースを確認するだけじゃないんですね。

ページ開いたままHTML、CSSを直接編集してリアルタイムに結果を確認できて且つ修正内容の保存もできるなんて・・・。しかも特定のプロパティを一旦外してみるとかいうのが、チェックボックスの選択だけでできるのは効率が良いですね。いままでCSSで一旦コメントにして・・・とかしてたのがアホらしいです。

あとはCSSで取り消し線が入ってるプロパティは優先度の関係で適用されていないというのが分かったりと、ほんと便利です。

こういうのは習うより慣れろだと思うんで、今後の課題をこなして行く際にフル活用して自分のものにしていきます。

これは模写コーディングですでにフル活用してます。これがないとブラウザのリロードがめんどくさすぎてやってられないです。

HTMLのリアルタイムプレビューはLive HTML Previewerなども試しましたが、実際にブラウザでプレビューできるLive Serverのほうが圧倒的に良いと思います。 Live HTML PreviewerはHTMLの量が多くなると重くなる感じでしたし。

Live Serverのインストール方法、設定内容ともに過去記事で自分なりにまとめてます。