VScodeで簡易WebServerの元でデバッグ - 版の履歴

2022年11月15日 (火) 08:32にYo-netによる

2022-11-15T08:32:35Z

← 古い版		2022年11月15日 (火) 17:32時点における版
126行目:		126行目:

	以上で、実行Viewには黄緑色の実行ボタンが表示されているので、実行します。[F5]キーでも実行開始できます。ブレークポイントは適宜設定して下さい。デバッグの仕方はVisual StudioでC++を実行するときと変わらない感覚で実行できます。細かい説明は省きます。[[VC PlusPlus:基本的な使い方]]を参考にして下さい。		以上で、実行Viewには黄緑色の実行ボタンが表示されているので、実行します。[F5]キーでも実行開始できます。ブレークポイントは適宜設定して下さい。デバッグの仕方はVisual StudioでC++を実行するときと変わらない感覚で実行できます。細かい説明は省きます。[[VC PlusPlus:基本的な使い方]]を参考にして下さい。



			== '''関連情報''' ==
			*[[MathJaxをデバッグしてJavaScriptの理解を深める]]



	[[JAVA Script]]に戻る。		[[JAVA Script]]に戻る。

Yo-net: /* 準備 */

2022-11-14T15:08:55Z

準備

← 古い版		2022年11月15日 (火) 00:08時点における版
112行目:		112行目:
	file設定が規定値で作られますが、ファイルを開くのではなく、上記のようにした方が目的のファイルを開いた状態をデバッグの初期状態にできるので、urlとwebRootによる設定をした方がよいでしょう。${workspaceFolder}が開いたフォルダのパスになっていて、そこをRootとしてurlに設定したようなパスをブラウザで開くのをデバッグの開始位置にした感じです。こうすると、超巨大なJavaScriptライブラリであるMathJaxのようなものをデバッグすることもできます。MathJaxは改行の無いスクリプトなのでいろいろと手を加えないと容易にデバッグ作業はできないです。そのあたりのことは[[MathJaxをデバッグしてJavaScriptの理解を深める]]の記事にまとめたいと思います。		file設定が規定値で作られますが、ファイルを開くのではなく、上記のようにした方が目的のファイルを開いた状態をデバッグの初期状態にできるので、urlとwebRootによる設定をした方がよいでしょう。${workspaceFolder}が開いたフォルダのパスになっていて、そこをRootとしてurlに設定したようなパスをブラウザで開くのをデバッグの開始位置にした感じです。こうすると、超巨大なJavaScriptライブラリであるMathJaxのようなものをデバッグすることもできます。MathJaxは改行の無いスクリプトなのでいろいろと手を加えないと容易にデバッグ作業はできないです。そのあたりのことは[[MathJaxをデバッグしてJavaScriptの理解を深める]]の記事にまとめたいと思います。


			ちなみに最初に書いたサンプルhtmlをRootにおいてデバッグするときは


			<syntaxhighlight lang="json">
			"url":"http://localhost:5500/index.html",
			"webRoot": "${workspaceFolder}",
			</syntaxhighlight>


			という設定でlaunch.jsonを構成します。

Yo-net: /* 準備 */

2022-11-14T15:06:00Z

準備

