panayotcankov / timeline-view Goto Github PK
View Code? Open in Web Editor NEWLicense: Apache License 2.0
timeline-view's People
Contributors
Stargazers
Watchers
Forkers
sis0k0timeline-view's Issues
Breaks CLI builds with Webpack (on Windows only)
Executing Wrbpack build and timeline-view is breaking the build (and respectivly not generating any times) - happens on Windows only.
Steps to reproduce:
tns create myApp --ng
npm i nativescript-dev-webpack --save-dev
tns run android --bundle | timeline-view
Result: the build breaks and neither APK nor times.html is generated
$ tns run android --bundle | timeline-view
Searching for devices...
Starting Android emulator with image Nexus_5X_API_27
Waiting for emulator device initialization...
Executing before-liveSync hook from D:\git\NS-Issues-2018\test\baseNgApp\hooks\before-liveSync\nativescript-angular-sync.js
Executing before-cleanApp hook from D:\git\NS-Issues-2018\test\baseNgApp\hooks\before-cleanApp\nativescript-dev-webpack.js
Executing before-prepare hook from D:\git\NS-Issues-2018\test\baseNgApp\hooks\before-prepare\nativescript-dev-typescript.js
Hook skipped because either bundling or livesync is in progress.
Preparing project...
Executing before-prepareJSApp hook from D:\git\NS-Issues-2018\test\baseNgApp\hooks\before-prepareJSApp\nativescript-dev-webpack.js
Running webpack for Android...
Hash: eefab3f7820f45a117db
Version: webpack 3.10.0
Time: 5814ms
Asset Size Chunks Chunk Names
App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-1024.png 101 kB [emitted]
bundle.js 1.35 MB 0 [emitted] [big] bundle
App_Resources/Android/drawable-hdpi/background.png 3.5 kB [emitted]
App_Resources/Android/AndroidManifest.xml 1.39 kB [emitted]
App_Resources/Android/drawable-hdpi/icon.png 6.97 kB [emitted]
App_Resources/Android/app.gradle 353 bytes [emitted]
App_Resources/Android/drawable-hdpi/logo.png 33.2 kB [emitted]
App_Resources/Android/drawable-ldpi/background.png 1.34 kB [emitted]
App_Resources/Android/drawable-ldpi/logo.png 10.2 kB [emitted]
App_Resources/Android/drawable-ldpi/icon.png 3.3 kB [emitted]
App_Resources/Android/drawable-mdpi/background.png 1.93 kB [emitted]
App_Resources/Android/drawable-nodpi/splash_screen.xml 304 bytes [emitted]
App_Resources/Android/drawable-mdpi/icon.png 3.51 kB [emitted]
App_Resources/Android/drawable-xhdpi/background.png 5.39 kB [emitted]
App_Resources/Android/drawable-mdpi/logo.png 16.1 kB [emitted]
App_Resources/Android/drawable-xhdpi/icon.png 10.6 kB [emitted]
App_Resources/Android/drawable-xhdpi/logo.png 55.3 kB [emitted]
App_Resources/Android/drawable-xxhdpi/icon.png 20.8 kB [emitted]
App_Resources/Android/drawable-xxhdpi/background.png 10.5 kB [emitted]
App_Resources/Android/drawable-xxxhdpi/background.png 3.96 kB [emitted]
App_Resources/Android/values-v21/colors.xml 104 bytes [emitted]
App_Resources/Android/values-v21/styles.xml 902 bytes [emitted]
App_Resources/Android/drawable-xxxhdpi/icon.png 75.5 kB [emitted]
App_Resources/Android/values/colors.xml 237 bytes [emitted]
App_Resources/Android/drawable-xxhdpi/logo.png 119 kB [emitted]
App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/Contents.json 1.89 kB [emitted]
App_Resources/Android/values/styles.xml 1.72 kB [emitted]
App_Resources/Android/drawable-xxxhdpi/logo.png 197 kB [emitted]
App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29.png 1.68 kB [emitted]
App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/[email protected] 4.84 kB [emitted]
App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/[email protected] 9.46 kB [emitted]
App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40.png 2.67 kB [emitted]
App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/[email protected] 7.77 kB [emitted]
vendor.js 3.59 MB 1 [emitted] [big] vendor
App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/[email protected] 15 kB [emitted]
App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/[email protected] 15 kB [emitted]
App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-76.png 7.41 kB [emitted]
App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/[email protected] 32.2 kB [emitted]
App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/[email protected] 22.8 kB [emitted]
App_Resources/iOS/Assets.xcassets/Contents.json 62 bytes [emitted]
App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/[email protected] 28.3 kB [emitted]
App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Contents.json 4.25 kB [emitted]
App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/[email protected] 63.7 kB [emitted]
App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-1125h.png 164 kB [emitted]
App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/[email protected] 114 kB [emitted]
App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/[email protected] 184 kB [emitted]
App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Landscape.png 62.4 kB [emitted]
App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Landscape-X.png 169 kB [emitted]
/c/Users/niliev/AppData/Roaming/npm/tns: line 14: 15892 Segmentation fault node "$basedir/node_modules/nativescript/bin/tns" "$@" App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/[email protected] 191 kB [emitted]
App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Portrait.png 61 kB [emitted]
App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/[email protected] 4 kB [emitted]
App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/Contents.json 373 bytes [emitted]
App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/[email protected] 203 kB [emitted]
App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill.png 1.71 kB [emitted]
App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/[email protected] 62.9 kB [emitted]
App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/Contents.json 365 bytes [emitted]
App_Resources/iOS/build.xcconfig 504 bytes [emitted]
App_Resources/iOS/Info.plist 1.47 kB [emitted]
App_Resources/iOS/LaunchScreen.storyboard 3.93 kB [emitted]
App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/[email protected] 186 kB [emitted]
App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center.png 66.8 kB [emitted]
App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/[email protected] 207 kB [emitted]
package.json 178 bytes [emitted]
starter.js 39 bytes [emitted]
tns-java-classes.js 0 bytes [emitted]
[72] ./item/item.service.ts 1.69 kB {0} [built]
[77] ./package.json 149 bytes {1} [optional] [built]
[122] ../$$_lazy_route_resource lazy 160 bytes {1} [built]
[162] ./item/items.component.ts 1.07 kB {0} [built]
[163] ./item/item-detail.component.ts 1.02 kB {0} [built]
[165] ./main.ts 889 bytes {0} [built]
[216] ./app.module.ts 1.87 kB {0} [built]
[242] ./app.routing.ts 953 bytes {0} [built]
[278] ./item/items.component.html 1.74 kB {0} [built]
[279] ./item/item-detail.component.html 394 bytes {0} [built]
[280] ./app.component.ts 462 bytes {0} [built]
[282] ./vendor.ts 651 bytes {1} [built]
[283] . nonrecursive ^\.\/app\.(css|scss|less|sass)$ 174 bytes {1} [built]
[284] ./app.css 746 bytes {1} [optional] [built]
[286] ./vendor-platform.ts 415 bytes {1} [built]
+ 286 hidden modules
Exiting... Print charts...
Timeline report at: file://D:\git\NS-Issues-2018\test\baseNgApp\times.html
using
{
"description": "NativeScript Application",
"license": "SEE LICENSE IN <your-license-filename>",
"readme": "NativeScript Application",
"repository": "<fill-your-repository-here>",
"nativescript": {
"id": "org.nativescript.baseNgApp",
"tns-android": {
"version": "3.4.2"
}
},
"dependencies": {
"@angular/animations": "~5.2.0",
"@angular/common": "~5.2.0",
"@angular/compiler": "~5.2.0",
"@angular/core": "~5.2.0",
"@angular/forms": "~5.2.0",
"@angular/http": "~5.2.0",
"@angular/platform-browser": "~5.2.0",
"@angular/platform-browser-dynamic": "~5.2.0",
"@angular/router": "~5.2.0",
"nativescript-angular": "~5.2.0",
"nativescript-theme-core": "~1.0.4",
"reflect-metadata": "~0.1.8",
"rxjs": "~5.5.2",
"tns-core-modules": "~3.4.0",
"zone.js": "~0.8.2"
},
"devDependencies": {
"@angular/compiler-cli": "~5.2.0",
"@ngtools/webpack": "~1.9.4",
"babel-traverse": "6.4.5",
"babel-types": "6.4.5",
"babylon": "6.4.5",
"copy-webpack-plugin": "~4.3.0",
"css-loader": "~0.28.7",
"extract-text-webpack-plugin": "~3.0.2",
"lazy": "1.0.11",
"nativescript-dev-typescript": "~0.6.0",
"nativescript-dev-webpack": "^0.9.2",
"nativescript-worker-loader": "~0.8.1",
"raw-loader": "~0.5.1",
"resolve-url-loader": "~2.2.1",
"typescript": "~2.6.2",
"uglifyjs-webpack-plugin": "~1.1.6",
"webpack": "~3.10.0",
"webpack-bundle-analyzer": "^2.9.1",
"webpack-sources": "~1.1.0"
}
}
`Timeline-view` only works with `tns run android`?
Currently if I do this :
tns run android | timeline-view - then I do see the logs in the console ,also when I press ctrl+c - it does create the times.html file - so we're all set..
But - after installing webpack , I need to run this : npm run start-android-bundle
Which is : (in package.json) :
"start-android-bundle": "npm run ns-bundle --android --run-app"
BTW - if I run npm run start-android-bundle everything is ok but the file (time.html) is not created.
So I've tried to do this :
npm run ns-bundle --android --run-app | timeline-view
But then it doesn't work :
child process exited with code 127
npm ERR! Windows_NT 10.0.15063
npm ERR! argv "C:\\Program Files (x86)\\nodejs\\node.exe" "C:\\Program Files (x86)\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "ns-bundle" "--android" "--run-app"
npm ERR! node v7.9.0
npm ERR! npm v4.2.0
npm ERR! file C:\WINDOWS\system32\cmd.exe
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! [email protected] ns-bundle: `ns-bundle`
npm ERR! spawn ENOENT
Question :
What is the right way to create the times.html file with webpack ?
(I want to measure uptime for the app via looking at the graph.)
Uncaught DOMException: Failed to execute 'createPattern' on 'CanvasRenderingContext2D': The canvas width is 0.
I'm getting the following error when I'm running 'tns run android | timeline-view':
Uncaught DOMException: Failed to execute 'createPattern' on 'CanvasRenderingContext2D': The canvas width is 0.
at redrawBackground (file:///home/miguel/workspace/swipe/hoppin-app/nativescript/times.html:163:32)
at file:///home/miguel/workspace/swipe/hoppin-app/nativescript/times.html:265:1
Here is the generated html file:
<!DOCTYPE html>
<html>
<head>
<title>Profiling</title>
<style>
* {
margin: 0px;
padding: 0px;
overflow: hidden;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
.trace {
position: absolute;
border: 1px solid black;
border-radius: 5px;
overflow: hidden;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #DDD;
cursor: default;
line-height: 20px;
height: 20px;
text-align: center;
white-space: nowrap;
text-overflow: ellipsis;
}
.trace.Modules {
background-color: #BFF;
}
.trace.Runtime {
background-color: #FFB;
}
.trace:hover {
background-color: #FFF;
border-color: orange;
z-index: 1;
box-shadow: 0px 1px 5px black;
}
</style>
</head>
<body>
<script>
var timeline = [{"from":null,"to":null,"name":"ALL"}];
function orderStackTraces(traces) {
traces = traces.slice(0).sort(function (a, b) {
if (a.from < b.from) {
return -1;
}
else if (a.from === b.from) {
if (a.to > b.to) {
return -1;
}
else if (a.to === b.to) {
return 0;
}
else {
return 1;
}
}
else {
return 1;
}
});
var depthTo = [];
var stackedTraces = traces.map(function (_a) {
var from = _a.from, to = _a.to, name = _a.name, domain = _a.domain;
var depth;
for (var i = 0; i <= depthTo.length; i++) {
if (depthTo[i] === undefined || depthTo[i] <= from) {
depth = i;
depthTo[i] = to;
break;
}
}
return { from: from, to: to, name: name, domain: domain, depth: depth };
});
return stackedTraces;
}
var stackTraces = orderStackTraces(timeline);
var min = stackTraces.reduce(function (min, trace) { return Math.min(min, trace.from); }, Number.POSITIVE_INFINITY);
var max = stackTraces.reduce(function (max, trace) { return Math.max(max, trace.to); }, Number.NEGATIVE_INFINITY);
var left = min;
var pixelPerMs = 0.1;
var stackTraceDivs = [];
function createStackTraces() {
stackTraces.forEach(function (trace) {
var div = document.createElement('div');
div.className = "trace " + trace.domain;
traces.appendChild(div);
div.innerText = trace.name + " " + Math.round(trace.to - trace.from) + "ms";
div.title = trace.name + " " + (trace.to - trace.from) + "ms";
div.trace = trace;
stackTraceDivs.push(div);
div.addEventListener("click", focusTrace);
});
}
function updateStackTraces() {
var right = left + (window.innerWidth / pixelPerMs);
stackTraceDivs.forEach(function (div) {
var trace = div.trace;
var leftPx = (trace.from - left) * pixelPerMs;
var rightPx = window.innerWidth - (trace.to - left) * pixelPerMs;
div.style.left = Math.max(-5, leftPx) + "px";
div.style.top = 30 + trace.depth * 21 + "px";
div.style.right = Math.max(-5, rightPx) + "px";
});
}
function snap(px) {
return Math.floor(px) + 0.5;
}
var background = document.createElement('canvas');
var context = background.getContext("2d");
var rulerBackgroundPattern = document.createElement('canvas');
var rulerBackgroundPatternContext = rulerBackgroundPattern.getContext("2d");
var timelineBackgroundPattern = document.createElement('canvas');
var timelineBackgroundPatternContext = timelineBackgroundPattern.getContext("2d");
function redrawBackground() {
rulerBackgroundPatternContext.fillStyle = "#DDD";
rulerBackgroundPatternContext.fillRect(0, 0, rulerBackgroundPattern.width, rulerBackgroundPattern.height);
timelineBackgroundPatternContext.fillStyle = "#FFF";
timelineBackgroundPatternContext.fillRect(0, 0, timelineBackgroundPattern.width, timelineBackgroundPattern.height);
rulerBackgroundPatternContext.lineWidth = 1;
rulerBackgroundPatternContext.strokeStyle = "#BBB";
rulerBackgroundPatternContext.beginPath();
rulerBackgroundPatternContext.moveTo(snap(0), 0);
rulerBackgroundPatternContext.lineTo(snap(0), rulerBackgroundPattern.height);
rulerBackgroundPatternContext.stroke();
timelineBackgroundPatternContext.lineWidth = 1;
timelineBackgroundPatternContext.strokeStyle = "#EEE";
timelineBackgroundPatternContext.beginPath();
timelineBackgroundPatternContext.moveTo(snap(0), 0);
timelineBackgroundPatternContext.lineTo(snap(0), timelineBackgroundPattern.height);
timelineBackgroundPatternContext.stroke();
// timeline horizontal lines
timelineBackgroundPatternContext.lineWidth = 1;
timelineBackgroundPatternContext.strokeStyle = "#EEE";
timelineBackgroundPatternContext.beginPath();
timelineBackgroundPatternContext.moveTo(0, snap(timelineBackgroundPattern.height - 1));
timelineBackgroundPatternContext.lineTo(timelineBackgroundPattern.width, snap(timelineBackgroundPattern.height - 1));
timelineBackgroundPatternContext.stroke();
rulerBackgroundPatternContext.strokeStyle = "#CCC";
timelineBackgroundPatternContext.strokeStyle = "#EEE";
for (var i = 1; i < 10; i++) {
var x = rulerBackgroundPattern.width / 1000 * i * 100;
rulerBackgroundPatternContext.beginPath();
rulerBackgroundPatternContext.moveTo(snap(x), rulerBackgroundPattern.height - rulerBackgroundPattern.height * 0.25);
rulerBackgroundPatternContext.lineTo(snap(x), rulerBackgroundPattern.height);
rulerBackgroundPatternContext.stroke();
timelineBackgroundPatternContext.beginPath();
timelineBackgroundPatternContext.moveTo(snap(x), 0);
timelineBackgroundPatternContext.lineTo(snap(x), timelineBackgroundPattern.height);
timelineBackgroundPatternContext.stroke();
}
var rulerOffset = -Math.round((left - Math.floor(left / 1000) * 1000) * pixelPerMs);
var rulerPattern = context.createPattern(rulerBackgroundPattern, "repeat");
context.fillStyle = rulerPattern;
context.translate(rulerOffset, 0);
context.fillRect(-rulerOffset, 0, background.width, 30);
context.translate(-rulerOffset, 0);
var timelinePattern = context.createPattern(timelineBackgroundPattern, "repeat");
context.fillStyle = timelinePattern;
context.translate(rulerOffset, 31);
context.fillRect(-rulerOffset, 0, background.width, background.height - 30);
context.translate(-rulerOffset, -31);
// Separators
context.lineWidth = 1;
context.strokeStyle = "#666";
context.beginPath();
context.moveTo(0, snap(30));
context.lineTo(background.width, snap(30));
context.stroke();
}
function resize() {
background.width = window.innerWidth;
background.height = window.innerHeight;
}
function resizeRulers() {
// Lets try major rules on seconds and minor rules on 100ms.
var width = 1000 * pixelPerMs;
rulerBackgroundPattern.width = width;
rulerBackgroundPattern.height = 30;
timelineBackgroundPattern.width = width;
timelineBackgroundPattern.height = 21;
}
function clampViewPort() {
pixelPerMs = Math.max(window.innerWidth / (max - min), pixelPerMs);
left = Math.min(Math.max(min, left), max - window.innerWidth / pixelPerMs);
}
var chart = document.createElement('div');
chart.id = "chart";
chart.appendChild(background);
var traces = document.createElement('div');
traces.id = "traces";
chart.appendChild(traces);
document.body.appendChild(chart);
function focusTrace(ev) {
if (suspendClicks) {
return;
}
var trace = this.trace;
pixelPerMs = window.innerWidth / (trace.to - trace.from);
left = trace.from;
clampViewPort();
resizeRulers();
redrawBackground();
updateStackTraces();
}
window.addEventListener("resize", function () {
resize();
resizeRulers();
clampViewPort();
updateStackTraces();
redrawBackground();
});
window.addEventListener("mousewheel", function (e) {
var mousePoint = left + e.clientX / pixelPerMs;
pixelPerMs = Math.pow(2, Math.log2(pixelPerMs) + Math.max(-0.25, Math.min(0.25, e.wheelDelta)));
left = mousePoint - e.clientX / pixelPerMs;
clampViewPort();
resizeRulers();
redrawBackground();
updateStackTraces();
});
var dragging = false;
var suspendClicks = false;
var mouseDown = false;
var dragOriginXms; // The millisecond at which the chart was grabbed
var dragOriginXpx;
window.addEventListener("mousedown", function (e) {
dragOriginXms = left + e.clientX / pixelPerMs;
dragOriginXpx = e.clientX;
mouseDown = true;
}, true);
window.addEventListener("mouseup", function (e) {
if (dragging) {
dragging = false;
// Cant find a way to prevent the click action
suspendClicks = true;
setTimeout(function () { return suspendClicks = false; }, 1);
}
mouseDown = false;
});
window.addEventListener("mousemove", function (e) {
if (mouseDown && !dragging && Math.abs(e.clientX - dragOriginXpx) > 8) {
dragging = true;
}
if (dragging) {
left = dragOriginXms - e.clientX / pixelPerMs;
clampViewPort();
redrawBackground();
updateStackTraces();
}
});
clampViewPort();
resize();
resizeRulers();
redrawBackground();
createStackTraces();
updateStackTraces();
</script>
</body>
</html>
Thanks in advance.
Question: any way to use remotely
Thank you for the awesome tool to track Nativescript app performance! Do you have any plans (or maybe there is already a way) to use this on a remote server? Would be nice to send profiling data from an installed NS app to a server and see visualization there.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.