Webフロントエンドの開発を行ったことがない人向けに、Visual Studio Code でフロントエンドの開発環境構築からデバッグまでを説明します。 また、Google Chrome の デベロッパー ツール(Chrome DevTools) の使い方についても一部のパネルの説明をします。 開発環境の準備 フロントエンド開発で必要な開発環境の準備を行います。 使用するOSは Windows でも Mac でも構いません。 開発ツールのインストール フロントエンド開発なので、Webブラウザが必要となり、この記事では Google Chrome を使って説明します。 また、ファイルを記述するためのテキストエディタが必要となり、この記事では Visual Studio Code を使って説明します。 ソフト名 用途 バージョン ※