Learn how to Debug Browser Redirects

Redirects are dangerous to your web site guests as a result of they lead to extra HTTP requests which make pages load slower. As a result of they contribute to a foul consumer expertise, your search engine marketing may also undergo and you may rank decrease in Google Search.

Sadly, redirects could be difficult to debug since you immediately go to the vacation spot URL, with out a lot time to consider and even acknowledge what’s occurring.

Acquiring data is essential, in any other case you are surrounded by uncertainty, nothing is sensible, and also you get annoyed. Having extra instruments at your disposal provides you extra choices to check and leads you to an answer method quicker and simpler.

DevTools

The primary device I might suggest is a device you most likely have already got, and it is in its identify — DevTools(opens in new tab). It may be helpful for lots of issues, redirects included:

2. Toggle the “Community” panel.

As you may see, DevTools gives very helpful details about the request that resulted in a redirect:

If you happen to’ve mounted the issue, nevertheless it simply “will not work”, then you definately could be going through a caching subject and my explanation for browser cache and edge cache(opens in new tab) might make it easier to perceive what is going on on.

It is also necessary to notice that browsers have particular, extra aggressive caching habits with regards to 301 redirects, as defined in this Stack Overflow answer(opens in new tab):

Within the absense of cache management directives that specify in any other case, a 301 redirect defaults to being cached with none expiry date.

The place DevTools falls brief, nonetheless, is once you’re coping with a client-side JavaScript redirect(opens in new tab). DevTools will not maintain the HTML doc physique upon touchdown on the vacation spot URL and you will not be capable to examine the JavaScript of the web page in query to determine what occurred. Regardless of having the “Protect log” setting enabled, DevTools nonetheless will not seize the physique:

To get round that, you may prefix the problematic URL with view-source: in your browser’s handle bar and hit “Enter”. This can show the HTML of the web page, however with out rendering it (and with out executing the scripts inside):

Now, you may see the script that causes the redirect. The above instance may be very minimal and apparent, nonetheless. In the true world, the precise line of JavaScript that redirects could be hidden in externally loaded scripts, so that you’d have to look these as properly.

Browser Extension

Utilizing DevTools and view-source is helpful when you’ve gotten a concrete subject that you just wish to resolve. However redirects occur so rapidly that generally you won’t even discover that one thing had occurred in any respect. And the way probably is it that you’re going to casually be viewing requests in DevTools and taking a look at their standing codes…

That is the place the Link Redirect Trace(opens in new tab) browser extension can assist you out. Whenever you navigate to a web page, it retains observe of all redirects that occurred throughout the course of, permitting you to see the chain of occasions:

The cool factor is that it’ll additionally show any redirects which will have occurred as you casually browse the positioning. All it’s a must to do is to look over on the extension’s badge and see if it shows something aside from “200”:

cURL

Utilizing the browser can lengthen the suggestions loop whereas fixing one thing — you must make the change, swap to the browser, refresh the web page… and you may also overlook to disable the browser cache, which may confuse you tremendously.

Because of this, you need to use the cURL(opens in new tab) program. It does only a single job — make a request and print out a response. It is fast, doesn’t have caching mechanisms (just like the browser), and runs within the terminal, which is probably going already by your facet whereas working.

Utilizing the -i flag, you may print the total response of a request:

curl -i https://dodov.dev/test-redirect-js

HTTP/2 200 
date: Sat, 29 Apr 2023 05:51:51 GMT
cache-control: public, max-age=1800
last-modified: Sat, 29 Apr 2023 05:50:22 GMT
cf-cache-status: HIT

<script>window.location.href = "https://dodov.dev/weblog/how-to-debug-browser-redirects";</script>

As you may see, you get all the pieces worthwhile in a single place — the HTTP standing code, the headers, and the physique. You could possibly additionally very simply rerun the command once more and see the potential modifications.

Observe: I’ve eliminated among the response headers in these examples as a result of they are not related to what we’re speaking about.

Here is what we get for a 301 redirect:

See Also

Your dementia threat is highest should you sit for longer than this every day

curl -i https://dodov.dev/test-redirect-301

HTTP/2 301 
date: Sat, 29 Apr 2023 06:01:30 GMT
cache-control: public, max-age=1800
location: /weblog/how-to-debug-browser-redirects
cf-cache-status: HIT

This time, the HTTP standing code is 301, fairly than 200, and as a substitute of a response physique with a script tag, we get a location header that determines the URL vacation spot.

Printing solely headers

By default, cURL returns the response physique and the -i flag makes it embody the response headers as properly. However until you are coping with a JavaScript redirect, you will solely wish to be trying on the headers and the response physique would do nothing greater than to muddle your terminal.

To print out simply the headers with cURL, it’s a must to use the -I flag (observe that it is capital “I”, not -i), which solely prints out the doc data (headers). Nevertheless, this additionally modifications the request technique to HEAD(opens in new tab), and the browser points GET requests for HTML paperwork, so it is sensible to make use of the -X flag as properly and execute a GET request as a substitute:

curl -I -X GET https://instance.com/

Copy as cURL

There is a fast and straightforward option to transition from testing redirects within the browser to testing them with cURL. You’ll be able to right-click on a request within the “Community” panel, then click on “Copy as cURL”:

After that, you’d be capable to paste a cURL command which points a request that’s an identical to the one the browser would ship, with all the acceptable headers:

curl 'https://dodov.dev/test-redirect-301' 
  -H 'authority: dodov.dev' 
  -H 'settle for: textual content/html,software/xhtml+xml,software/xml;q=0.9,picture/avif,picture/webp,picture/apng,*/*;q=0.8,software/signed-exchange;v=b3;q=0.7' 
  -H 'accept-language: en-US,en;q=0.9' 
  -H 'cache-control: no-cache' 
  -H 'cookie: _ga=GA1.1.236846401.1677490962; _ga_6LMHZGGEMZ=GS1.1.1682655158.6.0.1682655162.0.0.0' 
  -H 'pragma: no-cache' 
  -H 'sec-ch-ua: "Chromium";v="112", "Google Chrome";v="112", "Not:A-Model";v="99"' 
  -H 'sec-ch-ua-mobile: ?0' 
  -H 'sec-ch-ua-platform: "macOS"' 
  -H 'sec-fetch-dest: doc' 
  -H 'sec-fetch-mode: navigate' 
  -H 'sec-fetch-site: none' 
  -H 'sec-fetch-user: ?1' 
  -H 'upgrade-insecure-requests: 1' 
  -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36' 
  --compressed

That is actually helpful, as a result of you may remark out or change varied headers and see how that will have an effect on the reponse. You mainly cannot do this within the browser in any respect.

Conclusion

Redirects are necessary as a result of they negatively impression consumer expertise and search engine marketing. They’re additionally difficult to find and debug as a result of they’re delicate and instantaneous. However with the precise instruments, you may catch and repair them fairly simply:

It doesn’t matter what you employ, be sure to at all times check within the browser as properly once you’re executed. That is the place your customers are.

If you happen to discovered that helpful, you may tune in to my upcoming advices and options by following me on Twitter(opens in new tab) or LinkedIn(opens in new tab).