Profiling - timeline-view - not showing?


#1

Following Nativescript’s youtube video for performance , I’ve installed the timeline-view package.

Time.html was created after running the tns run android | timeline-view

Filesize:

But when I open the html file , I see nothing ( until I resize the window) and even after that - I see only one line :

https://i.stack.imgur.com/y2mtx.jpg // (Too bad I cant add more than one image …)

but if I inspect the dom - I do see another divs.
there is a problem in the console :


times.html:223 Uncaught DOMException: Failed to execute 'createPattern' on 'CanvasRenderingContext2D': The canvas width is 0.
    at redrawBackground (file:///C:/temp/Groceries/times.html:223:32)
    at file:///C:/temp/Groceries/times.html:274:5

Any solution ?

this happens also in FF and Edge And chrome.


#2

There was a problem with the timing function in the android runtime. A fix has since been pushed, and will be available in version 3.4, releasing beginning of December.

You can fetch a recent ‘unstable’ version (built from the master branch, likely not very tested) of the android runtime, which incorporates the fix. In order to take advantage, you should first remove the previously installed platform.

tns platform remove android
tns platform add android@3.4.0-2017-10-31-1


#3

Thank for reply :

Version 3.4 of what / which package ?

(I’m new to NS).


#4

of tns-android package.


#5

Is there any temporary workaround ? where can I find the fixed file ( so I can add it manually) to node_modules ?


#6

tns-android is responsible for setting up your platforms/android folder
it doesn’t have it’s own folder in node_modules


#7

Which will later I’ll update via tns update ?


#8

BTw for those who wants to see something - meanwhile :

Editing the html with

var pixelPerMs = 0.3;

-Shows something.

But still buggy. ( I’d love to get the formula for that value though) - so I can set it on resize .


#9

You can fetch a recent ‘unstable’ version (built from the master branch, likely not very tested) of the android runtime, which incorporates the fix. In order to take advantage, you should first remove the previously installed platform.

tns platform remove android
tns platform add android@3.4.0-2017-10-31-1


#10

This is still a problem and I couldnt make it work with any of the solutions provided above:frowning:


#11

Yes this happen when some events load so fast that their width in Canvas drawing is almost zero which gives Uncaught DOMException: Failed to execute 'createPattern' on 'CanvasRenderingContext2D': The canvas width is 0
if you check your browser terminal.

if you increase pixelPerMs value as @Royi_Namir mentioned, then you might overcome this however, you might have hard time zooming and finding profiled events

(see github issue)

for Android you can use profiler in Android Studio for more comprehensive profiling

https://www.youtube.com/watch?v=6hTC-fcVPtk


#12

^ That. With 3.4.0 moving forward, the Android Runtime will support the conventional Android Studio project template, that means you will be able to open the platforms/android directory inside Android Studio and use the built-in tooling for profiling the performance of your app.


#13

I still don’t see the profiling times. Here is my env versions.

┌──────────────────┬─────────────────┬────────────────┬─────────────┐
│ Component        │ Current version │ Latest version │ Information │
│ nativescript     │ 3.4.3           │ 3.4.3          │ Up to date  │
│ tns-core-modules │ 3.4.1           │ 3.4.1          │ Up to date  │
│ tns-android      │ 3.4.2           │ 3.4.2          │ Up to date  │
│ tns-ios          │ 3.4.1           │ 3.4.1          │ Up to date  │
└──────────────────┴─────────────────┴────────────────┴─────────────┘

#14

add following in ./app package.json
timline-view will work

{
  "main": "main.js",
  "profiling": "timeline"
}