Googleのデベロッパーツールが便利なので始めたての人に共有。
Googleのデベロッパーツールについては僕も使い始めて間もないので紹介できる機能や詳細については自身でググって欲しいのだが、どんなものかは実際に使用してもらったほうが早いと思う。
使い方は簡単で、
webページで右クリック → 「要素の検証」という項目を選択
以上である。
実際に使用してくれたら分かると思うが、デベロッパーツールを使用するとそのページのhtmlやcssが分かる。元となっているファイルを編集しなくてもデベロッパーツール上で編集ができ、その場で変更の確認もできる。しかしファイルの内容自体は変更されない。ちょっとしたスタイルの変更などを検証してみたいときに便利そうだ。
またデベロッパーツール上のConsoleでJavaScriptのエラーの確認やスクリプトの実行もできる。
今回、機能を実装している最中にエラーが何度も出たが、スクリプトの一部を抜粋し正しく実行できるかを確認することで問題箇所を洗い出し、
該当する箇所をconsole上で書き換えたりしているうちに問題が解決できたのでフロントエンド開発で問題があった場合まずデベロッパーツールで確認をするのが良いだろう。
僕は個人的にホームページやテンプレートを作成しようと思ったときはデザイン的に参考になるサイトでデベロッパーツールを使用してスタイルをパクったり、htmlの構成(classやid名の振り方など)を参考にしたりするので使ったことがない人はぜひ試してみて欲しい。
ちなみに、知り合いのエンジニアはフロントエンド開発はデベロッパーツールが使えればただの作業ゲーだと言っていた。
