If I use Chrome Dev Tools I can do the following:
Open chrome dev tools (right click on the page in chrome => inspect)
Navigate to the "performance" tab
Click the record button
Click on a button in my web app
Stop performance recording
Then i get a nice little pie in the "Summary" tab of chrome:
My question is:
How can i start recording, stop recording and get those summary values (Loading, Scripting etc.) in javascript?
It would be really nice if someone could give me a little code example.
My question is not on how I can handle page navigation, cause for this I am using C# selenium. What I want to do is start performance recording, execute some steps with the webdriver, stop recording and measure the performance.
There are two ways you could do it:
First one:
I would recommend looking into puppeteer.
It's a project done by the guys from google chrome and it has support for tracing. As you can see here https://pptr.dev/#?product=Puppeteer&version=v1.13.0&show=api-class-tracing they have a way to retrieve the generated trace, and you should just write it to your computer to be able to use it later.
The call of tracing.start({}) uses a path which specifies the file to write the trace to.
The call of tracing.stop() can be very easily integrated with the fs library to convert the Buffer output to a file that later you can read with the chrome dev tools in case you wouldn't want to use the start function with the path parameter.
The only downside, is that you can't really reuse your Selenium script and you would have to start more or less from the scratch, even thought Puppeteer claims to be easier.
Second one (a little more difficult):
Use something similar to this library. https://github.com/paulirish/automated-chrome-profiling
It's written in JS, and it works perfectly as it's expected with the example, if you follow the installation steps of the package and then run the command node get-timeline-trace.js and load the file generated (profile-XXXXXXXX.devtools.trace) to the chrome profiler you will have a very nice report.
The only problem I see is that you will have to find a way to execute your selenium scripts passing it the chrome instance to it, and I don't know how easy that could be (maybe the PID might do?)
We use PhantomJs 2.0 to take screenshots of web pages. We've found that one particular page takes several minutes to process. This page does not appear to have this issue (or at least not of any comparable magnitude) when loaded in Chrome.
I believe that this is because the javascript is hanging/running very slowly. During the hang, Phantom is using a lot of CPU (although only one core). It does not appear to be taking up an abnormal amount of memory. I am fairly confident that javascript is the culprit because I can see from logging that all requests complete quickly, but then after the page loads Phantom hangs for awhile and won't run anything (I think this is because Phantom is all single-threaded so if the page is still running javascript my Phantom script won't run anything).
I'd like to debug and try to understand what part of the JS is taking so long, but I can't figure out how to get at this in Phantom. For example, I can't seem to collect any output from console.profile/console.profileEnd. How can I profile the javascript running in Phantom to find the bottleneck?
I use Phantomas, via grunt-phantomas. It's a tool that integrates with PhantomJS to profile a wide variety of performance-related metrics. Definitely worth checking out. If it doesn't give you exactly what you need, you can look at the source and see how they integrate with PhantomJS and get data out.
Is there a way to remotely debug a website?
I've just finished putting together a website that has some jquery animations. The site works fine on every machine/configuration I've tested it on.
One of the people the site needs to work for, however, reports that the animations don't work; which effectively breaks the website.
I strongly suspect his companies' network is the root of the problem; however diagnosing this is challenging as he is not a technical user and guiding him through the webkit inspector/console, etc. is not really an option.
Ideally I'd like to be able to 'capture' the network/javascript logs from IE or Chrome so that I can inspect them and attempt to work out what's gone wrong.
Aside:
I'm using an off-the-shelf Wordpress theme (http://theme.co/x/) for the site; so I expect the code is good.
While it doesn't seem possible to remotely capture and inspect the network or javascript logs from another machine's browser; there are a number of services that allow you to add automatic error reporting to your javascript code, which you can then inspect to find the root of the problem.
Examples of these are Errorception and Raygun.
As far as I have found, there aren't any similar tools to do so for monitoring network performance / loading specifically- although a similar approach with a custom script to detect if specific items have been loaded could be written.
I've recently gotten hold of a Rexster server with a REST API and I've been wanting to play around with it in an interactive way. I've never had to work with REST before, most of my work has been around SOAP and .NET. I'm able to trivially perform all of the GET operations just by navigating to the correct URL through the browser and reading the response with JSONView on Firefox, but anything requiring PUT and DELETE appears to require actual code.
Given that I'm still prototyping and testing the API, I'd like to have a way to interactively throw a bunch of requests at it and see what happens. I'm sure I could concoct something in Java or C# fairly fast, but I'm guessing there's a better way (which is why I was thinking javascript above) and was hoping you folks might recommend one.
Please advise, thanks!
If you are trying to debug requests and responses, then Fiddler or HttpScoop is great. However, for just interacting with the API, I've found that the Poster plugin for Firefox is the easiest of all. That sounds like what you're describing.
If you are on Windows, then Fiddler is your best option. I believe the Mac has an equivalent called Charles.
Recent versions of SoapUI allow you to interact with REST interfaces.
Maybe it won't affect you, but there's a bug in the current open source version that causes every query to be executed twice - took me some time to discover while testing a service that returns an incrementing number :-)
I'm pretty new to workign with Javascript.
In most languages you can run the code quickly locally on your machine. From what I've seen, in JS you generally only use it via the browser, and so I've been uploading my code an viewing its effects in the browser. This has proven very tiresome. Also, if I mak one error, it seems like my JS/JQuery will just do NOTHING, instead of giving me a useful error, message, which is making it painfully slow to code in.
IS there some way to run JS locally to see that it is working as I go? And then only upload it to the web when I'm mostly done? What ways are there for me to do this? What ways aer there for me to unit test the Javascript locally? Say I have some JAML that should render as <p>HI</p>, how do I run this locally in a unit test?
Thanks for the help,
Alex
EDIT:
Thanks for all the great suggestions. I'll have to take a bit of time and go through them to see which ones best help me in my situation.
Since you're using jQuery, I assume that you actually want to manipulate the various elements on your page. So depending on your specific development enviroment, uploading it each time is probably the way to go anyway. If you can set up a dev enviroment on your local machine (not always possible) then go with that.
As an actual answer to your question, I suggest using Chrome's developer tools, it doesn't just have the console, but an element inspector, and a resource tracker (resource tracker is invaluable when working with JSON and AJAX, since invalid json will fail silently)
As far as I know, the firebug plugin for firefox (dont use it myself) has a similar feature set, so if you're more comfortable with that go with it.
Just remember, as a developer, your development (and debuggin) enviroment is just as important as the code that you are writing.
EDIT: Noticed that you mentioned unit testing. There are several unit testing frameworks out there for JS including one that integrates with firebug called FireUnit. Do a quick google search to find more if you want.
You don't need to upload the JS file to a server to test it. Just write an html and declare the js binding
<script
src="js/yourJSFile.js"
type="text/javascript"></script>
Edit the JS file in your favorite editor and then refresh the page to test it.
For unit testing the best option is Selenium. It allows you to record an interaction with the browser and then play it back.
You can use Firebug with Firefox to debug JS, and Google Chrome has a debugger built-in (use the Tools -> Developer Tools menu).
You can run Javascript from the local file on your machine in your browser, so you can skip the uploading step.
Also, I'd recommend using Firefox/Firebug combo for developing Javascript as it will be very handy, especially for the part you mentioned about not seeing what's going wrong with your code.
Even if you upload your javascript it gets downloaded back to you as soon as you visit the webpage that invoques it. Its run client side always. So stick to local and use firebug as the others have said. Google`s developer tool is quite nice too.
In the browser if you open the developer tools, follow the following steps:
1) Navigate to sources
2) Under sources, click snippet and open run.js
3) You can use run.js to write as much code as you want and run it locally only to see if your code is working or not (it will give you output on the console)
4) Also you can get used to some keyboard shortcuts to make it faster for you.
5) For small javascript codes, you can navigate to console and run your code there
If you want to do unit testing with Javascript there are extension of Firebug that can help you with that. I haven't try any of them, so I can't really tell you which one are worth considering, but you can easily find them if you search for the keyword "Firebug unit testing" on Google.
What seems to be comming on top is FireUnit. You can find some information about how it works here.
Consider Spider Monkey, which is a javascript engine separate from a browser. If what you are developing does not involve rendering to a webpage or can be separated from the rendering code (good practice!), then this could be useful.
I prefer Chrome to Firefox and I just found Web Server for Chrome.
It's just a Google App that quickly sets up a web server for you and will be set up anywhere you are logged into Chrome. It only allows file access to your current devices, or if you specify, other devices only on the current LAN.
You just point it to the directory with your index.html file and type http://127.0.0.1:8887 in your browser.
Additionally to the answers given you can use Jasmine for automated testing.
A tutorial that seems to help get started with automated testing on Jasmine is provided by Evan Hahn.
I used it and for me it works like a charm. Especially if test driven development is what you are going for!