Visual Studio Code Primer - Revision history

Cmb: Changed 'sill' to 'still' and a few other changes.

2023-06-27T21:59:28Z

Changed 'sill' to 'still' and a few other changes.

← Older revision		Revision as of 21:59, 27 June 2023
Line 21:		Line 21:

	=== VS Code Extensions === <!--T:7-->		=== VS Code Extensions === <!--T:7-->
	VS ~~code~~ can be used for any type of text, including a wide range of programming languages. It works with JavaScript without adding extensions. Other languages are detected by context so if you start creating and saving PHP code you are likely to be prompted to install a PHP Support pack.		VS Code can be used for any type of text, including a wide range of programming languages. It works with JavaScript without adding extensions. Other languages are detected by context so if you start creating and saving PHP code you are likely to be prompted to install a PHP Support pack.

	<!--T:8-->		<!--T:8-->
Line 123:		Line 123:

	== Phing == <!--T:32-->		== Phing == <!--T:32-->
	Phing is a command line tool, available for all platforms, used to build software packages using instructions stored in an ~~xml~~ file, named build.xml by default. For working with extension code it can be used to do two things:		Phing is a command line tool, available for all platforms, used to build software packages using instructions stored in an XML file, named ''build.xml'' by default. For working with extension code it can be used to do two things:

	<!--T:33-->		<!--T:33-->
