スポンサーリンク
どうも、つよぽん(@tsuyopon_xyz)です!
HTML、CSSの修正をWebページ上で出来たら便利なのになー
もっと効率的にWeb開発する方法無いかなー
ちょっとしたJavaScriptコードの動作を確認したいなー
といったことを考えたことは無いでしょうか?
そのような悩みを解決する手段として「デベロッパーツール」というものがあります。
デベロッパーツールはWebブラウザに最初から付いているものなので、新たにソフトをインストールすることなく、すぐに使い始めることができます。
もし、
- デベロッパーツールを知らない
- デベロッパーツールは聞いたことあるけど、使い方を知らない
- デベロッパーツールを使わなくても、Webページの実装が出来るから、新たに使い方を学ぶ必要はないと考えている
といった場合は、「開発効率」という観点から大きな損をしています。
今回解説するデベロッパーツールの基本的な操作を覚えるだけでも、開発効率が大幅の上がるので、
ぜひ覚えていただけたらと思います^^
今回の記事では
- デベロッパーツールの開き方
- デベロッパーツールを使った、HTMLの編集方法
- デベロッパーツールを使った、CSSの編集方法
- デベロッパーツールを使った、JavaScriptの実行方法と、console.logの確認方法
を動画で解説していきます。
動画の目次
- 00:00 イントロダクション
- 01:12 デベロッパーツールの起動方法
- 02:13 デベロッパーツールでHTMLを操作する
- 04:10 デベロッパーツールでCSSを操作する
- 10:41 デベロッパーツールでJavaScriptを実行する
スポンサーリンク
スポンサーリンク