#devtools

Subscribe
DevTools is a set of web development tools built into the Chrome browser. They allow developers to inspect and debug HTML, CSS, and JavaScript code on any web page. DevTools provides access to the Document Object Model (DOM), allowing developers to view the structure of a page and make changes to it in real-time. It also provides features such as network performance analysis, JavaScript debugging, and memory profiling, which help developers optimize their code.
JSNation 2023JSNation 2023
29 min
Modern Web Debugging
Few developers enjoy debugging, and debugging can be complex for modern web apps because of the multiple frameworks, languages, and libraries used. But, developer tools have come a long way in making the process easier. In this talk, Jecelyn will dig into the modern state of debugging, improvements in DevTools, and how you can use them to reliably debug your apps.
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Our understanding of performance
&
user-experience has heavily evolved over the years. Web Developer Tooling needs to similarly evolve to make sure it is user-centric, actionable and contextual where modern experiences are concerned. In this talk, Addy will walk you through Chrome and others have been thinking about this problem and what updates they've been making to performance tools to lower the friction for building great experiences on the web.
DevOps.js Conf 2022DevOps.js Conf 2022
31 min
pnpm – a Fast, Disk Space Efficient Package Manager for JavaScript
You will learn about one of the most popular package managers for JavaScript and its advantages over npm and Yarn.
A brief history of JavaScript package managers
The isolated node_modules structure created pnpm
What makes pnpm so fast
What makes pnpm disk space efficient
Monorepo support
Managing Node.js versions with pnpm


Node Congress 2023Node Congress 2023
24 min
Tale of Two Repos
Not all monorepos are made the same, and not all teams are equal. 
Managing a monorepo is way more than just ""let's select this tool or that tool"". It comprises many design decisions that you need to make for the product and for the developers. 
In this talk, I will go over the main monorepos challenges - packages installation and linking, development and deployment processes - and describe the possibilities that exist for each stage. 
At the end of the talk, you will have a simple and powerful model that will help you in making the right choice of tools and processes for your monorepo. 
React Advanced Conference 2022React Advanced Conference 2022
19 min
Building Figma’s Widget Code Generator
Widgets are custom, interactive objects you place in a Figma or Figjam file to extend functionality and make everything a bit more fun. They are written in a declarative style similar to React components, which gets translated to become a node on the canvas. So can you go the other way, from canvas to code? Yes! We’ll discuss how we used the public Figma plugin API to generate widget code from a design file, and make a working widget together using this.
React Advanced Conference 2022React Advanced Conference 2022
19 min
Understand Your Codebase to Innovate Faster
The transition from a monolithic architecture to a service based approach began a number of years ago. The advantage of a service based approach is to increase agility and shorten the build and release development cycle. And more recently the rise of micro frontends means that this approach not only encompasses backend application but also frontend development. However one side effect is increased complexity of the codebase. Resulting in challenges in terms of visibility into how components relate, who owns a component and the impact of activities on dependent components. This session will touch on these challenges and what is needed to maintain individual developer velocity.
React Summit 2022React Summit 2022
19 min
Measuring and Improving React Native Performance
The web has several tools to measure performance, but what about us, React Native devs? Have you ever added some optimization in your code (like a memo here and there) and wondered if it had a real impact on performance?
Presenting a Flipper plugin to measure React Native performance, with a concrete case of how we used it to bring our app performance to the top quality.
Bonus: a deep dive into React DevTools flame charts!
JSNation 2022JSNation 2022
30 min
High-Speed Web Applications: Beyond the Basics
Knowing how to run performance tests on your web application properly is one thing, and putting those metrics to good use is another. And both these aspects are crucial to the overall success of your performance optimization efforts. However, it can be quite an endeavor at times for it means you need to have a precise understanding of all the ins and outs of both performance data and performance tooling. This talk will shed light on how to overcome this challenge and walk you through the pitfalls and tricks of the trade of Chrome DevTools, providing you with a complete roadmap for performance analysis and optimization.
JSNation 2022JSNation 2022
29 min
Bringing the Power of AI into your Editor with GitHub Copilot
GitHub Copilot is an AI pair programmer tool that puts the collective knowledge of millions of developers right at your fingertips, directly in your IDE.
During the talk, Krzysztof, a core team member behind GitHub Copilot, will demo how Copilot works and discuss the design principles used while creating the project.
He will also dive into some of the project's technical details - how Copilot communicates with its AI, what ""queries"" it uses, how it processes responses, and how it integrates with various IDE to create characteristic Copilot's UX.
React Advanced Conference 2021React Advanced Conference 2021
27 min
Beyond Virtual Lists: How to Render 100K Items with 100s of Updates/sec in React
There is generally a good understanding on how to render large (say, 100K items) datasets using virtual lists, …if they remain largely static. But what if new entries are being added or updated at a rate of hundreds per second? And what if the user should be able to filter and sort them freely? How can we stay responsive in such scenarios? In this talk we discuss how Flipper introduced map-reduce inspired FSRW transformations to handle such scenarios gracefully. By applying the techniques introduced in this talk Flipper frame rates increased at least 10-fold and we hope to open-source this approach soon.


React Advanced Conference 2021React Advanced Conference 2021
10 min
Supercharging Developer Productivity With Advanced Code Search
Google
&
Facebook Engineers are able to search over their gargantuan codebase using an internal code search engine. The search engine accelerates the ability of their developers (both old
&
new) to understand any part of their codebase
&
start contributing immediately! What about the rest of us?
In this talk, I'll walk through the different types of code search, tools
&
software, and advanced tips
&
tricks to navigate any type of codebase easily. With the advent of large code repositories and sophisticated search capabilities, code search is increasingly becoming a key software development activity. Every developer in the world that spends an insane amount of time reading rather than writing code should have access to the best code search tools that amplifies their productivity. The audience will walk away with everything they need to confidently onboard, navigate
&
understand any small, medium-sized and daunting codebase.


JSNation Live 2020JSNation Live 2020
35 min
I See What is Going on: Visual Testing for Your Components
Many modern web frameworks use components as their building blocks.
In this talk, I will show component testing using Cypress - and I mean "show" literally. You will see the component running inside a real browser, you will interact with the component like a real user, and you can debug the component using the real browser's DevTools. Finally, I will go through the current open source and commercial options for visually testing the component's styles and rendering.


React Summit 2020React Summit 2020
32 min
Flipper: The Extensible DevTool Platform for React Native
Are you a React Native developer? Have you always been longing for the rich ecosystem of developer tooling that exists for the web in e.g. Chrome and Firefox? Flipper is Facebooks internal, extensible mobile devtool platform, used the mobile devs that work on the Facebook, WhatsApp, Instagram and many more apps.
Recently the React Native and Flipper team have been working hard to add first class support for React Native as well. This means that monitoring network traffic and performance, using the React Devtools, inspecting device and application logs or even debugging JavaScript can now can now be conveniently done using one coherent tool.
And best of all: Flipper is extensible, so let's build our own plugin while at it!


JSNation Live 2021JSNation Live 2021
28 min
VS Code Can Do That!
How do you debug so easily in VS Code? How do codespaces work? What are those key combinations to edit code so quickly? What extensions are the ones I shouldn't code without? Get ready to hit the ground running in this fast-paced, demo-heavy talk that takes you through some of the best and most effective tips and tricks in VS Code. Learn how to setup your environment and customize it the way you like it. You'll walk out with several tips on how to be more efficient with one of the hottest tools on the Web today!