Line 130:		Line 130:

	<!--T:34-->		<!--T:34-->
	Download and install [https://www.phing.info/ Phing]. Other build tools are available! You could install Phing in your own bin folder or in a system bin folder. You need to note the path to your Phing code. In this example it is ''~/bin/phing-latest.phar''. You can try it out from the command line after changing into the folder containing your extension code:		Download and install [https://www.phing.info/ Phing]. Other build tools are available! You could install Phing in your own bin folder or in a system ''bin'' folder. You need to note the path to your Phing code. In this example it is ''~/bin/phing-latest.phar''. You can try it out from the command line after changing into the folder containing your extension code:

	<!--T:35-->		<!--T:35-->
Line 155:		Line 155:

	== VS Code Tasks == <!--T:41-->		== VS Code Tasks == <!--T:41-->
	To run Phing from within VS Code you need to create a ''tasks.json'' file in the ''.vscode'' folder in the root of the ''j4xdemos-mod-debugme'' folder. If the latter does not exist, ~~first~~ create it. Then create the ''tasks.json'' file and enter the following code:		To run Phing from within VS Code you need to create a ''tasks.json'' file in the ''.vscode'' folder in the root of the ''j4xdemos-mod-debugme'' folder. If the latter does not exist, create it. Then create the ''tasks.json'' file and enter the following code:

	<!--T:42-->		<!--T:42-->
Line 262:		Line 262:

	<!--T:61-->		<!--T:61-->
	* '''Find module code:''' Find the first bug on line 16 of JROOT/modules/mod_debugme/mod_debugme.php.		* '''Find module code:''' Find the first bug on line 16 of ''JROOT/modules/mod_debugme/mod_debugme.php''.
	* '''Set breakpoint:''' Click in the space to the left of the number 16. A pale red blob will appear as you hover and turn full red after you click to indicate a break point has been set.		* '''Set breakpoint:''' Click in the space to the left of the number 16. A pale red blob will appear as you hover and turn full red after you click to indicate a break point has been set.
	* '''Start debug:''' From the VS Code menu select ''Run / Start Debugging''. In your browser reload your site. Your VS Code window should reappear with the code stopped at the first line of the site ''index.php'' file. At the top of the screen are some icons to control the debug process. They should be self-explanatory. If not, look them up in the VS Code Help / Documentation.		* '''Start debug:''' From the VS Code menu select ''Run / Start Debugging''. In your browser reload your site. Your VS Code window should reappear with the code stopped at the first line of the site ''index.php'' file. At the top of the screen are some icons to control the debug process. They should be self-explanatory. If not, look them up in the VS Code Help / Documentation.
Line 283:		Line 283:

	<!--T:66-->		<!--T:66-->
	* You fix the first bug but it ~~sill~~ crashes on that line. Look in mod_debugme.xml to see where the ~~src~~ of namespaced classes is defined. When fixed in the source you need to reinstall the zip file or delete ''administrator/cache/autoload_psr4.php''. When absent, Joomla rebuilds that file from manifest files. But if it has an incorrect or missing entry it does not get fixed until the extension is reinstalled.		* You fix the first bug but it still crashes on that line. Look in mod_debugme.xml to see where the source of namespaced classes is defined. When fixed in the source you need to reinstall the zip file or delete ''administrator/cache/autoload_psr4.php''. When absent, Joomla rebuilds that file from manifest files. But if it has an incorrect or missing entry it does not get fixed until the extension is reinstalled.
	* Sometimes you need to set a breakpoint a few lines before the line where the error occurs, especially if you wish to check values passed to function calls.		* Sometimes you need to set a breakpoint a few lines before the line where the error occurs, especially if you wish to check values passed to function calls.
	* Table ''xxx.yyy\_debugme'' doesn't exist. Ah yes, the code to create a table on install and remove on uninstall was never created. You will need to run an ~~sql~~ query in phpMyAdmin using the content of the ''mod\_debugme.sql'' file. Remember to change ''#\_'' in the table names for your database prefix. And when it still fails check the table name in the code.		* Table ''xxx.yyy\_debugme'' doesn't exist. Ah yes, the code to create a table on install and remove on uninstall was never created. You will need to run an SQL query in phpMyAdmin using the content of the ''mod\_debugme.sql'' file. Remember to change ''#\_'' in the table names for your database prefix. And when it still fails check the table name in the code.

	== Screenshot == <!--T:67-->		== Screenshot == <!--T:67-->

Ceford: Fixed blank lines in code section

2023-01-17T13:18:39Z

Fixed blank lines in code section

← Older revision		Revision as of 13:18, 17 January 2023
Line 144:		Line 144:
	<syntaxhighlight>		<syntaxhighlight>
	Buildfile: /Users/ceford/git/j4xdemos-mod-debugme/build.xml		Buildfile: /Users/ceford/git/j4xdemos-mod-debugme/build.xml

	~~<!--T:38-->~~
	mod_debugme > main:		mod_debugme > main:
	... Any copied files will be mentioned here		... Any copied files will be mentioned here
	[zip] Building zip: /Users/ceford/zips/mod_debugme.zip		[zip] Building zip: /Users/ceford/zips/mod_debugme.zip

	~~<!--T:39-->~~
	BUILD FINISHED		BUILD FINISHED

	~~<!--T:40-->~~
	Total time: 0.0863 seconds		Total time: 0.0863 seconds
	</syntaxhighlight>		</syntaxhighlight>

Ceford: Marked this version for translation

2023-01-17T12:34:26Z

Marked this version for translation

Show changes

Ceford: Marked for translation

2023-01-17T12:33:32Z

Marked for translation

Show changes

Ceford: /* Turn on Debug Mode */ Fixed wrong italic markup

2022-09-04T04:42:33Z

Turn on Debug Mode: Fixed wrong italic markup

← Older revision		Revision as of 04:42, 4 September 2022
Line 93:		Line 93:
	=== Turn on Debug Mode ===		=== Turn on Debug Mode ===

	In Joomla's Global Configuration, set Debug System to ''Yes'' and Error Reporting to ''Maximum''.		In Joomla's Global Configuration, set ''Debug System'' to ''Yes'' and ''Error Reporting'' to ''Maximum''.

	When you open a page containing the buggy module you will see a stack trace telling you where an error was triggered.		When you open a page containing the buggy module you will see a stack trace telling you where an error was triggered.

Ceford: /* Install in Joomla */ Fixed wrong italic markup

2022-09-04T04:41:29Z

Install in Joomla: Fixed wrong italic markup

← Older revision		Revision as of 04:41, 4 September 2022
Line 87:		Line 87:
	</syntaxhighlight>		</syntaxhighlight>

	You can now install the zip file in the Joomla site you use for testing. After installation you need to create a Site module and assign it to a module position. As it is a broken module you could assign it to a position on All pages while you work on it; or you could assign it to a position on a single page; or you could position it in an article that has its own menu item.		You can now install the zip file in the Joomla site you use for testing. After installation you need to create a Site module and assign it to a module position. As it is a broken module you could assign it to a position on ''All pages'' while you work on it; or you could assign it to a position on a single page; or you could position it in an article that has its own menu item.

	After installation, delete the zip file.		After installation, delete the zip file.

Ceford: /* Add Website Window */ Fixed wrong emphasis markup

2022-09-04T04:39:25Z

Add Website Window: Fixed wrong emphasis markup

← Older revision		Revision as of 04:39, 4 September 2022
Line 205:		Line 205:
	=== Add Website Window ===		=== Add Website Window ===

	Your extension folder contains just a few files, the sources of the files installed in your website. Runtime debugging involves setting breakpoints in your site files so you need access to those files. You could use the ''File / Add Folder to Workspace...'' menu to add the site folder to your Workspace. However, there is a very good chance you will end up making changes to site files instead of source files. So it is probably best to open a separate VS Code window for debugging.		Your extension folder contains just a few files, the '''''sources''''' of the files installed in your website. Runtime debugging involves setting breakpoints in your '''''site''''' files so you need access to those files. You could use the ''File / Add Folder to Workspace...'' menu to add the site folder to your Workspace. However, there is a very good chance you will end up making changes to site files instead of source files. So it is probably best to open a separate VS Code window for debugging.

	* '''Open new window:''' From the VS Code menu, select ''File / New Window'' and select the folder containing your Joomla website.		* '''Open new window:''' From the VS Code menu, select ''File / New Window'' and select the folder containing your Joomla website.

Ceford: /* Getting Started */ Fixed wrong bold markup - made italic

2022-09-04T04:36:25Z

Getting Started: Fixed wrong bold markup - made italic

← Older revision		Revision as of 04:36, 4 September 2022
Line 12:		Line 12:
	=== Getting Started ===		=== Getting Started ===

	The VS Code Get Started page has some Start items, a list of Recent items, and a short list of Walkthroughs. If you are completely new to VS Code these are recommended viewing. They only take a few minutes.		The VS Code ''Get Started'' page has some ''Start'' items, a list of ''Recent'' items, and a short list of ''Walkthroughs''. If you are completely new to VS Code these are recommended viewing. They only take a few minutes.

	The VS Code Documentation is available from the ''Help / Documentation'' menu. The Introductory Videos are well worth viewing. Each takes 2 to 6 minutes and gives an excellent introduction to VS Code features		The VS Code Documentation is available from the ''Help / Documentation'' menu. The Introductory Videos are well worth viewing. Each takes 2 to 6 minutes and gives an excellent introduction to VS Code features
Line 18:		Line 18:
	https://code.visualstudio.com/docs/getstarted/introvideos		https://code.visualstudio.com/docs/getstarted/introvideos

	The official documentation is the place to go to if you want to look up specific information.		The official documentation is the place to go to if you want to look up specific information.

	=== VS Code Extensions ===		=== VS Code Extensions ===

Ceford: /* VS Code Tasks */

2022-09-04T04:32:31Z

VS Code Tasks

← Older revision		Revision as of 04:32, 4 September 2022
Line 141:		Line 141:
	== VS Code Tasks ==		== VS Code Tasks ==

	To run Phing from within VS Code you need to create a ''tasks.json'' file in the ''.vscode'' folder in the root of the j4xdemos-mod-debugme folder. If the latter does not exist, first create it. Then create the ''tasks.json'' file and enter the following code:		To run Phing from within VS Code you need to create a ''tasks.json'' file in the ''.vscode'' folder in the root of the ''j4xdemos-mod-debugme'' folder. If the latter does not exist, first create it. Then create the ''tasks.json'' file and enter the following code:

	<syntaxhighlight>		<syntaxhighlight>

Ceford: /* VS Code Tasks */ Fixed wrong italic markup

2022-09-04T04:31:49Z

VS Code Tasks: Fixed wrong italic markup

← Older revision		Revision as of 04:31, 4 September 2022
Line 141:		Line 141:
	== VS Code Tasks ==		== VS Code Tasks ==

	To run Phing from within VS Code you need to create a tasks.json file in the .vscode folder in the root of the j4xdemos-mod-debugme folder. If the latter does not exist, first create it. Then create the ''tasks.json'' file and enter the following code:		To run Phing from within VS Code you need to create a ''tasks.json'' file in the ''.vscode'' folder in the root of the j4xdemos-mod-debugme folder. If the latter does not exist, first create it. Then create the ''tasks.json'' file and enter the following code:

	<syntaxhighlight>		<syntaxhighlight>