← 古い版		2022年11月15日 (火) 00:06時点における版
88行目:		88行目:


	このように設定した状態でプライマリサイドバーの実行ボタンを押すと、実行する準備ができていて、実行Viewには黄緑色の実行ボタンが表示されているので、実行します。[F5]キーでも実行開始できます。ブレークポイントは適宜設定して下さい。デバッグの仕方はVisual StudioでC++を実行するときと変わらない感覚で実行できます。細かい説明は省きます。[[VC PlusPlus:基本的な使い方]]を参考にして下さい。		このように設定した状態でプライマリサイドバーの実行ボタンを押すと、実行用のViewが左側にできて、そこにjson設定ファイルを作るというリンクがあるので、選択します。これで実行する準備が完了します。*.jsonファイルの設定内容は少し触った方が良い場合が多いです。以下のように設定するのが良い思います。例えば、任意のフォルダに展開したMathjaxのサンプルを実行するときは以下のようにします。開いた任意のフォルダをRootとして、RootにMathJaxSapmleと本体のes5フォルダを配置している感じです。SampleのMathjaxのスクリプト呼び出しパスが元々は../MathJax.jsとなっているのを../../es5/tex-mml-chtml.jsのように変更しないと駄目です。サンプルスクリプトの全てのパスを変えるのは面倒なので動かすものだけを変更すると良いでしょう。全部変更する人もいるかな。とにかく以下のようにします。


			<syntaxhighlight lang="json">
			{
			// IntelliSense を使用して利用可能な属性を学べます。
			// 既存の属性の説明をホバーして表示します。
			// 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
			"version": "0.2.0",
			"configurations": [
			{
			"type": "msedge",
			"request": "launch",
			"name": "Open index.html",
			"url":"http://localhost:5500/MathJaxSample/MathJax-base/index.html",
			"webRoot": "${workspaceFolder}",

			}
			]
			}
			</syntaxhighlight>

			file設定が規定値で作られますが、ファイルを開くのではなく、上記のようにした方が目的のファイルを開いた状態をデバッグの初期状態にできるので、urlとwebRootによる設定をした方がよいでしょう。${workspaceFolder}が開いたフォルダのパスになっていて、そこをRootとしてurlに設定したようなパスをブラウザで開くのをデバッグの開始位置にした感じです。こうすると、超巨大なJavaScriptライブラリであるMathJaxのようなものをデバッグすることもできます。MathJaxは改行の無いスクリプトなのでいろいろと手を加えないと容易にデバッグ作業はできないです。そのあたりのことは[[MathJaxをデバッグしてJavaScriptの理解を深める]]の記事にまとめたいと思います。



			以上で、実行Viewには黄緑色の実行ボタンが表示されているので、実行します。[F5]キーでも実行開始できます。ブレークポイントは適宜設定して下さい。デバッグの仕方はVisual StudioでC++を実行するときと変わらない感覚で実行できます。細かい説明は省きます。[[VC PlusPlus:基本的な使い方]]を参考にして下さい。



	[[JAVA Script]]に戻る。		[[JAVA Script]]に戻る。

2022年11月14日 (月) 12:40にYo-netによる

2022-11-14T12:40:42Z

← 古い版	2022年11月14日 (月) 21:40時点における版
91行目:	91行目:



		[[JAVA Script]]に戻る。

2022年11月14日 (月) 12:40にYo-netによる

2022-11-14T12:40:23Z

← 古い版		2022年11月14日 (月) 21:40時点における版
1行目:		1行目:
	[[~~javascript~~]]に戻る。		[[JAVA Script]]に戻る。
	== '''概要''' ==		== '''概要''' ==
	ブラウザの開発ツールを使ってJavaScriptの動きを追いかけることもできますが、意外と使いづらいです。VisualStudioのような開発ツールで、デバッグできたらなぁと思うことがあると思います。VisualStudioではできませんが、VisualStudioCodeというアプリでならできます。イメージとしては、Visual Studio Codeと拡張機能2つを取り込むという内容でして、拡張機能の一つがJavaScriptをデバッグできるようにするJavaScript Debugger(Nightly)というものです。これは入れなくても、JavaScriptの基本機能を使っている分にはほとんど支障がないはずですが、(Nightly)付きのモノを手動でインストールしておくことで最新の状態で使うことができるそうです。JavaScript Debuggerの(Nightly)無しがVisualStudioCodeを導入した時点で使えるようにはなっているということです。2021年くらいのVisualStudioCodeではJavaScript Debugger for Chromeというものを導入する必要がありましたが、こちらは廃止になっています。もう一つの拡張機能はLive Serverというものです。これはWeb Serverを立ち上げる感じの役割があります。WebServerの設定は*.jsonファイルという形式で管理します。		ブラウザの開発ツールを使ってJavaScriptの動きを追いかけることもできますが、意外と使いづらいです。VisualStudioのような開発ツールで、デバッグできたらなぁと思うことがあると思います。VisualStudioではできませんが、VisualStudioCodeというアプリでならできます。イメージとしては、Visual Studio Codeと拡張機能2つを取り込むという内容でして、拡張機能の一つがJavaScriptをデバッグできるようにするJavaScript Debugger(Nightly)というものです。これは入れなくても、JavaScriptの基本機能を使っている分にはほとんど支障がないはずですが、(Nightly)付きのモノを手動でインストールしておくことで最新の状態で使うことができるそうです。JavaScript Debuggerの(Nightly)無しがVisualStudioCodeを導入した時点で使えるようにはなっているということです。2021年くらいのVisualStudioCodeではJavaScript Debugger for Chromeというものを導入する必要がありましたが、こちらは廃止になっています。もう一つの拡張機能はLive Serverというものです。これはWeb Serverを立ち上げる感じの役割があります。WebServerの設定は*.jsonファイルという形式で管理します。

