BlogAll Blog Posts | Next Post | Previous Post
Friday, May 14, 2021
When writing web client applications with TMS WEB Core, chances are you will be spending quite some time in the browser developer tools. This is the place where you can debug your web client applications and can inspect every detail of your web application: the DOM, source, network, performance, local storage, ... in a nutshell a wealth of useful information.
One of the capabilities of the browser developer tools is the console and from your application you can add logging statements to output these in the browser console.
The closest comparison with the Windows desktop application development world is the OutputDebugString() command that sends text to a debugger. The direct equivalent is using console.log("Hello world") that will do exactly the same but to the browser console. But all similarities end here.
The console object that is fully available as Pascal class in a TMS WEB Core web client application has many more options. This object is described here: https://www.w3schools.com/jsref/obj_console.asp
Timing functions to measure performance
A first convenience of the console object is the ability to time certain parts of your code. You can do this by calling console.time('identifier') to start a browser timer and when the part of the code was executed, call console.timeEnd('identifier') and the browser will output the time difference in the browser console.
This example demonstrates the timing of a bubble sort algorithm (for the sake of having some code that takes some time to execute)
function BubbleSort( list: TStringList ): TStringList; var i, j: Integer; temp: string; begin // bubble sort for i := 0 to list.Count - 1 do begin for j := 0 to ( list.Count - 1 ) - i do begin if ( j + 1 = list.Count ) then continue; if ( list.Strings[j] > list.Strings[j+1] ) then begin temp := list.Strings[j]; list.Strings[j] := list.Strings[j+1]; list.Strings[j+1] := temp; end; end; end; Result := list; end; function GenerateRandomWord(CONST Len: Integer=16; StartWithVowel: Boolean= FALSE): string; const sVowels: string = 'AEIOUY'; sConson: string = 'BCDFGHJKLMNPQRSTVWXZ'; var i: Integer; B: Boolean; begin B := StartWithVowel; SetLength(Result, Len); for i := 1 to len DO begin if B then Result[i] := sVowels[Random(Length(sVowels)) + 1] else Result[i] := sConson[Random(Length(sConson)) + 1]; B:= not B; end; end; procedure TForm1.MeasureTime; var sl: TStringList; i: integer; d: dword; mr: TMyRec; begin console.time('bubble'); sl := TStringList.Create; for i := 0 to 2000 do begin sl.Add(generaterandomword(8,false)); end; BubbleSort(sl); console.timeEnd('bubble'); sl.Free; end;
The result in the browser console looks like:
Inspecting values of variables, records, objects
The console.log() call can have a variable number of arguments of different types. You can call for example:
and this will output today's date in the console.
But also objects or records will be shown with all their details in the console, as this example for a record demonstrates:
type TMyRec = record Name: string; Age: integer; Member: boolean; end; var mr: TMyRec; begin mr.Name := 'Delphi'; mr.Age := 25; mr.Member := true; console.log(mr); end;
Or take this example, where the details of a HTML element are displayed in the console, in this example the HTML element used for a TWebEdit:
All these statements combined outputted in the browser console:
If you thought the browser could only output dull fixed text, you are wrong! On top of that, the console.log() command allows you to use CSS specifiers to format text. By specifiying %c in the text parameter of a console.log() call, it will take the next parameter as a CSS style to apply to the text following the %c specifier.
This example should make this clear:
with the corresponding output in the browser console:
console.log('%cTMS %c WEB %c Core%c rocks!','color:red','background-color:green;color:white;font-weight:bold', 'font-weight: bold','""');
The browser developer tools and in particular the console are tremendously helpful tools to assist in the development process. With TMS WEB Core (and also TMS WEB Core for Visual Studio Code) you can take fully advantage of it. Get started with developing web applications today, a wide range of helpful tools is more than ready for you!
This blog post has received 2 comments.
All Blog Posts | Next Post | Previous Post