Debugging Ajax Calls

Overview • HTTP request/response • Chrome Network Tools • Filtering
request/responses • Request/response details • Copying and replaying • Inspecting Errors • XHR breakpoints • What are we doing?

A HTTP request/response $ curl http://chad.is/ -v Curl (sometimes spelled
cURL) is a command-line based tool for making HTTP requests

A HTTP request/response $ curl http://chad.is/ -v * Hostname was
NOT found in DNS cache * Trying 192.30.252.153... * Connected to chad.is (192.30.252.153) port 80 (#0) > GET / HTTP/1.1 > User-Agent: curl/7.37.1 > Host: chad.is > Accept: */* > < HTTP/1.1 200 OK * Server GitHub.com is not blacklisted < Server: GitHub.com < Date: Sun, 16 Jul 2017 06:05:39 GMT < Content-Type: text/html; charset=utf-8 < Content-Length: 2303 < Last-Modified: Sat, 08 Jul 2017 09:09:13 GMT < Access-Control-Allow-Origin: * < Expires: Sun, 16 Jul 2017 06:15:39 GMT < Cache-Control: max-age=600 < Accept-Ranges: bytes < X-GitHub-Request-Id: 5FE0:0DE8:A7B67D:EC9F7F:596B0233 < <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="description" content="Chad Mazzola lives in Stockholm, Sweden."> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <title>Chad Mazzola</title> <link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i" rel="stylesheet"> <link rel="stylesheet" href="/stylesheets/application.css"> <link href="/feeds/articles.xml" rel="alternate" title="RSS feed" type="application/atom+xml"> <script type="text/javascript"> var _gaq = _gaq || []; …

The Request $ curl http://chad.is/ -v * Hostname was NOT
found in DNS cache * Trying 192.30.252.153... * Connected to chad.is (192.30.252.153) port 80 (#0) > GET / HTTP/1.1 > User-Agent: curl/7.37.1 > Host: chad.is > Accept: */* > < HTTP/1.1 200 OK * Server GitHub.com is not blacklisted < Server: GitHub.com < Date: Sun, 16 Jul 2017 06:05:39 GMT < Content-Type: text/html; charset=utf-8 < Content-Length: 2303 < Last-Modified: Sat, 08 Jul 2017 09:09:13 GMT < Access-Control-Allow-Origin: * < Expires: Sun, 16 Jul 2017 06:15:39 GMT < Cache-Control: max-age=600 < Accept-Ranges: bytes < X-GitHub-Request-Id: 5FE0:0DE8:A7B67D:EC9F7F:596B0233 < <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="description" content="Chad Mazzola lives in Stockholm, Sweden."> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <title>Chad Mazzola</title> <link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i" rel="stylesheet"> <link rel="stylesheet" href="/stylesheets/application.css"> <link href="/feeds/articles.xml" rel="alternate" title="RSS feed" type="application/atom+xml"> <script type="text/javascript"> var _gaq = _gaq || []; …

The Response $ curl http://chad.is/ -v * Hostname was NOT
found in DNS cache * Trying 192.30.252.153... * Connected to chad.is (192.30.252.153) port 80 (#0) > GET / HTTP/1.1 > User-Agent: curl/7.37.1 > Host: chad.is > Accept: */* > < HTTP/1.1 200 OK * Server GitHub.com is not blacklisted < Server: GitHub.com < Date: Sun, 16 Jul 2017 06:05:39 GMT < Content-Type: text/html; charset=utf-8 < Content-Length: 2303 < Last-Modified: Sat, 08 Jul 2017 09:09:13 GMT < Access-Control-Allow-Origin: * < Expires: Sun, 16 Jul 2017 06:15:39 GMT < Cache-Control: max-age=600 < Accept-Ranges: bytes < X-GitHub-Request-Id: 5FE0:0DE8:A7B67D:EC9F7F:596B0233 < <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="description" content="Chad Mazzola lives in Stockholm, Sweden."> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <title>Chad Mazzola</title> <link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i" rel="stylesheet"> <link rel="stylesheet" href="/stylesheets/application.css"> <link href="/feeds/articles.xml" rel="alternate" title="RSS feed" type="application/atom+xml"> <script type="text/javascript"> var _gaq = _gaq || []; …

The Request: In Detail GET / HTTP/1.1 User-Agent: curl/7.37.1 Host:
chad.is Accept: */*

chad.is Accept: */* Method

chad.is Accept: */* Path (a.k.a the URI)

chad.is Accept: */* HTTP version

chad.is Accept: */* HTTP Headers

chad.is Accept: */* Blank line

The Response: In Detail HTTP/1.1 200 OK Server: GitHub.com Date:
Sun, 16 Jul 2017 06:05:39 GMT Content-Type: text/html; charset=utf-8 Content-Length: 2303 Last-Modified: Sat, 08 Jul 2017 09:09:13 GMT Access-Control-Allow-Origin: * Expires: Sun, 16 Jul 2017 06:15:39 GMT Cache-Control: max-age=600 Accept-Ranges: bytes X-GitHub-Request-Id: 5FE0:0DE8:A7B67D:EC9F7F:596B0233 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="description" content="Chad Mazzola lives in Stockholm, Sweden."> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <title>Chad Mazzola</title> <link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i" rel="stylesheet"> <link rel="stylesheet" href="/stylesheets/application.css"> <link href="/feeds/articles.xml" rel="alternate" title="RSS feed" type="application/atom+xml"> <script type="text/javascript"> var _gaq = _gaq || []; …

Sun, 16 Jul 2017 06:05:39 GMT Content-Type: text/html; charset=utf-8 Content-Length: 2303 Last-Modified: Sat, 08 Jul 2017 09:09:13 GMT Access-Control-Allow-Origin: * Expires: Sun, 16 Jul 2017 06:15:39 GMT Cache-Control: max-age=600 Accept-Ranges: bytes X-GitHub-Request-Id: 5FE0:0DE8:A7B67D:EC9F7F:596B0233 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="description" content="Chad Mazzola lives in Stockholm, Sweden."> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <title>Chad Mazzola</title> <link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i" rel="stylesheet"> <link rel="stylesheet" href="/stylesheets/application.css"> <link href="/feeds/articles.xml" rel="alternate" title="RSS feed" type="application/atom+xml"> <script type="text/javascript"> var _gaq = _gaq || []; … HTTP version

Sun, 16 Jul 2017 06:05:39 GMT Content-Type: text/html; charset=utf-8 Content-Length: 2303 Last-Modified: Sat, 08 Jul 2017 09:09:13 GMT Access-Control-Allow-Origin: * Expires: Sun, 16 Jul 2017 06:15:39 GMT Cache-Control: max-age=600 Accept-Ranges: bytes X-GitHub-Request-Id: 5FE0:0DE8:A7B67D:EC9F7F:596B0233 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="description" content="Chad Mazzola lives in Stockholm, Sweden."> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <title>Chad Mazzola</title> <link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i" rel="stylesheet"> <link rel="stylesheet" href="/stylesheets/application.css"> <link href="/feeds/articles.xml" rel="alternate" title="RSS feed" type="application/atom+xml"> <script type="text/javascript"> var _gaq = _gaq || []; … Status Code and message

Response: The Status Code

Response: The Status Code 1xx Informational responses. 2xx Success. 3xx
Redirection. 4xx Client errors. 5xx Server errors.

Success Response Codes 200 - Ok 201 - (Successfully) created
202 - Accepted more…

Error Status Codes 400 - Bad Request (it was your
fault) 401 - Unauthorized 403 - Forbidden 404 - Not Found 405 - Method Not Allowed (maybe you are using GET where you are supposed to use POST) 500 - Internal Server Error (it was our fault) 501 - Not Implemented 502 - Bad Gateway (you are accessing this through a proxy server, and the proxy server got an error from the original server) more…

Sun, 16 Jul 2017 06:05:39 GMT Content-Type: text/html; charset=utf-8 Content-Length: 2303 Last-Modified: Sat, 08 Jul 2017 09:09:13 GMT Access-Control-Allow-Origin: * Expires: Sun, 16 Jul 2017 06:15:39 GMT Cache-Control: max-age=600 Accept-Ranges: bytes X-GitHub-Request-Id: 5FE0:0DE8:A7B67D:EC9F7F:596B0233 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="description" content="Chad Mazzola lives in Stockholm, Sweden."> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <title>Chad Mazzola</title> <link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i" rel="stylesheet"> <link rel="stylesheet" href="/stylesheets/application.css"> <link href="/feeds/articles.xml" rel="alternate" title="RSS feed" type="application/atom+xml"> <script type="text/javascript"> var _gaq = _gaq || []; … Headers

Sun, 16 Jul 2017 06:05:39 GMT Content-Type: text/html; charset=utf-8 Content-Length: 2303 Last-Modified: Sat, 08 Jul 2017 09:09:13 GMT Access-Control-Allow-Origin: * Expires: Sun, 16 Jul 2017 06:15:39 GMT Cache-Control: max-age=600 Accept-Ranges: bytes X-GitHub-Request-Id: 5FE0:0DE8:A7B67D:EC9F7F:596B0233 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="description" content="Chad Mazzola lives in Stockholm, Sweden."> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <title>Chad Mazzola</title> <link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i" rel="stylesheet"> <link rel="stylesheet" href="/stylesheets/application.css"> <link href="/feeds/articles.xml" rel="alternate" title="RSS feed" type="application/atom+xml"> <script type="text/javascript"> var _gaq = _gaq || []; … Blank line

Sun, 16 Jul 2017 06:05:39 GMT Content-Type: text/html; charset=utf-8 Content-Length: 2303 Last-Modified: Sat, 08 Jul 2017 09:09:13 GMT Access-Control-Allow-Origin: * Expires: Sun, 16 Jul 2017 06:15:39 GMT Cache-Control: max-age=600 Accept-Ranges: bytes X-GitHub-Request-Id: 5FE0:0DE8:A7B67D:EC9F7F:596B0233 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="description" content="Chad Mazzola lives in Stockholm, Sweden."> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <title>Chad Mazzola</title> <link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i" rel="stylesheet"> <link rel="stylesheet" href="/stylesheets/application.css"> <link href="/feeds/articles.xml" rel="alternate" title="RSS feed" type="application/atom+xml"> <script type="text/javascript"> var _gaq = _gaq || []; … Body

Sun, 16 Jul 2017 06:05:39 GMT Content-Type: text/html; charset=utf-8 Content-Length: 2303 Last-Modified: Sat, 08 Jul 2017 09:09:13 GMT Access-Control-Allow-Origin: * Expires: Sun, 16 Jul 2017 06:15:39 GMT Cache-Control: max-age=600 Accept-Ranges: bytes X-GitHub-Request-Id: 5FE0:0DE8:A7B67D:EC9F7F:596B0233 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="description" content="Chad Mazzola lives in Stockholm, Sweden."> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <title>Chad Mazzola</title> <link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i" rel="stylesheet"> <link rel="stylesheet" href="/stylesheets/application.css"> <link href="/feeds/articles.xml" rel="alternate" title="RSS feed" type="application/atom+xml"> <script type="text/javascript"> var _gaq = _gaq || []; … Body More content omitted for brevity

Sun, 16 Jul 2017 06:05:39 GMT Content-Type: text/html; charset=utf-8 Content-Length: 2303 Last-Modified: Sat, 08 Jul 2017 09:09:13 GMT Access-Control-Allow-Origin: * Expires: Sun, 16 Jul 2017 06:15:39 GMT Cache-Control: max-age=600 Accept-Ranges: bytes X-GitHub-Request-Id: 5FE0:0DE8:A7B67D:EC9F7F:596B0233 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="description" content="Chad Mazzola lives in Stockholm, Sweden."> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <title>Chad Mazzola</title> <link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i" rel="stylesheet"> <link rel="stylesheet" href="/stylesheets/application.css"> <link href="/feeds/articles.xml" rel="alternate" title="RSS feed" type="application/atom+xml"> <script type="text/javascript"> var _gaq = _gaq || []; … This is HTML Mime Type for HTML

Response Types • HTML - text/html • CSS - text/css
• JavaScript - text/javascript • JSON - application/json

Now you try!! $ curl SOME_URL_YOU_KNOW -v

Chrome Network Tools a.k.a Chrome Dev Tools Network Panel

The Network Tab

Close the console to get more real estate

Red means it’s recording

If you see this, there’s been no request/responses recorded

Perform an action on the page that triggers a new
request

Refresh the page and record all the requests issued as
result of loading the page Click to reload

These are the requests issued to load the page Summary

Waterfall Graph

Waterfall Graph DOM Content Loaded

Waterfall Graph Visual snapshots

Waterfall Graph Toggle snapshots

Now you try! Open a web site of your choice
and look at all requests issued in order to load the page, and the waterfall graph.

Example: Weather App

The Filter Panel

Filter Panel: Search box Filter requests by URL path

Filter Panel: Search box Optionally use regex

Filter Panel: Filter by type

Filter Panel: Filter by type Showing only XHR (Ajax) requests

Drill Down: Request/Response Details Selecting a request shows you more
details

Request/Response Details: Headers tab URL, Method, Status Code, etc

Request/Response Details: Headers tab All response headers

Request/Response Details: Headers tab All request headers

Request/Response Details: Preview

Request/Response Details: Response

Request/Response Details: Timing

Copy Request URL Copy the URL of the request

Open in New Tab Open the URL of the request
in a new tab. Great for GET requests

Copy as cURL Copy a cURL command to your clipboard
which you can use in the terminal!!!

Copy as cURL

Copy as cURL Will preserve all headers/cookies so will work
even when authentication is required by the backend

Replay the Request Issue this same exact request

Replay the Request The new duplicate request

Now you try!! • Open a web site / web
app of your choice • Look at all request/responses • Use the ﬁlter panel to look at only the Ajax request/responses • Use the text ﬁlter to view only the requests with a particular substring in the URL • Select a particular request/response and inspect the, headers tab, preview tab, response tab, and the timing tab • Re-issue the request by copying its URL, a cURL command, or by replaying the request

Errors

I am going to induce an error by putting in
a bogus city name

A request that came back with a 404 (not found)
error

Coming from the Console Tab When you encounter an error
response, you will see it in your console as well, click on it to switch to the network panel

The clicked request will be highlighted brieﬂy

Let’s select it to see more detail We sent this
in the q parameter

This is the error message from the backend

Let’s run the request using cURL

Pretend you just recognized this as the problem, ﬁx it
in this command and test again

Now we have good data

XHR (Ajax) Breakpoints Use if you don’t know and want
to ﬁnd out what line of code initiated a particular request

First come up with a substring to ﬁlter down to
just the request(s) you are interested in

Add an XHR breakpoint

Type in substring to match on, hit enter

Now induce the request again, in my case, I had
to reload the page. Now the debugger has paused on the line that induces the request

Being dropped into jQuery’s source code might seem intimidating, but
actually, we can relate this to the application code by looking down in the call stack

First frame that came from app.js

First frame that came from app.js. Click on it!

Boom! This is the line that initiated the request

Because we are still in the debugger session, we can
see the variables in the frame, such as city, which has the value “Atlanta”

Now you try!! • Induce an error - 4xx or
5xx (by changing the frontend or backend code) • Set up and test out an XHR breakpoint

What are we actually doing?

Debugging: Isolate the Problem • Which request caused the problem?
• Is it caused by • front-end code • error in the way the request is sent • both the request and response look good, so problem must be with elsewhere in the front-end • back-end code

If you know which request is the relevant or problematic
one

Look at the response status code for that request

Look at the Response or Preview tab in request/response details

Look at the Headers tab in request/response details. Optionally, copy
the cURL command and try to change the command’s URL to ﬁx the request until the response is good

If you don’t know what’s the problematic request • Is
there a request with an error response? Look in the console or look through the list of requests in the Network Tools • Use your knowledge of the code. Which request is supposed to retrieve the data that’s not being displayed correctly, or cause a change to the database correctly?

Performance Tuning • Look at the waterfall graph • Look
at the response times - are individual responses taking a long time? • Look at the number of requests - are there many requests? the fewer the better (Browsers can only send 3-6 requests in parallel) • What are the requests doing? Can we eliminate some of them by batch multiple requests into one

Now you try!! • Think of a problem with your
app that could beneﬁt from using the network tools • Use Chrome Network Tools to isolate the problem

Debugging Ajax Calls

Debugging Ajax Calls

More Decks by Toby Ho

Other Decks in Programming

Featured

Transcript