2022年11月14日 (月) 12:39にYo-netによる

2022-11-14T12:39:24Z

← 古い版		2022年11月14日 (月) 21:39時点における版
1行目:		1行目:
	[[~~Javascript~~]]に戻る。		[[javascript]]に戻る。
	== '''概要''' ==		== '''概要''' ==
	ブラウザの開発ツールを使ってJavaScriptの動きを追いかけることもできますが、意外と使いづらいです。VisualStudioのような開発ツールで、デバッグできたらなぁと思うことがあると思います。VisualStudioではできませんが、VisualStudioCodeというアプリでならできます。イメージとしては、Visual Studio Codeと拡張機能2つを取り込むという内容でして、拡張機能の一つがJavaScriptをデバッグできるようにするJavaScript Debugger(Nightly)というものです。これは入れなくても、JavaScriptの基本機能を使っている分にはほとんど支障がないはずですが、(Nightly)付きのモノを手動でインストールしておくことで最新の状態で使うことができるそうです。JavaScript Debuggerの(Nightly)無しがVisualStudioCodeを導入した時点で使えるようにはなっているということです。2021年くらいのVisualStudioCodeではJavaScript Debugger for Chromeというものを導入する必要がありましたが、こちらは廃止になっています。もう一つの拡張機能はLive Serverというものです。これはWeb Serverを立ち上げる感じの役割があります。WebServerの設定は*.jsonファイルという形式で管理します。		ブラウザの開発ツールを使ってJavaScriptの動きを追いかけることもできますが、意外と使いづらいです。VisualStudioのような開発ツールで、デバッグできたらなぁと思うことがあると思います。VisualStudioではできませんが、VisualStudioCodeというアプリでならできます。イメージとしては、Visual Studio Codeと拡張機能2つを取り込むという内容でして、拡張機能の一つがJavaScriptをデバッグできるようにするJavaScript Debugger(Nightly)というものです。これは入れなくても、JavaScriptの基本機能を使っている分にはほとんど支障がないはずですが、(Nightly)付きのモノを手動でインストールしておくことで最新の状態で使うことができるそうです。JavaScript Debuggerの(Nightly)無しがVisualStudioCodeを導入した時点で使えるようにはなっているということです。2021年くらいのVisualStudioCodeではJavaScript Debugger for Chromeというものを導入する必要がありましたが、こちらは廃止になっています。もう一つの拡張機能はLive Serverというものです。これはWeb Serverを立ち上げる感じの役割があります。WebServerの設定は*.jsonファイルという形式で管理します。

2022年11月14日 (月) 12:39にYo-netによる

2022-11-14T12:39:05Z

← 古い版		2022年11月14日 (月) 21:39時点における版
1行目:		1行目:
	[[~~Java Script~~]]に戻る。		[[Javascript]]に戻る。
	== '''概要''' ==		== '''概要''' ==
	ブラウザの開発ツールを使ってJavaScriptの動きを追いかけることもできますが、意外と使いづらいです。VisualStudioのような開発ツールで、デバッグできたらなぁと思うことがあると思います。VisualStudioではできませんが、VisualStudioCodeというアプリでならできます。イメージとしては、Visual Studio Codeと拡張機能2つを取り込むという内容でして、拡張機能の一つがJavaScriptをデバッグできるようにするJavaScript Debugger(Nightly)というものです。これは入れなくても、JavaScriptの基本機能を使っている分にはほとんど支障がないはずですが、(Nightly)付きのモノを手動でインストールしておくことで最新の状態で使うことができるそうです。JavaScript Debuggerの(Nightly)無しがVisualStudioCodeを導入した時点で使えるようにはなっているということです。2021年くらいのVisualStudioCodeではJavaScript Debugger for Chromeというものを導入する必要がありましたが、こちらは廃止になっています。もう一つの拡張機能はLive Serverというものです。これはWeb Serverを立ち上げる感じの役割があります。WebServerの設定は*.jsonファイルという形式で管理します。		ブラウザの開発ツールを使ってJavaScriptの動きを追いかけることもできますが、意外と使いづらいです。VisualStudioのような開発ツールで、デバッグできたらなぁと思うことがあると思います。VisualStudioではできませんが、VisualStudioCodeというアプリでならできます。イメージとしては、Visual Studio Codeと拡張機能2つを取り込むという内容でして、拡張機能の一つがJavaScriptをデバッグできるようにするJavaScript Debugger(Nightly)というものです。これは入れなくても、JavaScriptの基本機能を使っている分にはほとんど支障がないはずですが、(Nightly)付きのモノを手動でインストールしておくことで最新の状態で使うことができるそうです。JavaScript Debuggerの(Nightly)無しがVisualStudioCodeを導入した時点で使えるようにはなっているということです。2021年くらいのVisualStudioCodeではJavaScript Debugger for Chromeというものを導入する必要がありましたが、こちらは廃止になっています。もう一つの拡張機能はLive Serverというものです。これはWeb Serverを立ち上げる感じの役割があります。WebServerの設定は*.jsonファイルという形式で管理します。

