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.
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.
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 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.
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.
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.
Meet Smart Interface Design Patterns, our new 6h-video course with 100s of real-life examples on UI and UX. Free preview
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é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.
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.
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.
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.
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
0 Komentar untuk "#350: Front-End Debugging"