CategoryDebugging

January 12, 2021 — Let’s make 2021… fast! An annual front-end performance checklist, with everything you need to know to create fast experiences on the web today, from metrics to tooling and CSS/JavaScript techniques. Read more…

August 13, 2020 — In this article, Umar Hansa will demonstrate some useful features in DevTools which can help you improve the accessibility of your website. For many websites, things like performance and accessibility are an afterthought. But as web developers, it’s best to strive to create the best possible experience we can for our users, regardless of their abilities. This article uses Google Chrome since it’s a browser I use and feel comfortable with. That being said, Firefox, Safari, and Edge have all made great strides in their developer tools, and they definitely have some great accessibility-related features of their own. Read more…

March 27, 2020 — You don’t need to know your trees from your dangling blobs. If you use Git every day and feel like it’s a juggling act, then here are some tricks and tips to help make your life a bit easier. There’s been a lot written about getting started with git, understanding how git works under the hood or techniques for better branching strategies. In this article, Shane Hudson will specifically target the stuff that just makes your life better in a small way. Read more…

October 10, 2019 — The web has seen an incredible evolution in the last decade: new HTML/CSS features, browser improvements, and design techniques. Ever since releasing Grid Inspector, the Firefox DevTools team has been inspired to build a new suite of tools to solve the problems of the modern web. In this article, Victoria Wang will tell you everything about all 7 tools and take a peek at potential future projects, with stories from the design process and practical steps for trying out each tool. Read more…

May 30, 2018 — Debugging data ranges from simple things like API response latency to monitoring a user’s network health. Without the right framework and tools, the debugging process can be a nightmare. That’s why Akhil Labudubariki developed his own in-house Central Logging Service tool (CLS) to record all important events logged during a session. In this article, Akhil walks through a number of steps and considerations his team made when developing their own in-house Central Logging Service (CLS) tool. Read more…

February 1, 2018 — JavaScript is essential to any advanced web app, so a strong debugger is a key part of the toolset. In this article, Dustin Driver and Jason Laster find out how the new Firefox JavaScript debugger can help you write fast, bug-free code. They will crack open a very simple to-do app with Debugger divided into three panes: the source list pane, the source pane, and the tool pane.. Here’s how it works! Read more…

December 4, 2017 — In this article, Huijing Chen covers known and obscure features of Firefox DevTools that can come in handy when you’re building and debugging CSS Grid layouts. You may have heard quite a bit of talk about a CSS feature called “Grid” this year. If you are someone who cringes when you hear the words “CSS” and “grid” in the same sentence, then I highly suggest you check out this new CSS module called CSS Grid. Read more…