2022年11月14日 (月) 12:38にYo-netによる

2022-11-14T12:38:02Z

← 古い版		2022年11月14日 (月) 21:38時点における版
1行目:		1行目:
	[[~~JavaScript~~]]に戻る。		[[Java Script]]に戻る。
	== '''概要''' ==		== '''概要''' ==
	ブラウザの開発ツールを使ってJavaScriptの動きを追いかけることもできますが、意外と使いづらいです。VisualStudioのような開発ツールで、デバッグできたらなぁと思うことがあると思います。VisualStudioではできませんが、VisualStudioCodeというアプリでならできます。イメージとしては、Visual Studio Codeと拡張機能2つを取り込むという内容でして、拡張機能の一つがJavaScriptをデバッグできるようにするJavaScript Debugger(Nightly)というものです。これは入れなくても、JavaScriptの基本機能を使っている分にはほとんど支障がないはずですが、(Nightly)付きのモノを手動でインストールしておくことで最新の状態で使うことができるそうです。JavaScript Debuggerの(Nightly)無しがVisualStudioCodeを導入した時点で使えるようにはなっているということです。2021年くらいのVisualStudioCodeではJavaScript Debugger for Chromeというものを導入する必要がありましたが、こちらは廃止になっています。もう一つの拡張機能はLive Serverというものです。これはWeb Serverを立ち上げる感じの役割があります。WebServerの設定は*.jsonファイルという形式で管理します。		ブラウザの開発ツールを使ってJavaScriptの動きを追いかけることもできますが、意外と使いづらいです。VisualStudioのような開発ツールで、デバッグできたらなぁと思うことがあると思います。VisualStudioではできませんが、VisualStudioCodeというアプリでならできます。イメージとしては、Visual Studio Codeと拡張機能2つを取り込むという内容でして、拡張機能の一つがJavaScriptをデバッグできるようにするJavaScript Debugger(Nightly)というものです。これは入れなくても、JavaScriptの基本機能を使っている分にはほとんど支障がないはずですが、(Nightly)付きのモノを手動でインストールしておくことで最新の状態で使うことができるそうです。JavaScript Debuggerの(Nightly)無しがVisualStudioCodeを導入した時点で使えるようにはなっているということです。2021年くらいのVisualStudioCodeではJavaScript Debugger for Chromeというものを導入する必要がありましたが、こちらは廃止になっています。もう一つの拡張機能はLive Serverというものです。これはWeb Serverを立ち上げる感じの役割があります。WebServerの設定は*.jsonファイルという形式で管理します。

2022年11月14日 (月) 12:37にYo-netによる

2022-11-14T12:37:42Z

