#350: Front-End Debugging

With memory debugging, terminal tips, debugging strategies, DevTools and debugging tooling. Issue #350 • Apr 26, 2022 • [View in the browser]( 💨 [Smashing Newsletter]( Dear Smashing Friends, A few years back, when adjusting SmashingMag’s navigation, I found myself wondering why an active navigation item in the top bar looked so grainy on screen. It had a solid background, yet there was a quite strange gradient that seemed to be going from one shade of red to another via some sort of a grey zone. For hours, I’ve tried to debug CSS on one screen and review the results on my secondary screen. Reduce and isolate the bug, remove everything that’s unrelated and set !important everywhere. Despite my efforts, I couldn’t understand what the problem was. Many hours later, that bug was still there, and I was getting quite desperate. At some point, I was certain that I have discovered a mysterious Chrome bug, and I was just about to file an issue on the Chromium bug tracker. But just as I opened a new tab in the browser on my secondary screen, I realized that the same issue persisted there. It wasn’t the CSS that was a problem, but a few dead pixels appearing on my secondary display. Hopefully, your debugging strategies are slightly more effective than mine. And if they are not, we’ve prepared a couple of useful techniques and tools for better debugging in this very newsletter. From memory debugging to better use of Terminal to CSS debugging techniques and helpful tooling for debugging. We hope you’ll find them useful. Ah, we also have [online workshops]( recently announced [SmashingConfs 2022]( as well as a weekly [new newsletter on everything interface design]( and UX — but you probably know that already, don’t you? ;) Always check that secondary screen, everyone! Successful debugging! — Vitaly (@smashingmag) --------------------------------------------------------------- 1. JS Memory Heap Snapshot Visualization Tool The Memory tool in DevTools allows us to take a heap snapshot and explore its contents. However, parsing the retainers tree view can be quite difficult. Jose Leal’s prototype for a [JS memory heap snapshot visualization tool]( offers a more visual approach. [Heap Snapshot Playground]( Want to give it a try? You can [upload a heap snapshot file to the playground]( and explore the connections from the GC roots or focus on a single object and visualize its retainer chain all the way up to a root. The different visualizations make exploring the file a lot more straightforward and save you time when isolating a single retainer chain for an object in the heap. (cm) --------------------------------------------------------------- 2. Terminal For Front-End Developers Terminal has a well-earned reputation for being intimidating and tricky for beginners. However, if you’re working with frameworks like React, Angular, or Vue, there’s no getting around the command line. Josh W. Comeau wrote a fantastic [guide]( that helps front-end developers get comfortable with the terminal, in a remarkably short amount of time. [The Front-End Developer’s Guide To The Terminal]( As Josh points out, as a front-end developer, you don’t really need to know 98% of the stuff you can do with the terminal, that’s why his guide focuses on the most important, critical fundamentals only, the things you need to know to work with modern JavaScript frameworks — to run a local development server or build your application. If you ever felt overwhelmed by the terminal, this is the guide for you. (cm) --------------------------------------------------------------- From our sponsor The Developer’s Guide To Core Web Vitals [The Developer’s Guide To Core Web Vitals]( The introduction of Core Web Vitals (CWV) presents developers with a new challenge and a new opportunity to improve user experience. In this [definitive guide]( you’ll get best-practice advice, a proven workflow, and actionable tips to start improving your Core Web Vitals and enhancing your end-user experience today. --------------------------------------------------------------- 3. Debugging Tips And Techniques Clean code is the foundation of any app or site. Otherwise, you risk bugs, performance issues, or layout problems. But what to do if you run into bugs? How to best find the root of an issue? If you’re experiencing unexpected layout results, Stephanie Eckles’ [guide to debugging CSS]( is for you. She looks at different categories that bugs fit into and explores how to evaluate the situation as well as techniques that help prevent these bugs. Ahmad Shadeed’s eBook [Debugging CSS]( is also a great companion to help you improve your CSS debugging skills and reduce the time you spend on bugs. [Debugging Techniques]( If your React app doesn’t feel fast anymore, Ben Schwarz walks you through finding and [fixing slow React component code with Chrome DevTools](. While the article is focused on React, you’ll learn concepts that can be applied to Angular, Vue, and just about anything written in JavaScript, too. An alternative to debugging with Chrome DevTools might be React Developer Tools or the “Profiler” React component. Dale Webb [summarized how they can help you when debugging React](. You need to debug code that’s neither CSS nor React? Rocío Belfiore summarized some relatively simple [debugging techniques]( that aren’t language-specific and that can be applied to nearly any type of software. Happy debugging! (cm) --------------------------------------------------------------- 4. View Source Code Everywhere The keyboard shortcut to view the source code of a page is every developer’s best friend, right? Well, at least on desktop devices. Viewing the source on mobile usually involves quite some fiddling around. If you’ve been looking for a simple solution for when you’re on the go, Adam Newbold’s site [View Source]( is for you. [View Source]( To view a page’s source code, just paste the URL into the search bar of View Source, and it’ll fetch and display the source code for you — with syntax highlighting and numbered lines. You can even define if you want to wrap lines or tidy the markup for a better overview. One for the bookmarks. (cm) --------------------------------------------------------------- 5. Upcoming Workshops & Meet-ups You might have heard it: we run [online workshops and trainings around frontend and design]( be it accessibility, performance, navigation, or landing pages. In fact, we have a couple of new workshops coming up soon, and we thought that, you know, you might want to join in as well. [Smart Interface Design Patterns]( Meet [Smart Interface Design Patterns]( our new 6h-video course with 100s of real-life examples on UI and UX. [Free preview]( - [Smart Interface Design Patterns]( a 6h-video course with Vitaly Friedman, - [Interface Design Patterns UX Training]( taking place in September 2022. Early-tickets. [Smashing Online Workshops]( With [online workshops]( we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are. As always, here’s an overview of our [upcoming workshops]( - [Web Performance Masterclass]( Dev with Harry Roberts. May 3–17 - [Smart Interface Design Patterns, 2022 Edition]( UX with Vitaly Friedman. May 5–19 - [DevOps Masterclass]( Dev with Denys Mishunov. May 16–30 - [The Fundamentals of UX Writing]( UX Yuval Keshtcher. May 18–26 - [UX for Mobile eCommerce Masterclass]( UX Rinaldo Ugrina. May 23 – June 6 - [Jump to all online workshops →]( --------------------------------------------------------------- 6. Page Speed Audit & Analysis If you’re looking for a quick and easy way to check for page speed, [Gaël Métais]( [Yellow Lab Tools]( has got you covered. The free and open-source page speed test checks if your page respects performance best practices, detects front-end issues and provides precise guidance on how to fix performance issues. [Yellow Lab Tools]( To run a test, you can enter a URL and select if you want to check on a phone, tablet, or desktop device (there’s a separate HD desktop option, too). The results highlight everything from oversized images, DOM elements count, and JS execution time to CSS complexity and syntax errors, unused unicode ranges, disabled caching, and much more. A great overview that shows you at a glance where there’s room for performance improvements. (cm) --------------------------------------------------------------- 7. DOM Treemap For Chrome DevTools Have you ever had a Google Lighthouse audit complaining an excessive DOM size and you wondered where in your document most DOM nodes are buried? Lighthouse and DevTools aren’t any help if you want to find those areas. That’s where [DOM Treemap]( comes in. [DOM Treemap]( Built by [Christian Schaefer]( DOM Treemap extends your Chrome DevTools Elements tab with an additional pane that visualizes the distribution of node descendants of the currently inspected DOM element. This makes it easy to drill down your DOM and locate those hidden node-heavy parts. If you also want to keep an eye on your BEM components, an extra tab gives you a treemap that visualizes how node-intensive they are on average. A great power boost for DevTools. (cm) --------------------------------------------------------------- From our sponsor Communicate At The Speed Of Thought. Try Whimsical On Your Next Project. [Communicate At The Speed Of Thought. Try Whimsical On Your Next Project.]( Whimsical offers versatile boards that enable you to collaborate across [wireframes]( [diagrams]( [mind maps]( and more. Designers and UX Engineers love Whimsical for the rich library of configurable elements, thousands of built-in icons, and intuitive keyboard shortcuts. Keep ideas moving forward faster. --------------------------------------------------------------- 8. A Web Browser To Think Clearly A web browser that helps programmers think clearly? That’s exactly what [Bonsai]( attempts to do. The dashboard web browser was built specifically for developers to make looking up docs and searching information more efficient. [Bonsai]( No matter where you are, you can toggle Bonsai on and off with a hotkey when you need to look something up when programming and pin it in your editor if you want. All your browser tabs are grouped by domain for easy organization, you can add tags, and if you find something particularly interesting, you can drop it in a workspace. A powerful helper to manage information overload and keep you on task. And if you need a powerful suite of developer tools in one, [Polypane]( is a fantastic standalone browser for developers which allows to build and test for responsive design, check for accessibility and have multiple views of the site side-by-side. (cm) --------------------------------------------------------------- 9. New On Smashing Job Board - [UX / Interaction Designer]( at Aquent Studios (Remote, USA) - [IT Specialist]( at U.S. Securities & Exchange Commission (Wash., DC) - [Senior Backend Developer]( at HDNET GmbH & Co. KG (Werther, Germany) --------------------------------------------------------------- 10. Recent Smashing Articles - [What If Our Sliders Actually Slid?]( - [Testing The CLI The Way People Use It]( - [Designing Better Navigation With Navigation Queries]( - [Productivity Tools For A More Efficient Workflow]( - [Jamstack Rendering Patterns: The Evolution]( - [The Ultimate Guide To Push Notifications For Developers]( - [How To Use Storytelling In UX]( --------------------------------------------------------------- That’s All, Folks! Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time! --------------------------------------------------------------- This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris LjeÅ¡njanin (il). Sent to truly [smashing]( readers via [Mailchimp](. We sincerely appreciate your kind support. You rock. [Follow us on Twitter]( • [Join us on Facebook]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](