Debugging ajax calls on CakePHP 2 with DebugKit, Firebug et al - cakephp

I have a CakePHP 2 app with DebugKit installed. It is working fine and I get the memory usage and processing time in the "Timing" toolbar for each page I load.
What I also want to be able to do is get memory usage and processing times for ajax requests after the page has loaded. I am aware that I can access previous ajax requests using the "History" button in the DebugKit Toolbar, but this is doesn't really help when I want to click around the page, firing ajax requests and get instant debugging information for them.
So, I did some searching and I found that I could use Firebug + FirePHP in Firefox along with the FirePHP and FireCake libraries in my app and get all of DebugKit's stats on a per-ajax-request basis. This sounds perfect and exactly what I want to do.
Unfortunately, I can't seem to get it to work. I could only find one tutorial on the matter at http://someguyjeremy.com/blog/using-firephp-to-debug-your-cakephp-app
I have done everything that tutorial mentions and Cake gives me no errors at all. However, unless I am missing something, I don't see where in Firebug the debug info is being displayed, if indeed it is even being fed to Firebug in the first place.
My config:
Cake Version: 2.2.4
Firefox Version: 17.0.1
Firebug Version: tried with 1.11.1 and 1.9.0
FirePHP Version: 0.7.1
DebugKit Version: 2.2.0 (latest master branch)
UPDATE
It appears to work perfectly for Ajax requests that do not end in .json and, therefore, are not being picked up by the Router::parseExtensions('json'); I have in routes.php.
I took out Router::parseExtensions('json'); and changed my Ajax request to go for my filter action directly instead of calling it filter.json and Cake serves all of the FireBug headers. Unfortunately, I can't use it like this because JQuery needs the content type to be application.json.

It looks like this might be a documented bug:
http://cakephp.lighthouseapp.com/projects/42880/tickets/107-firephp-messages-are-not-sent-in-response-if-using-jsonxmlview-with-serialization
My usage case is not exactly the same, but outputting json is stopping the FirePHP headers from appearing. If I turn off the parse extensions directive for json, the FirePHP headers appear as they should.

Related

Load Testing Drupal by JMeter

I want to load test DRUPAL by JMeter, but when I run my test plan (it is about updating cart in drupal commerce) it gives me this error:"The form has become outdated. Copy any unsaved work in the form below and then reload this page."
I think the value of form-token is invalid. I use regular expressin for form-token with this regular expression: name="form_token" value="(.+?)".it still does not update cart
How can I solve this problem?
There could be a lot of different reasons for this, most probably:
Missing HTTP Cookie Manager
Missing or improperly working correlation
The solution is comparing the request, which is being generated by JMeter with the request, coming from the real browser - they need to be identical (apart from dynamic bits like cookies or this form_param).
In JMeter you can use View Results Tree listener to check request and response details, variables and cookie values, etc.
In browser you should have developer tools option which allows inspecting the same

Why google doesnt index my single page app properly?

Since some time google officially depreceated ajax crawling scheme they came up with back in 2009 so I decided to get rid of generating snapshots in phantomJS for _escaped_fragment and rely on google to render my single page app like a modern browser and discover its content. They describe it in here. But now I seem to have a problem.
Google indexed my page (at least I can see in webmastertools it has) but when using webmastertools I look at google index-->content keywords it shows non processed content of my angularJS templates only and names of my binded variable names e.g. {{totalnewprivatemessagescount}} etc. The keywords do not contain words that should should be generated by ajax calls when Javascript executes so e.g. fighter is not even in there and it should be all over the place.
Now, when I use Crawl-->Fetch as google-->Fetch and render the snapshot what google bot sees is very much the same as what user sees and is clearly generated using Javascript. The Fetch HTML tab though shows only source without being processed using JS which I'm guessing is fine.
Now my question is why google didn't index my website properly? Is there anything I implemented incorrectly somewhere? The website is live at https://www.fightersconnect.com and thanks for any advice.

Coded UI tests on IE does not behave similar to the manual test

I am running a coded UI test, using the Page Object Pattern, not based on recording. The test is on a web app that uses AngularJS. When I run the test using automation the behavior of some pages is different from the manual testing. For example, some filters are based on date pickers. When I change the date range manually, the angular model is refreshed and the new data is rendered in IE. However, when I do that through automation, no data is refreshed although on developer tools, I can see that the request is sent and data received successfully. I made sure that both the manual IE and the automation one are adjusted to the same document mode, 10. I am running my tests using VS2012/Win8.1 and VS2013/Windows 7 with all updates.
I appreciate your help,
Ahmed
I am not sure about AngularJS but it seems like there's and issue with XMLHttpRequest object which is used by Coded UI for tracking
Same issue was there with JQuery where Coded UI is not able to get Ajax success message to refresh the data. You can try below solution in my case it worked like charm.
Jquery AJAX success not getting triggered with Coded UI test project