← 古い版		2022年11月14日 (月) 21:37時点における版
1行目:		1行目:
			[[JavaScript]]に戻る。
	== '''概要''' ==		== '''概要''' ==
	ブラウザの開発ツールを使ってJavaScriptの動きを追いかけることもできますが、意外と使いづらいです。VisualStudioのような開発ツールで、デバッグできたらなぁと思うことがあると思います。VisualStudioではできませんが、VisualStudioCodeというアプリでならできます。イメージとしては、Visual Studio Codeと拡張機能2つを取り込むという内容でして、拡張機能の一つがJavaScriptをデバッグできるようにするJavaScript Debugger(Nightly)というものです。これは入れなくても、JavaScriptの基本機能を使っている分にはほとんど支障がないはずですが、(Nightly)付きのモノを手動でインストールしておくことで最新の状態で使うことができるそうです。JavaScript Debuggerの(Nightly)無しがVisualStudioCodeを導入した時点で使えるようにはなっているということです。2021年くらいのVisualStudioCodeではJavaScript Debugger for Chromeというものを導入する必要がありましたが、こちらは廃止になっています。もう一つの拡張機能はLive Serverというものです。これはWeb Serverを立ち上げる感じの役割があります。WebServerの設定は*.jsonファイルという形式で管理します。		ブラウザの開発ツールを使ってJavaScriptの動きを追いかけることもできますが、意外と使いづらいです。VisualStudioのような開発ツールで、デバッグできたらなぁと思うことがあると思います。VisualStudioではできませんが、VisualStudioCodeというアプリでならできます。イメージとしては、Visual Studio Codeと拡張機能2つを取り込むという内容でして、拡張機能の一つがJavaScriptをデバッグできるようにするJavaScript Debugger(Nightly)というものです。これは入れなくても、JavaScriptの基本機能を使っている分にはほとんど支障がないはずですが、(Nightly)付きのモノを手動でインストールしておくことで最新の状態で使うことができるそうです。JavaScript Debuggerの(Nightly)無しがVisualStudioCodeを導入した時点で使えるようにはなっているということです。2021年くらいのVisualStudioCodeではJavaScript Debugger for Chromeというものを導入する必要がありましたが、こちらは廃止になっています。もう一つの拡張機能はLive Serverというものです。これはWeb Serverを立ち上げる感じの役割があります。WebServerの設定は*.jsonファイルという形式で管理します。

Yo-net: /* 準備 */

2022-11-08T08:03:14Z

準備

← 古い版		2022年11月8日 (火) 17:03時点における版
55行目:		55行目:
	document.body.bgColor = color;		document.body.bgColor = color;
	}		}
	var ~~function~~ = SetBgBlue;		var functionSetBgBlue = SetBgBlue;
	var functionSetColor = function(code){		var functionSetColor = function(code){
	SetBg(code);		SetBg(code);
74行目:		74行目:
	<body>		<body>
	<h1>Java Script</h1>		<h1>Java Script</h1>
	<button onclick="~~SetBgRed~~()">青色</button>		<button onclick="SetBgBlue()">青色</button>
	<button onclick="~~funcSetColor~~('#00ff00')">無名関数</button>		<button onclick="functionSetColor('#00ff00')">無名関数</button>
	<button onclick="loopCountWrite()">カウント</button>		<button onclick="loopCountWrite()">カウント</button>
	<br />		<br />
84行目:		84行目:


	そしたらプライマリサイドバー上から4つ目の実行ボタンを押します。初めてなので表示された実行Viewの画面の青色のボタンの少し下にあるlaunch.jsのリンク形式の部分を押します。するとWeb App(Edge)もしくはWeb App(Chrome)を選択するように促されるので、自分の場合はEdgeをよく使っているのでEdgeを選択しました。		11行目12行目としました。file属性の指定は消しました。


	この段階でワークスペースに.vscodeフォルダが作られ、その中にlaunch.jsonファイルが作られました。この*.jsonファイルを以下のように変更しておきます。このままだとファイルごとに指定しないとダメで面倒です。


	~~<syntaxhighlight lang="json" line start="1">~~
	{
	~~// IntelliSense を使用して利用可能な属性を学べます。~~
	~~// 既存の属性の説明をホバーして表示します。~~
	~~// 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387~~
	~~"version": "0.2.0",~~
	~~"configurations": [~~
	{
	~~"type": "msedge",~~
	~~"request": "launch",~~
	~~"name": "Open Index.html",~~
	~~"url" :"http://localhost:5500",~~
	~~"webRoot": "${workspaceFolder}"~~
	}
	]
	}
	~~</syntaxhighlight>~~

			このように設定した状態でプライマリサイドバーの実行ボタンを押すと、実行する準備ができていて、実行Viewには黄緑色の実行ボタンが表示されているので、実行します。[F5]キーでも実行開始できます。ブレークポイントは適宜設定して下さい。デバッグの仕方はVisual StudioでC++を実行するときと変わらない感覚で実行できます。細かい説明は省きます。[[VC PlusPlus:基本的な使い方]]を参考にして下さい。

	~~11行目12行目としました。file属性の指定は消しました。~~