macbre / phantomas Goto Github PK
View Code? Open in Web Editor NEWHeadless Chromium-based web performance metrics collector and monitoring tool
Home Page: https://www.npmjs.com/package/phantomas
License: BSD 2-Clause "Simplified" License
Headless Chromium-based web performance metrics collector and monitoring tool
Home Page: https://www.npmjs.com/package/phantomas
License: BSD 2-Clause "Simplified" License
Add phantomas.setMarkerMetric(name)
(to both phantomas and browser scope).
This will set name
metric with the value set to ms that elapsed from responseEnd
event.
https://github.com/wesleyhales/loadreport#speedreport-examples = calculate Time To First Byte for each request
httpsRequests
Being able to pass in things like --viewport
is useful, could a feature be added in which allows for passing in of a custom --user-agent
?
onDOMReadyTime: time it took to fire onDOMready event
performance.timing.domContentLoadedEventStart - performance.timing.responseEnd
windowOnLoadTime: time it took to fire window.load event
performance.timing.loadEventEnd - performance.timing.responseEnd
See http://www.html5rocks.com/en/tutorials/webperformance/basics/
Hi! Thanks for this fantastic library! It would be great if I could install and use phantomas locally. This way other modules could use this library as a dependency and extend it on npm. My use case is I'm writing a grunt plugin for performance metrics.
The other benefit is installing is more idiomatic to node.js where users are only asked to do:
npm install
npm test
with a package.json
like:
{
"scripts": {
"test": "phantomas --url http://phantomjs.org"
},
"dependencies": {
"phantomas": "0.8.1"
}
}
I'd be happy to help out implementing this so it runs both globally and locally. Thanks!
Would be a nice to have, since requests notices don't output an extra phantom.addNotice()
for a newline, unlike other modules.
Phantomas looks good. It'd make sense to record a quick screencast showing typical usage and stuff like that. You could then link to this video in the README.
Would it be worth it to add a "cookie"/"cookies" entry to the returned object when setting --format=JSON
?
See https://github.com/jshint/jshint/blob/master/package.json and https://npmjs.org/doc/json.html#bin
phantomas
script in system's PATHSupport the following:
--cookie="bar=foo"
--cookies-jar=cookies.file
https://github.com/ariya/phantomjs/wiki/API-Reference#wiki-cookie
$ ./phantomas.js --url http://cnn.com --verbose
TypeError: '["msg:{\"type\":\"log\",\"data\":\"DOM event: \\\"DOMContentLoaded\\\" bound to \\\"#document\\\"\"}"]' is not a valid argument for 'Function.prototype.apply' (evaluating 'this.util.format.apply')
Introduce oldPropertyPrefix
metric that counts uses of outdated CSS properties browser-specific prefixes:
When I try to run phantomas, I get the following error:
phantomas --url https://github.com/macbre/phantomas
Unknown module /usr/local/lib/node_modules/phantomas//lib/args for require()
Allow config.json
to contain a set of asserts on selected metrics. Failed asserts should be reported and phantomas should exit with a correct code.
An example of asserts
entry:
{
"asserts": {
"requests": 18,
"evalCalls": 0,
"eventsBound": 150
}
}
Metric value should be not greater than provided value (metric value lte asserted value
).
Performance tests runner to be implemented in #120
See:
eg. while you're in your home and execute ./phantomas/phantomas.js you get really short output which probably means that something breaks
Metrics:
!important
directivesTools:
$ ./phantomas.js --url "http://elecena.pl/about" --verbose | grep -i domready
20:38:43.884 onDOMready
20:38:43.885 DOM query: by tag name "body"
(...)
20:38:43.899 jQuery.ready called: from unknown fn: http://cdn.macbre.net/elecena/r513/package/bootstrap,elecena,ui,suggest,ads.js @ 1
20:38:43.899 console.log: %s: %s onDOMready 73 ms
* onDOMReadyTime: 58
onDOMReadyTime
is reported as the moment when onDOMready event is fired. Add onDOMReadyEnd
metric what will show when event processing finishes.
Why is this called "phantomas"? I thought at first it may have been PhantomJS for ActionScript but clearly it is not. So... what's the "as" bit about? Can you clarify it in the README?
Interesting project, though!
~~James
Hi @macbre ,
Just tried to run the example.
phantomjs phantomas.js --url=https://github.com/macbre/phantomas --verbose
Encountered the following error.
Unknown module ./lib/args for require()
Node: v0.8.4
PhantomJS: v1.6.1
Any suggestions?
I've been using the default phantom.js netsniff module to generate JSON HAR files for display in a HAR viewer.
Is there a way to do this currently with phantomas, or should this be a candidate for a new module?
See:
https://raw.github.com/ariya/phantomjs/master/examples/netsniff.js
phantomas.js --url http://eurosport.yahoo.com/ --analyze-css --verbose | grep -i css
18:21:31.771 runScript: node /home/macbre/github/phantomas/analyze-css.js --url http://l2.yimg.com/zz/combo?yui:3.9.1/widget-base/assets/skins/sam/widget-base.css&yui:3.9.1/widget-stack/assets/skins/sam/widget-stack.css&yui:3.9.1/overlay/assets/skins/sam/overlay.css --json (pid #5136)
18:21:32.102 runScript: pid #5136 done in 333 ms
18:21:32.531 CSS: failed!
Waiting for ariya/phantomjs#10641
Example:
http://www.wekton.pl/tranzystory/tranzystory-jednozlaczowe/
-> http://www.wekton.pl/assets/4be3ef2b/jui/css/base/jquery-ui.css
-> http://www.wekton.pl/assets/4be3ef2b/jquery.js
Ran on --url http://vnmedia.se --verbose
09:49:14.385 Spying disabled - installing window.performance metrics
09:49:14.386 Spying enabled
09:49:14.394 Event jserror emitted
09:49:14.395 TypeError: 'undefined' is not an object (evaluating 'val.fn.jquery')
09:49:14.395 Backtrace: file: phantomjs://webpage.evaluate() @ line: 7
Add --disable-js
option
https://github.com/ariya/phantomjs/wiki/API-Reference-WebPage#settings-object
javascriptEnabled
defines whether to execute the script in the page or not (defaults totrue
)
https://github.com/wesleyhales/loadreport/blob/master/loadreport.js#L226
--film-strip
CLI option is passedfilmstrip/screenshot-$1-$2.png
($1 - timestamp of the page load started, $2 - time offset excluding time it took to render screenshots)Please note that rendering each screenshot takes several hundreds ms. Consider increasing default timeout by providing
--timeout
option
Implement Node.js helper script that:
echo "<test result>" | mail -s "Test result" "<email>"
assetsWithCookies
Source: http://yepnopejs.com
YepNope is used for conditional loading of JavaScripts, and the way that it works, AFAIK, is that it will download the script, then load it from cache if it's necessary, causing another request in the logs, but with a filetype of "image," rather than "application/javascript" or "text/css".
To isolate actual dupes in scenarios where yepnope.js is used to add polyfills, we'd have to inspect requests file name and type to determine true dupes.
This is a fairly peculiar situation, since I don't have a good sense of to what degree yepnope is in use.
The reason it might be worth considering making modifications to the duplicate request checks is that it is integrated into Modernizr, which is relatively popular.
Example:
$ ./phantomas.js --url=http://www.cnn.com/money --cookie='mobile=on'
PhantomJS cookie will be set having a domain of:
{
"name": "mobile",
"value": "on",
"domain": ".cnn.com/money"
}
I broke it, so I'll fix it.
Would it be worthwhile to add warnings on calls to console.* and alert (and totals) as a module?
At least console.log can have some impact on JS performance, IIRC from experiments on jsperf, so it might be worthwhile to flag in the same vein as document.write as bad practice in production code.
Mac OS X
Phantomas 0.6.1
PhantomJS 1.9.1
Node 0.8.18
I've seen crashes when providing the following URLs:
http://www.meetup.com
http://www.washingtonpost.com
http://www.cnn.com
So far the only commonality I've seen is that they're all using jQuery 1.7.1. The above URLs simply cause PhantomJS to fail.
The New York Times, which also uses jQuery 1.7.1, will display a series of errors, then either fail or complete. Maybe a race condition?
$ ./phantomas.js --url=http://nytimes.com
TypeError: 'undefined' is not an object (evaluating 'val.fn')
phantomjs://webpage.evaluate():7
TypeError: '[object ElementConstructor]' is not a constructor (evaluating 'new Element("meta",{"name":"WT.z_fbc"})')
http://js.nyt.com/js2/build/homepage/top.js:1
http://js.nyt.com/js2/build/homepage/top.js:1
TypeError: 'undefined' is not a function (evaluating 'NYTD.loadEditionToggle()')
http://www.nytimes.com/:77
TypeError: 'undefined' is not a function (evaluating '$("#spanABCRegion")')
http://www.nytimes.com/:326
http://www.nytimes.com/:337
ReferenceError: Can't find variable: NYT_HP_AVOID_MAYOR_PROMO
http://www.nytimes.com/:552
TypeError: 'undefined' is not a function (evaluating 'e(document)')
http://js.nyt.com/projects/assets/geoip_resolver/geotargeted_promo-e951aadc737a7470e13f9da6289fd63a.js:3
http://js.nyt.com/projects/assets/geoip_resolver/geotargeted_promo-e951aadc737a7470e13f9da6289fd63a.js:3
TypeError: 'undefined' is not an object (evaluating 'e.extend')
http://js.nyt.com/js2/build/video/players/extended/1.0/app.js:1
http://www.nytimes.com/:841
// PhantomJS fails.
Example URL: www.samsung.com
Good demo url for dumping a lot of garbage (console.*, warnings, and TypeErrors).
If it's possible to do so, might be good to track and emit events when encountered.
--log
option (https://github.com/ariya/phantomjs/wiki/API-Reference-FileSystem)Use npm install node-statsd
statsd-client (from Etsy)
When invalid URL is provided:
$ ./phantomas.js --url=http://foo.bar --verbose
an error from PhantomJS is not handled:
> Page loading finished ("fail")
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.