Smashing Magazine - #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.

Smashing Online Events
Meet Smart Interface Design Patterns, our new 6h-video course with 100s of real-life examples on UI and UX. Free preview

Smashing Online Events
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:


6. Page Speed Audit & Analysis

If you’re looking for a quick and easy way to check for page speed, Gaël MétaisYellow 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


10. Recent Smashing Articles


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

unsubscribe update preferences view in your browser

Key phrases

Older messages

#349: SVG

Tuesday, April 19, 2022

With SVG masks, SVG Grids, grainy gradients, SVG cut outs, image grids and conversion from bitmap to SVG. Issue #349: SVG • Apr 19, 2022 • View in the browser 💨 Smashing Newsletter Dear Smashing

#348: UX and Interface Design

Tuesday, April 12, 2022

On interface design, accordions, breadcrumbs, contextual menus, motion in UX and design patterns. Issue #348 • Apr 12, 2022 • View in the browser 💨 Smashing Newsletter Tâi-gí Smashing Friends,

#347: Web Performance

Tuesday, April 5, 2022

On Core Web Vitals, 3rd-Party-Scripts, B/F Cache, Priority Hints and responsive images preloading. Issue #347: Web Performance • Apr 5, 2022 • View in the browser 💨 Smashing Newsletter Dear Smashing

#346: UX and Interface Design

Tuesday, March 29, 2022

How to prevent errors, measure usability, dive into internationalization and User Research Report 2022. Issue #346 • Mar 29, 2022 • View in the browser 💨 Smashing Newsletter Dear Smashing Friends, A

#345: Little Front-End Utilities

Tuesday, March 22, 2022

With a resource hints validator, VS Code extensions, hidden npm packages, tools for third-parties, user testing and useful round-ups. Issue #345 • Mar 22, 2022 • View in the browser 💨 Smashing

Net Losses 🥅

Friday, April 8, 2022

Networking tech you probably can't use because it's so obscure. Here's a version for your browser. Hunting for the end of the long tail • April 08, 2022 Today in Tedium: If you're using

A Rust-based terminal, a devkit for CI/CD pipelines, a collaborative API dev env, and more

Thursday, April 7, 2022

StackShare Weekly Email not displaying correctly? View it in your browser. StackShare Weekly Digest April 7th, 2022 Sponsored by CircleCI. Let CircleCI focus on CI/CD, so you can build the next big

The 5 Most Bizarre Phones of All Time

Thursday, April 7, 2022

Did You Know?: If you look closely over John Lennon's shoulder on the iconic cover of The Beatles Abbey Road album, you can see a man standing on the sidewalk. That man was an American tourist,

Weekender: 8 Social Media Marketing Trends and Predictions for 2022 and Beyond [Infographic]

Saturday, September 18, 2021

Sept.​ 18,​ 2021 Sign up | Forward Upfluence BROUGHT TO YOU BY — Upfluence 5 Influencer Strategy Mistakes to Avoid Our experts identified the 5 most common mistakes made by marketers and offer the best

Apple blocked the FlickType Watch keyboard then announced a clone of it — and Bespoke Synth 1.0 – open-source software modular synthesizer

Wednesday, September 15, 2021

Issue #527 — Top 20 stories of September 16, 2021 Issue #527 — September 16, 2021 You receive this email because you are subscribed to Hacker News Digest. You can open it in the browser if you prefer.

Your Wednesday Briefing

Tuesday, September 14, 2021

Ignored warnings about India's Covid crisis. View in browser|nytimes.com Continue reading the main story Morning Briefing, Asia Edition September 15, 2021 Author Headshot By Melina Delkic Writer,