Debugging Post Request with Chrome Dev Tools

Question

I am trying to use Chrome Dev for debugging the following Angular post request :

$http.post("http://picjboss.puma.lan:8880/fluxpousse/api/flow/createOrUpdateHeader", flowHeader)

After running the statement with right-click / evaluate, I can see the post in the network panel with a pending state. How can I get the result or "commit" the request and leave easily this "pending" state from the dev console ?

I am not yet very familiar with JS callbacks, some code is expected. Thanks.

EDIT

I have tried to run from the console :

$scope.$apply(function(){$http.post("http://picjboss.puma.lan:8880/fluxpousse/api/flow/createOrUpdateHeader", flowHeader).success(function(data){console.log("error "+data)}).error(function(data){console.log("error "+data)})})

It returns : undefined

EDIT

The error message returned is : JBoss Web/2.1.3.GA - Rapport d'erreur

Etat HTTP 400 -

type Rapport d'�tat

message

description La requ�te envoy�e par le client �tait syntaxiquement incorrecte ().

JBoss Web/2.1.3.GA

EDIT The post I am trying to solve generate an HTTP 400. Here is the result :

• Request URL:http://picjboss.puma.lan:8880/fluxpousse/api/flow/createOrUpdateHeader Request Method:POST Status Code:400 Mauvaise Requ?te Request Headersview source Accept:application/json, text/plain, / Accept-Encoding:gzip,deflate,sdch Accept-Language:fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4 Connection:keep-alive Content-Length:5354 Content-Type:application/json;charset=UTF-8 Cookie:JSESSIONID=285AF523EA18C0D7F9D581CDB2286C56 Host:picjboss.puma.lan:8880 Origin:http://picjboss.puma.lan:8880 Referer:http://picjboss.puma.lan:8880/fluxpousse/ User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.101 Safari/537.36 X-Requested-With:XMLHttpRequest Request Payloadview source {refHeader:IDSFP, idEntrepot:619, codeEntreprise:null, codeBanniere:null, codeArticle:7,…} cessionPrice: 78 codeArticle: "7" codeBanniere: null codeDateAppro: null codeDateDelivery: null codeDatePrepa: null codeEntreprise: null codeFournisseur: null codeUtilisateur: null codeUtilisateurLastUpdate: null createDate: null dateAppro: null dateDelivery: null datePrepa: null hasAssortControl: null hasCadenceForce: null idEntrepot: 619 isFreeCost: null labelArticle: "Mayonnaise de DIJON" labelFournisseur: null listDetail: [,…] pcbArticle: 12 pvc: 78 qte: 78 refCommande: "ref" refHeader: "IDSFP" state: "CREATED" stockArticle: 1200 updateDate: null Response Headersview source Connection:close Content-Length:996 Content-Type:text/html;charset=utf-8 Date:Fri, 08 Nov 2013 15:19:30 GMT Server:Apache-Coyote/1.1 X-Powered-By:Servlet 2.5; JBoss-5.0/JBossWeb-2.1

Answer 1

Each $http request should have success and error callback like this:

$http({method: 'POST', url: '/someUrl'}).
success(function(data, status, headers, config) {
  // this callback will be called asynchronously
  // when the response is available
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});

Inside these methods you can debug in Dev Tools.

And if your request keeps pending, it might be something wrong with server side.

Note that if you don't have breakpoints making $http available (for example using Angular 1.2.6 in the chrome devtools) you can use:

angular.element(document).injector()
 .get('$http')({method: 'POST', url: '/someUrl'})
    .success(function(data, status, headers, config) {
       console.log('$http-success:',arguments);
       debugger;
    })
    .error(function(data, status, headers, config) {
       console.log('$http-error:',arguments);
       debugger;
    });