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

jimmont · Accepted Answer · 2013-12-27 20:35:21Z

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;
    });

edited Dec 27, 2013 at 20:35

jimmont

2,5731 gold badge28 silver badges31 bronze badges

answered Nov 8, 2013 at 14:20

Slaven Tomac

1,5722 gold badges27 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

benek Over a year ago

I have success/error in my final code. My requirement concerns only the console. If added : .success(function(data, status, headers, config) {console.log(data)}).error(function(data, status, headers, config) {console.log(data)}) but it returns me a function and the request stay pending. How can I get data or error messages ?

Slaven Tomac Over a year ago

If your request stay pending, it means it still didn't receive response from server (or request didn't even hit server). Can you debug server side somehow?

benek Over a year ago

When I run my code directly out of debug context I get a HTTP 400 error. That is what I am trying to fix. From the server side code, developpers can't solve the problem. So I want to modify my request in different ways to make it working. But can't get the return callback with errors. This is my question. Thanks.

benek Over a year ago

My request is pending just after evaluating my statement in chrome. If I run my code complety (without stop), at a certain moment (??) I can see a 400 in the network panel.

Slaven Tomac Over a year ago

1) Can you post now how your entire request looks like? 2) What if you put breakpoint in error callback?

|

Collectives™ on Stack Overflow

Debugging Post Request with Chrome Dev Tools

Etat HTTP 400 -

JBoss Web/2.1.3.GA

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Etat HTTP 400 -

JBoss Web/2.1.3.GA

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related