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!
Vibration API
Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user. One of those simple APIs the Vibration API. The Vibration API allows developers to direct the device, using JavaScript, to vibrate in…
Create Namespaced Classes with MooTools
MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does. Many developers create their classes as globals which is generally frowned up. I mostly disagree with that stance, but each to their own. In any event…
Parallax Sound Waves Animating on Scroll
Scrolling animations are fun. They are fun to create and fun to use. If you are tired of bootstrapping you might find playing with scrolling animations as a nice juicy refreshment in your dry front-end development career. Let’s have a look how to create animating…
Ana Tudor’s Favorite CodePen Demos
Cocoon I love canvas, I love interactive demos and I don’t think I have ever been more impressed by somebody’s work than when I discovered what Tiffany Rayside has created on CodePen. So I had to start off with one of her interactive canvas pens, even though…
Source link
