Issue #413 (DebugBear Review, Text Editors, Build Tools, React)06/17/21
The following intro is a paid product review for DebugBear, a Lighthouse-based website speed monitoring tool that provides in-depth reports for developers.
I love the variety of speed testing tools that I come across when doing research for this newsletter. One that you’ll definitely want to check out is DebugBear, a service that continuously tests your pages for Lighthouse scores, Web Vitals, and more.
DebugBear isn’t a run-once-and-done kind of tool that you normally see, but it will continuously monitor your pages at specified intervals, providing you with in-depth reports on what needs to be improved.
Once you’ve signed up for a trial, you can add monitored pages/URLs grouped into different projects.
Adding a Page to Monitor in DebugBear
For each project, fill in the frequency, devices to test on, and region to test from. To quickly add multiple pages that use the same settings, you can use the “Bulk create” option.
Once you’ve added one or more pages for continuous monitoring, the first tests will begin running. When they’re ready, you’ll see the reports in your dashboard, ready for analysis. Here I’ve bulk-added four of my sites for monitoring:
Monitored Pages in DebugBear
You can filter by Desktop, Mobile, or search via keyword. In my case, the scores on the right give me an overview of where I’ll need to make improvements. The default scores shown are for Lighthouse, but you can also click to view Performance scores:
Performance of Monitored Pages in DebugBear
Or see a Filmstrip view of the loading process for each page:
DebugBear's Filmstrip View for Monitored Pages
From the Monitored Pages view you can click on any of the pages being monitored to examine each of the reports in detail. From there you can analyze any of the following:
- Requests, including an examination of page weight and all the resources being loaded, with load time for each one
- Performance scores based on Web Vitals and Lighthouse
- A full Lighthouse audit
- HTML Validation
- Console errors, warnings, and logs
If you’d like to see a few reports without signing up, the DebugBear team have set up a Public Demo Project with various sites being continuously monitored, including a Trello board, a NY Times article, and more.
These public projects demonstrate another nice feature of DebugBear: the ability to track bundle sizes over time.
Track bundle sizes over time with DebugBear
In the screenshot above, I’m looking at the changes in bundle size over a 3-month period for resources loading on the Trello board. The same page lets you view a request waterfall for the requested resources and how the sizes and load times changed over the specified period.
A lot of these tests are things you’d have to run separately or manually with other tools, so it’s nice to have them all in one place like this. Additionally, you can integrate DebugBear with GitHub to run it as part of a Continuous Integration (CI) process.
Running DebugBear as part of a CI process
This allows you to monitor things like bundle sizes and Lighthouse scores on each commit.
DebugBear also lets you set up a performance budget. This is a powerful feature that can prevent a project from suffering from performance regressions over the course of many commits. Currently, DebugBear lets you set up a performance budget based on the following metrics:
- Page weight (e..g. Total, HTML, JavaScript, etc)
- Lighthouse scores
- Web Vitals
- Speed Index
- Time to Interactive
Setting up a Performance Budget in DebugBear
Here I've added three metrics to my budget. With this in place, if my budget thresholds are crossed, I'll be alerted. If I've set up continuous integration, my build will fail and I can respond accordingly.
Another feature you might like is the ability to compare tests. The public demo project includes a comparison between NY Times desktop and NY Times mobile.
Comparing NY Times Desktop vs. Mobile
In some cases, you might want more control over the devices being used for the tests. You can configure these via DebugBear’s Device Definitions feature. This allows you to select either a desktop or mobile device, then drill down to change settings like bandwidth, round-trip latency, CPU throttling, and more.
Setting Device Definitions in DebugBear
As you can see, DebugBear is powerful tool to anchor your continuous performance testing workflow. There are lots more features that I haven’t touched on here (for example, setting up alerts, defining server locations, data export, and more) but you can check out the DebugBear docs for a full overview of what DebugBear can do.
You can sign up for a 14-day trial of DebugBear today if you want to try it out with no commitment. The pricing page lists details on the different plans available (click the “show starter plans” link for the less expensive options).
Now on to this week's tools!
