#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 managersThe isolated node_modules structure created pnpmWhat makes pnpm so fastWhat makes pnpm disk space efficientMonorepo supportManaging Node.js versions with pnpm
DevOps.js Conf 2024DevOps.js Conf 2024
21 min
JavaScript to Wasi Enabled Wasm: Portable JavaScript Composition
JavaScript is no longer a language confined to the browsers. New standards are enabling fully portable, lightweight runtimes, to make JavaScript the definitive language for isomorphic applications. Let's explore use-cases, some experimental, some consolidated, to take our Wasm game with JavaScript, to the next level.
React Day Berlin 2023React Day Berlin 2023
31 min
Durable Objects - Everything Everywhere All At Once For Not Very Much Money
Cloudflare's Durable Objects are a new JavaScript runtime that makes building stateful, on-demand backend servers on the edge as easy and cheap as serverless functions. By colocating compute and state, Durable Objects melt complexity at scale, and allow you to focus on building your product.In this fast-paced talk we'll live code a real-time backend from scratch, show how Durable Objects work, and explore how you can apply this versatile tool to a wide range of everyday engineering problems.
React Day Berlin 2023React Day Berlin 2023
31 min
Break the Race: Easy Race Condition Detection for React
Race conditions are among some of the most challenging to detect and reproduce issues. As such they pose a significant challenge in development notably in UI. In this talk, we explore how to detect race conditions by leveraging fuzzing techniques. We walk you through discovering the real problem of race conditions and how they impact user experience. We provide you tools and examples demonstrating how to easily detect them in your daily work thanks to tests relying on fuzzing. After that talk, we hope your React code will be race conditions free or at least that you will have the right tools to help you.
React Summit US 2023React Summit US 2023
9 min
Trees aren't just Foliage: ASTs and Practical Usage
ASTs are prevalent in everything we do. ESLint, Typescript, etc allow us to dive into our source code in a way we might not be familiar with. Let's take a look at how some modern tools use ASTs to improve our lives as developers. Some of the tools to be covered include: TS-Morph, Typescript, TreeSitter, and ESlint. Depending on time, I can dig into various tools and patterns for working with ASTs and how they can fit into any modern developer workflow.
React Advanced Conference 2023React Advanced Conference 2023
31 min
Building Better React Debugging with Replay Analysis
React's component model and one-way data flow give us a great mental model for building our apps, but debugging React apps can still be confusing. React's internals are a black box, and it's often hard to understand why components rendered or what caused errors.
The Replay time-travel debugger makes it easier to debug React apps by letting you inspect what's happening at any point in time. But what if we could go beyond the usual debugger features, and build new debugging features that tell us more about what React is doing? Let's see how Replay's API makes that possible.
React Advanced Conference 2023React Advanced Conference 2023
29 min
All You Need Is a Contract…
How many times have you had to wait for your backend team to finish building the API so you can start your tasks? What if all you needed to move that task to in progress was the API contract? What if there was a library that did this for REST and GraphQL APIs and, at the same time, taking your tests to the next level? Join me and prepare to enhance your developer experience while learning all the battle-earned experiences of using one of my favorite libraries: Mock Service Worker.
TypeScript Congress 2023TypeScript Congress 2023
10 min
Advanced linting rules with ESLint
This talk will explore more advanced ways to write static analysis rules in ESLint using ESLint's control flow APIs. I will quickly explain what a control flow graph is and how you can use it to find issues in your code. I will show you how to detect when a value is assigned to variable uselessly and other logical problems you can detect using this technique.
TypeScript Congress 2023TypeScript Congress 2023
12 min
Unlocking TypeScript's Potential: Exploring the Power of Ecosystem Tooling
Dive into the world of TypeScript ecosystem tooling and uncover the transformative capabilities that can supercharge your development workflow. In this talk, you can discover essential tools for project setup, code analysis, testing, and deployment. Also, learn how intelligent code editors, formatters, and linters improve code quality.

Finally, let's explore type checkers, static analyzers, and refactoring tools that enhance codebase maintainability, TypeScript libraries and frameworks, and witness their seamless integration with bundlers, task runners, testing frameworks, and CI pipelines. Don't miss this talk to unleash the full potential of TypeScript and maximize your productivity with the extensive ecosystem of tools at your disposal and that you probably didn't know!
TypeScript Congress 2023TypeScript Congress 2023
18 min
How TypeScript is integrated in your editor
How can an editor ""automagically"" show type errors when you create a single TypeScript file without running ""npm install typescript"" or having a tsconfig.json file? Is a completion list build by your coding editor, TypeScript itself, or some other mysterious being? What is TSServer?
In this talk I will give you an overview of how the TypeScript server communicates with IDEs and other editors, delivering rich language features without ever running tsc.
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
Top Content
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!