Use XHR/fetch Breakpoints!

By  on  

Web debugging tools are so incredibly excellent these days. I remember the days where they didn't exist and debugging was a total nightmare, even for the simplest of problems. A while back I introduced many of you to Logpoints, a way to output console.log messages without needing to change the source files. Another great breakpoint type is XHR/fetch breakpoints, allowing you to pause execution when an AJAX call is made. Let's look at XHR/fetch breakpoints!

To set an XHR/fetch breakpoint, open your browser's Developer Tools and click the Sources tab -- the same tab you open for other breakpoints. Under the XHR/fetch accordion item, click the big "+" button. You'll see an empty text input:

Within that text input, type a string that you'd like to break all XHR/fetch calls on. For example, if I wanted to break any time a fetch request was made, I would input davidwalsh.name:

In the case above, a XHR/fetch request breakpoint halts execution because a request is made to https://davidwalsh.name/url-canparse. You'll be able to step through and step into like you can with regular breakpoints, and you'll get a full Call Stack pane to see how execution got to a given point.

XHR/fetch breakpoints are another great way to debug your web app. The more reliant we are on dynamic websites with frequently changing content, debugging fetch calls is a must. Happy debugging!

Recent Features

  • By
    5 HTML5 APIs You Didn’t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

  • By
    Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

Incredible Demos

  • By
    Build a Toggling Announcement Slider Using MooTools 1.2

    A few of my customer have asked for me to create a subtle but dynamic (...I know...) way for them to advertise different specials on their website. Not something that would display on every page, but periodically or only the homepage. Using a trick...

  • By
    Chris Coyier’s Favorite CodePen Demos IV

    Did you know you can triple-heart things on CodePen? We’ve had that little not-so-hidden feature forever. You can click that little heart button on any Pen (or Project, Collection, or Post) on CodePen to show the creator a little love, but you can click it again...

Discussion

  1. // Function to make an XHR request to a fake API
    function makeXHRRequest() {
      const xhr = new XMLHttpRequest();
      xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
    
      // Set a breakpoint here to inspect xhr object
      // debugger;
    
      xhr.onload = function () {
        if (xhr.status === 200) {
          const response = JSON.parse(xhr.responseText);
          console.log('XHR Response:', response);
    
          // Set a breakpoint here to inspect the response
          // debugger;
        } else {
          console.error('XHR Request failed with status:', xhr.status);
        }
      };
    
      xhr.send();
    }
    
    // Function to make a fetch request to a fake API
    async function makeFetchRequest() {
      // Set a breakpoint here to inspect fetch options
      // debugger;
    
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts/2');
        if (!response.ok) {
          throw new Error(Fetch Request failed with status: ${response.status});
        }
    
        const data = await response.json();
        console.log('Fetch Response:', data);
    
        // Set a breakpoint here to inspect the data
        // debugger;
      } catch (error) {
        console.error('Fetch Request Error:', error);
      }
    }
    
    // Call the XHR and Fetch functions
    makeXHRRequest();
    makeFetchRequest();
    

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!