How can I tell whether a web app was built using Angular (or other technologies)?

How can I tell whether a (Drupal 7) web app was built using Angular by looking at the page source, and not having to ask the developers?
The best way to check is to write "angular" on browser console. If you get any object [With child objects as "bind","bootstrap","callbacks","module" etc.] then its an angular web app.
You can install a chrome or firefox extension called Wappalyzer. It tells you which site you are navigated on in your browser and the stack they use.
Find it here: https://www.wappalyzer.com
You could try: angular.version.full first. If this doesn't work, try getAllAngularRootElements()[0].attributes["ng-version"]. The reason being in Angular 1 the former will work and from angular 2 onwards the later will work.
If it's an online site you can use http://builtwith.com/ and it usually can give you a good and useful bunch of information about that site.
However if they are using angular you can take a look at their page sources to see if they are using any attributes of angular like ng-repeat for example
You can also take a look at the sources that your browser get while browsing that site to see if javascript files for angularjs are included among the sources.
Application declared using ng-app directive
very simple controller and directive
check for ng-model, ng-repeater attributes in the code. All these attibutes are written in small letters.
Also you can check by typing in the console(ctrl + shift + i) and navigate to console tab. There type in window.angular.version --> it displays the version of the site your are currently inspecting.
Try
https://builtwith.com/
This is the website that currently gives you the most detailed information about what technologies a site uses. They will let you do 5 free lookups a day.
https://wappalyzer.com/
is a good one too, and serve as a complement to builtwith. I don't think there is a limit of lookups, but the results are less detailed.
Those two used together may give you more insight.
use window.getAllAngularRootElements() in the browser console if it return some value its an angular application
For Angular, in Chrome's inspector, in the Elements tab, inside the body element is an element called app-root containing ng-version, which shows the Angular version it's using.
There is a Google Chrome extension called 'ng-detector'. It may be obtained from the Google webstore:
https://chrome.google.com/webstore/detail/ng-detector/fedicaemhcfcmelihceehhaodggfeffm
It creates a small icon next to the URL bar that indicates whether or not it thinks the page was created using Angular, although I have not thoroughly tested its validity.
Install chrome extension React-Detector, it works!
window.getAllAngularRootElements() worked for me
You can install a Chrome or Firefox extension called Augury. It tells you if app is an angular or not.

Links not working with angular $location in HTML5 mode in a Rails 4.1 app

The biggest problem is that I even don't really know how to describe the problem I'm asking about. It's the first time in more then a decade of wed development.
I'm working on a Rails 4.1.1 app and using angularjs pretty extensively, though I don't know it well yet. And everything seemed to be working fine up to the moment when I tried to add some browser history manipulation to my app (e.g. changing the displayed url when listing though a paginated list so that that url can be copied and distributed). To do this I added a config to my app.
#app.config ($locationProvider) ->
$locationProvider.html5Mode(true)
And then in my angular controller added the $location binding like this
$scope.$watch 'pagination.cur', (newVal) ->
$scope.loadNews newVal
$location.path("/news").search({page:newVal})
(this is ment to change the url in the browser searchbox when the user goes from one page to another).
That workes well, the url does change appropriately, but all the sudden all the html links on the page got broken. I mean litteraly. I click any link on the page (even outside the controller div), the url in the serchbox changes appropriately, but the turbolinks toes not fire the Ajax request to get the new page content. If I then refresh the page, it loads the correct page.
I know it's really weird. What's weirder, that I don't get any JavaScript errors or anything unusual.
The only way I found to get the links working again - is to remove that initial config.
But when I do it, the $location falls back to hashtag syntax, wich is really not at all what I want.
My only assumption is that there could be some kind of a conflict between angular $location service and turbolinks when handling browser history, but even if that's right, I have no idea how to get around it. And I really need that kind of manipulation, 'cause I'm going to be using it alot in this and other apps.
I really don't know, what other information on this problem may be usefull, don't hasitate to ask for updates. I'll post whatever I can.
P.S. Btw, can this kind of manipulation be done by means of turbolinks? 'Cause it's exactly the same thing turbolinks does when changing the displayed url after page body reload, but I can't find any documentation on its public API for that.
UPDATE
Have no idea what's the source of the problem yet, but it seems to be not related to the turbolinks gem. Removing turbolinks requirements from the application.js file does not change anything.
Using $window.history.pushState instead of $location.path solves the functionality problem, but does not explain the initial bug.

Resources