Chrome: advanced usage of dev tools - javascript

I faced few problems while using Chrome dev tool. Just want to know whether it's possible and if yes - how. Suggest I have a really massive client side, with hundred of responses per page.
How to find endpoint which handle the response? I mean the first place in js code where the response come in.
How to find the response by it content? For instance, I want to know in which response I've got 45902309509902 value from the table.

How to find endpoint which handle the response?
On the Network tab, you can see where the request was originated, it's the column labelled "Initiator:"
That has a link that will show you the code originating the ajax call (I assume by "response" you're talking about an ajax response). From there, you should be able to find the callback that request is associated with. A lot of times, if you use a library like jQuery, you'll be shown the jQuery code doing the request rather than yours. You can still find what you need, though, by using the un-minified version of the libray, setting a breakpoint on that code (perhaps even a conditional one on, say, the URL being requested), and then when the breakpoint is hit using the call stack to find out where in your code the call actually originates.
How to find the response by it content?
This will be slightly more difficult. Again in the Network tab, you can click each ajax request and see (and search through) the text of there response under the Response sub-tab.

Related

Using chrome debugger is there a way to see what function called my api?

I have like 100 api calls in the network tab for chrome debugger and I want to know what function called for each specific API.
I can't provide code but I can explain it more
Let say on the Network tab you get like so many different Rest API calls and not all of them are the same and yo want to know for one of them which function called that specific API.
The "Initiator" column will give you a stack trace of what initiated the network request. For example, here on Stack Overflow:
As you can see, the request to validate-body was made from send in jQuery, which came from ajax, which came from an anonymous function in Stack Overflow's post-validation.en.js script (you can click on the blue underlined text to scroll to each line in question).
Are you looking for something like this?

How to use requests in Python 3 to fetch data from website that utilizes JavaScript and jQuery

I have been playing around with the requests library in Python 3 for quite some time now, and have decided to create a test program. For this program, I'm using the website https://ytmp3.cc/ as an example. But it turns out that a lot is going on, on the client-side it seems.
Some keys and other stuff are being generated, and I have been using Firefox's built-in network monitor, to figure out in which requests this is being made, but without luck.
As far as I know, the requests-library can't keep a "page" open and modify the DOM and content, by making more requests.
Anyone whom could take a look, and give a qualified guess on how the special keys are generated, and how I could possibly get these for my own requests.
Fx when loading the webpage, the first request made is for the root, and the response contains the webpage HTML. What I noticed is that at the bottom, there's an url containing some key and number.
<script id="cs" src="js/converter-1.0.js?o=7_1a-a&=_1519520467"></script>
id 7_1a-a
number _1519520467`
This is used for making the next request, but then a lot of following requests are being made, and some other keys are made as well. But I can't find where these come from since they are not returned by a request.
I know that when inserting a Youtube link, a request will be made to an url, as seen below.
https://d.ymcdn.cc/check.php?callback=jQuery33107639361236859977_1519520481166&v=eVD9j36Ke94&f=mp3&k=7_1a-a&_=1519520481168
This returns the following:
jQuery33107639361236859977_1519520481166({"sid":"21","hash":"2a6b2475b059101480f7f16f2dde67ac","title":"M\u00d8 - Kamikaze (Official Video)","ce":1,"error":""})
From this I can construct the download url, using the hash from above:
https://yyd.ymcdn.cc/ + 2a6b2475b059101480f7f16f2dde67ac (hash) + /eVD9j36Ke94 (youtube video id)
But how do I get
jQuery33107639361236859977_1519520481166&v=eVD9j36Ke94 and 1519520481168
Which I need to create the request?
You can probably save yourself and the operator of that website a lot of headache by just using youtube-dl, specifically with the --extract-audio --audio-format mp3 options. It's probably what that website itself uses.
youtube-dl is written in Python and can easily be used programatically.
If you insist on sending requests to that website for whatever reason, here's how I'd do it:
callback=jQuery33107639361236859977_1519520481166 specifies the name of the callback for the JSONP request. Any name you provide will be printed back out. For example, passing callback=foo will result in the following response:
foo({...})
You can omit it entirely and the server will serve just a JSON response in this case, which is nice.
_=1519520481168 is just to prevent the response being cached. It's randomly generated, just like the above parameter. The website checks for existence, however, so you have to at least pass something in.
The website, like many, checks for a valid Referer header.
Here's a minimal cURL command line to make a request to that website:
curl 'https://d.ymcdn.cc/check.php?v=eVD9j36Ke94&f=mp3&k=aZa4__&_=1' -H 'Referer: https://ytmp3.cc/'

HTML form seems to be submitting *both* POST and GET?

This is not a duplicate of questions such as this, but rather the opposite: I have a form that I'm submitting via jQuery
$('<form>', {
action : 'service',
method : 'post',
target : '_blank'
}).append(
$('<input>', {
type : 'hidden',
name : 'payload',
value : JSON.stringify(payload)
})
).appendTo('body').submit().remove();
This is done so that I can open a different page with HTML.
Since I need to submit quite a lot of complex information, what I actually do is serialize them all into a big JSON string, then create a form with only one field ("payload") and submit that.
The receiving end has a filter that goes like this:
if the method is POST,
and there is only one submitted variable,
and the name of that one variable is "payload",
then JSON-decode its value and use it to create fake GET data.
So when the GET data grows too much I can switch methods without modifying the actual script, which notices no changes at all.
It always worked until today.
What should happen
The server should receive a single POST submission, and open the appropriate response in a popup window.
What actually happens instead
The server does receive the correct POST submission...
...apparently ignores it...
...and immediately after that, the browser issues a GET with no parameters, and it is the result of that parameterless GET that gets (pardon the pun) displayed in the popup window.
Quite unsurprisingly, this is always a "You did not submit any parameters" error. Duh.
What I already did
verified that this method works, and has always worked for the last couple of years with different forms and different service endpoints
tried replacing the form with a hardcoded <FORM> in HTML, without any jQuery whatsoever. Same results. So, this is not a jQuery problem.
tried with different browsers (it would not have helped if it only worked on some browsers: I need to support most modern browsers. However, I checked. Luckily, this failure reproduces in all of them, even on iPhones).
tried sending few data (just "{ test: 0 }").
tried halting the endpoint script as soon as it receives anything.
checked Stack Overflow. I found what seems to be the same problem, in various flavours, but it's of little comfort. This one has an interesting gotcha but no, it does not help.
checked firewalls, proxies, adblockers and plugins (I'm now using plain vanilla Firefox).
called the IT guys and asked pointed questions about recent SVN commits. There were none.
What I did not yet do
Check the HTTPS conversation at low level (I don't have sufficient access).
Compared the configuration, step by step, of a server where this works and the new server where it does not.
Quite clearly, put my thinking hat on. There must be something obvious that I'm missing and I'm setting myself up for a sizeable facepalm.
Use a tool like hurl.it or Postman to manually send a request to the server. The tools will nicely display the response from the server including all HTTP headers. I suspect the server responds with a redirect (Status code 30X) which leads to a GET request being issued after the POST completes.
Update: HTTP redirects
HTTP redirects do not necessarily use the same HTTP method or even the same data to issue a request to the redirect target. Especially for non-idempotent requests this could be a security issue (you don't generally want your form submission to be automatically re-submitted to another address). However, HTTP gives you both options:
[...] For this reason, HTTP/1.1 (RFC 2616) added the new status codes 303 and 307 [...], with 303 mandating the change of request type to GET, and 307 preserving the request type as originally sent. Despite the greater clarity provided by this disambiguation, the 302 code is still employed in web frameworks to preserve compatibility with browsers that do not implement the HTTP/1.1 specification.
[from Wikipedia: HTTP 302]
Also for 301s:
If the 301 status code is received in response to a request of any type other than GET or HEAD, the client must ask the user before redirecting.
[from Wikipedia: HTTP 301]

Where do I start debugging a jQuery/Javascript function, that calls an API on my server

Where do I start debugging a jQuery/Javascript function, that calls an API on my server, when it works perfectly well locally - but when uploaded to the server, just returns an HTTP500 error?
I've tried fiddler, but it shows nothing in JSON/XML - the only thing it does show is in the Auth section:
The server Event Logs show nothing around the times I'm trying to test this.
Does the Fiddler response suggest anything is wrong, or can anyone sugget what I may need to turn on in the Event Viewer to capture whatever these 500 errors may be?
Thanks for any help,
Mark
Try adding some console.log() messages which surround the javascript call and are within the callback functions. Doing so will let you know where the failure is occurring. When debugging javascript I typically stick to the Network tab within Chrome Developer Tools and Firebug. By using these tools you get proper output from your console.log() messages.
Specifically, in your jquery result handler I would add the following:
console.log(resultObject);
This will output the entire object tree so that you can drill down into the meat from within Firebug or Chrome Developer Tools... if you need to.
If, for whatever reason, you are opposed to littering your code with log messages then check to see that the call is actually happening when you are testing from your server. You should see whether or not javascript is sending the HTTP request by looking at your network traffic either in Fiddler or browser based tools. If the request is not happening then your code is breaking prior to the call which, in your case, probably means environmental differences.
Is everything referenced and configured properly? Check for null values due to improper configuration or bad references.
500 is a "server error", which basically means something (could be almost anything) broke at the server side.
I would recommend:
Investigate your options for exception handling: http://www.asp.net/web-api/overview/web-api-routing-and-actions/exception-handling
Consider setting the IncludeErrorDetailPolicy to Always, though note that this is a setting that shouldn't be left in-use on a production environment - Error messages returned from Web API method are omitted in non-dev environment
Examine server-side error logging. I'm a big fan of ELMAH. You'll need a little extra effort to get it working properly in Web API - http://blogs.msdn.com/b/webdev/archive/2012/11/16/capturing-unhandled-exceptions-in-asp-net-web-api-s-with-elmah.aspx

Can I suppress the browser’s login prompt on 401 response when using XmlHttpRequest with Twitter

I'm using jQuery's ajax methods to interact with the Twitter REST API.
Their API is a bit annoying, in that some actions will return a 401 HTTP status code. In that case, I just want it to fail, instead of displaying a login box.
I've tried just providing an incorrect user:pass pair in the URL, in case that might suppress the dialog and just get me an error response, but that failed to help.
This question asked exactly the same question, but the answer instead worked out how to not trigger the 401 in the first place.
(In particular this is annoying because it's a bug on their part that's requesting authentication -- the users/show method isn't supposed to be asking for it in the first place.)
Look into suppress_response_codes
It is explained about 1/4 way down the page here:
https://dev.twitter.com/docs/things-every-developer-should-know
From the Twitter documentation (incase it is moved again):
suppress_response_codes: If this
parameter is present, all responses
will be returned with a 200 OK status
code - even errors. This parameter
exists to accommodate Flash and
JavaScript applications running in
browsers that intercept all non-200
responses. If used, it's then the job
of the client to determine error
states by parsing the response body.
Use with caution, as those error
messages may change.

Categories

Resources