Getting started with scripting: My instructions to others.

[ubacher]

How to get started with scripting: (my experience)

Download and install Chrome browser, set it as the default browser.
(I did this only because then I use exactly the same browser "engine" as is used inside of Imatch -
the chance of incompatibilities thus minimized.)

Download and install VS Code – this is the editor specialized for code editing.

Download and install npm. For this you download node.js which includes npm.
Nodejs.org ( I have no idea what npm does, what it is for – just needed for Eslint).

In Vs Code you select add-ons: Eslint. Bottom icon on the left, search for Eslint, install.

You then need to run npm on a command prompt: cmd> npm install -g eslint
and then also ....eslint -- init. Answer the questions ...

Sorry: I am still struggling with using/setting up Eslint myself.

In Imatch 2017: open the App panel, click on the App Imatch AppWizard.
Name it My Test and click Generate App.
The windows explorer will open: right-click on Index.html and open with Code.
First: right below <script> add  'use strict'

Before Imatch.appInfo insert
console.log('Hello World!');
and save the file.

Now run it from Im: first open the Output panel and select the App tab.
Then click on the My Test App in the App panel. The window will open and on the output
panel (Select the tab:  App) it should say Hello World

More commonly you will want to run it in Chrome: In the Imatch App panel , when you move the cursor
over My App three icons appear. Select the one which will open the app in Chrome.

The App  panel now appears in the browser window. Press F12 to open the development tools.
The tabs of interest will be Sources and Console.

To run the script (again) press F5. In the console panel it will show errors and the line number in your code where it occurred.
( As I go thru these steps I get an error regarding authorization the app info which should display does not! Need to research the cause....)

So the basic cycle is:
I make changes in Code, save it, go to Chrome, press F5. Look at errors and repeat.

There are tutorials on the web about using the chrome debugger:
https://developers.google.com/web/tools/chrome-devtools/javascript/

For looking up javascript syntax etc. I found www.w3schools.com  very useful.


Two chrome debugger settings to be aware of: in the Network tab disable cache!
In the panel to the right of sources (Breakpoints display etc, on top: select async

Back to VS Code:
If you Open a folder it will show you all relevant files on the panel on the left. You can then use the search (Magnifying glass icon on the left) to search thru all files for a certain string. This helps when looking for example code.

For searching inside your code use Ctrl F. A panel on the right top opens.

Pretty print (smart format): press Shift Alt F.

Watch out for: when you save your code changes and then return to chrome (Press F5) make sure the changes
do appear there. I have had (unexplained) cases where the code in chrome did not change.
Most of the time though it is just a matter of having forgotten to save the edited changes.

Please help refining these instructions for others!

[Mario]

Thanks for sharing. 

For download links for the free software mentioned in the above post, and links to Tutorials, documentation etc:

The IMatch Developer Center

[ubacher]

More about debugging:
Imatch: Edit -> Preferences -> Applications -> developer options: set debugging port to 50520.

You can open your app - so that the app window shows. Then, in the chrome browser, you can call
http://localhost:50520/  Set yourself a bookmark.

This will open the debugger in the browser. To run/rerun the app while the debugger(chrome) is open do it
with the refresh icon on the top right of the app window. (you do this after you made changes to the script in the editor)

In the debugger you can set breakpoints and inspect values.

[ubacher]

This is from topic 6713:

When you want to see the content/structure of a javascript object/array you just do this:

console.log(JSON.stringify(objectofunknownstructure,null,2))

This is most useful for responses to calls. For these you can also look at the network tab in the browser.

Error messages in the debugger:

A message about favicon.ico not found can be ignored!

I also found that the debugger sometimes shows error messages which do not affect the running: It seems it tries
some of the code when it first loads and because of missing initialization etc. this creates an error.