Dev Tips: DevTools: Visualise your JavaScript bundles 📊

Dev Tips

 

DevTools: Visualise your JavaScript bundles 📊

 

Introduction

The Lighthouse Treemap shows a visualisation of your JavaScript bundles. It's compatible with sourcemaps and is great for understanding large JavaScript modules used by your page. It can also visualise unused bytes.


How to use the Lighthouse Treemap

To use the Lighthouse Treemap feature:

  1. With DevTools open, use the shortcut Cmd + Shift + P and search for Lighthouse.
  2. With the Lighthouse Panel open, enable the Performance category and select Generate report.
  3. With the performance report open, select View Treemap.

Nice work! You can now see a Lighthouse Treemap. At this point, you can do the following:

  • Filter by individual bundles.
  • Visualise the unused bytes in the JavaScript files.
  • You can select individual files to dive deeper into them.
  • You can view detailed coverage stats in the coverage section near the bottom of the page.


Bonus

  • Thanks to sourcemaps, the visualisation can show you your original source files, for example your TypeScript files.
  • It can be very helpful to dive into the files part of the node_modules folder. The visualisation clearly shows which third-party scripts occupy a large amount of bytes.
  • You can run Lighthouse from the command line to see the treemap from a report.


Availability

This feature is currently in Chrome Stable, tested in version 95.


Further Resource

You can capture code coverage metrics while you make a Performance recording.

Email Marketing Powered by Mailchimp

Copyright © 2021 Umar, All rights reserved.
You are receiving this email because you signed up for Dev Tips.

unsubscribe from this list    update subscription preferences 

Older messages

DevTips: DevTools: Easily change CSS units and values 🔢

Monday, October 18, 2021

Dev Tips DevTools: Easily change CSS units and values 🔢 Hey all, hope you have a great week! Introduction Changing CSS values/units ( 10px / 1rem / 20vh ) can be cumbersome. Canary DevTools has some

Dev Tips: DevTools: Better accessibility inspection with the Source Order Viewer

Friday, July 30, 2021

Dev Tips DevTools: Better accessibility inspection with the Source Order Viewer 🔎 View this online: umaar.com/dev-tips/245-source-order-viewer / tweet Introduction The Source Order Viewer shows you the

DevTips: DevTools: Easily control typography with the CSS Font Editor 🖊

Friday, July 23, 2021

Dev Tips DevTools: Easily control typography with the CSS Font Editor 🖊 Introduction The Font Editor within the Styles Pane helps you to quickly change typography on a web page - using a visual tool

Dev Tips: DevTools: Using the CSS Grid & Flexbox Editor

Friday, July 16, 2021

Dev Tips DevTools: Better Debugging with the CSS Grid & Flexbox Editor ✨ Hey friends. I took a break from emailing for a while, but I'm grateful to have you all here, part of this amazing Dev

Dev Tips: Only download JavaScript when it is appropriate

Wednesday, December 16, 2020

Learn a few techniques for selectively downloading web page resources Dev Tips Hey everyone! I have a different sort of tip for you today, hope it's useful. JavaScript: Conditional JavaScript, only

You Might Also Like

Data Science Weekly - Issue 588

Thursday, February 27, 2025

Curated news, articles and jobs related to Data Science, AI, & Machine Learning ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

💎 Issue 458 - Why Ruby on Rails still matters

Thursday, February 27, 2025

This week's Awesome Ruby Newsletter Read this email on the Web The Awesome Ruby Newsletter Issue » 458 Release Date Feb 27, 2025 Your weekly report of the most popular Ruby news, articles and

📱 Issue 452 - Three questions about Apple, encryption, and the U.K

Thursday, February 27, 2025

This week's Awesome iOS Weekly Read this email on the Web The Awesome iOS Weekly Issue » 452 Release Date Feb 27, 2025 Your weekly report of the most popular iOS news, articles and projects Popular

💻 Issue 451 - .NET 10 Preview 1 is now available!

Thursday, February 27, 2025

This week's Awesome .NET Weekly Read this email on the Web The Awesome .NET Weekly Issue » 451 Release Date Feb 27, 2025 Your weekly report of the most popular .NET news, articles and projects

💻 Issue 458 - Full Stack Security Essentials: Preventing CSRF, Clickjacking, and Ensuring Content Integrity in JavaScript

Thursday, February 27, 2025

This week's Awesome Node.js Weekly Read this email on the Web The Awesome Node.js Weekly Issue » 458 Release Date Feb 27, 2025 Your weekly report of the most popular Node.js news, articles and

💻 Issue 458 - TypeScript types can run DOOM

Thursday, February 27, 2025

This week's Awesome JavaScript Weekly Read this email on the Web The Awesome JavaScript Weekly Issue » 458 Release Date Feb 27, 2025 Your weekly report of the most popular JavaScript news, articles

💻 Issue 453 - Linus Torvalds Clearly Lays Out Linux Maintainer Roles Around Rust Code

Thursday, February 27, 2025

This week's Awesome Rust Weekly Read this email on the Web The Awesome Rust Weekly Issue » 453 Release Date Feb 27, 2025 Your weekly report of the most popular Rust news, articles and projects

💻 Issue 376 - Top 10 React Libraries/Frameworks for 2025 🚀

Thursday, February 27, 2025

This week's Awesome React Weekly Read this email on the Web The Awesome React Weekly Issue » 376 Release Date Feb 27, 2025 Your weekly report of the most popular React news, articles and projects

February 27th 2025

Thursday, February 27, 2025

Curated news all about PHP. Here's the latest edition Is this email not displaying correctly? View it in your browser. PHP Weekly 27th February 2025 Hi everyone, Laravel 12 is finally released, and

📱 Issue 455 - How Swift's server support powers Things Cloud

Thursday, February 27, 2025

This week's Awesome Swift Weekly Read this email on the Web The Awesome Swift Weekly Issue » 455 Release Date Feb 27, 2025 Your weekly report of the most popular Swift news, articles and projects