#devtools

This Talk discusses modern web debugging and the latest updates in Chrome DevTools. It highlights new features that help pinpoint issues quicker, improved file visibility and source mapping, and ignoring and configuring files. The Breakpoints panel in DevTools has been redesigned for easier access and management. The Talk also covers the challenges of debugging with source maps and the efforts to standardize the source map format. Lastly, it provides tips for improving productivity with DevTools and emphasizes the importance of reporting bugs and using source maps for debugging production code.

Today's Talk discusses the future of performance tooling, focusing on user-centric, actionable, and contextual approaches. The introduction highlights Adi Osmani's expertise in performance tools and his passion for DevTools features. The Talk explores the integration of user flows into DevTools and Lighthouse, enabling performance measurement and optimization. It also showcases the import/export feature for user flows and the collaboration potential with Lighthouse. The Talk further delves into the use of flows with other tools like web page test and Cypress, offering cross-browser testing capabilities. The actionable aspect emphasizes the importance of metrics like Interaction to Next Paint and Total Blocking Time, as well as the improvements in Lighthouse and performance debugging tools. Lastly, the Talk emphasizes the iterative nature of performance improvement and the user-centric, actionable, and contextual future of performance tooling.

pnpm is a fast and efficient package manager that gained popularity in 2021 and is used by big tech companies like Microsoft and TikTok. It has a unique isolated node module structure that prevents package conflicts and ensures each project only has access to its own dependencies. pnpm also offers superior monorepo support with its node module structure. It solves the disk space usage issue by using a content addressable storage, reducing disk space consumption. pnpm is incredibly fast due to its installation process and deterministic node module structure. It also allows file linking using hardlinks instead of symlinks.

JavaScript code is converted to low-level binaries by JavaScript engines like MV8, Chakra, and SpiderMonkey. WebAssembly allows writing code in other languages and compiling it to run on a JavaScript engine. External functions can be imported in WebAssembly using the import statement. WebAssembly can run in non-browser scenarios with additional interfaces like WASI and provides memory isolation. The Jco toolchain is an experimental tool for componentizing JavaScript code into WASM modules.

Race conditions can be complex to debug and reproduce, causing frustration for users. The speaker discusses examples of race conditions and ways to fix and avoid them. They demonstrate an example of an auto-completion field in React and how to handle race conditions in API calls. The speaker introduces the FastCheck framework for property-based testing to address race conditions and improve tests. Randomizing inputs and outputs can help uncover bugs specific to certain scenarios. The speaker also discusses mitigating race conditions in React and handling test overhead and reproducibility.

ASTs, or abstract syntax trees, are used by popular tools like Babel, TypeScript, ESlint, and Prettier to improve the developer experience. They have various use cases including compiling and code analysis. Editor tooling and writing tools can be enhanced using ASTs, with examples including formatting with Prettier, type annotations in JetBrains editors, and code mods for framework upgrades. Ts-morph is a useful tool for code transformations, while Tree Sitter is a portable tool that supports many languages and can be used to build IDEs or text editors in the browser.

Steven, a design tool nerd, worked on InVision Studio and now focuses on LiveBlocks, providing APIs and tools for multiplayer collaboration. Collaborative design tools like Figma, Canva, Mural, Notion, Mirror, Linear, and Pitch use conflict resolution algorithms such as OTs and CRDTs. Data migration and collaboration patterns are important considerations for building production applications. Figma stands out for its seamless assembly of collaboration features. LiveBlocks enables front-end developers to build collaborative experiences without complex backend infrastructure, using fractional indexing for consistent ordering.

Today's Talk focused on building better React dev tools with replay time travel analysis. The React DevTools provide valuable insights into React apps, using a fiber data structure to represent component instances. Replay is a time-traveling debugger for React, with plans to make Chrome their primary recording browser. They extract React information from recordings using their time travel API and have built a UI for debugging and inspecting the content. The long-term goal is to have Replay work offline and in permanent record mode.

The speaker discusses the challenges of server state and test maintenance, and how they found solutions using React Query and Mock Service Worker. They emphasize the benefits of defining contracts for faster development and stress reduction. The speaker also highlights the advantages of using Mock Service Worker over mock servers and explains how it allows for easy customization and test overrides. They mention the upcoming release of V2 of MS-Double and encourage the audience to stay updated.

Tibor Blanesy from Sonar presents advanced techniques for linting with ESLint, including the use of ControlFlowGraph to detect errors in code. The algorithm is based on liveness analysis, which identifies live variables at any point in the program. Additionally, the talk covers the computation of block sets using the difference between outset and kill set unionized with genset.

Today's Talk explores the world of TypeScript ecosystem tooling, discussing essential tools for project setup, including package managers and project scaffolding. It also covers code analysis, testing, and deployment in TypeScript, as well as best practices for maintaining high-quality code. The Talk emphasizes the importance of intelligent code editors, code formatters, and linters in ensuring code quality. It also highlights the significance of codebase maintainability and following TypeScript best practices for efficient and scalable code.

Today's Talk explores TypeScript integration and refactoring, code action handling, the TypeScript server and refactoring process, bug reporting, and the TypeScript protocol and LSP. The Talk discusses how TypeScript is integrated into editors, the role of code action providers, and the communication between the client and server. It also highlights the two-stage process of code actions and the importance of bug reporting. Additionally, it mentions the TypeScript protocol and how it allows for language-specific extensions. LSP is mentioned as a powerful extensibility solution used by various languages.

Static analysis in JavaScript involves analyzing source code without executing it, producing metrics, problems, or warnings. Data flow analysis aims to determine the values of data in a program. Rule implementation in JavaScript can be straightforward or require extensive consideration of various cases and parameters. JavaScript's dynamic nature and uncertainty make static analysis challenging, but it can greatly improve code quality.

JavaScript became popular in the mid-2010s with the introduction of Node and advanced frameworks like Angular and React. Monorepos, which are single repositories containing multiple artifacts, are a popular approach for managing JavaScript projects. Linking packages internally in a monorepo can be done through local or global installation, or by publishing them to an artifact registry. Managing monorepos has become more complex with the introduction of tools like TypeScript and Babel. The development process for web applications involves a build process, testing, and linting, which can be facilitated by tools like Yarn Workspace and NPM Workspace. The release strategy for monorepos can be either unified or distributed, and it is important to select tools that align with the chosen strategy.

This Talk introduces Figma's Widget Code Generator and demonstrates how to build a FigJam widget using it. The speaker discusses the implementation of voting functionality, avatar functionality, and remove vote functionality. They also explain how the Widget Code Generator plugin works and how to access properties and modify names using the Figma plugin API.

We can improve developer efficiency by helping people understand code more effectively through open source software, iterative development, cloud infrastructure, continuous integration, and service-based architecture. The software development lifecycle consists of an outer loop focused on team efforts and an inner loop for individual developers. A universal search platform helps developers understand and search code, reducing the time spent on code comprehension. Code navigation and automation tools like Sourcegraph enable developers to navigate code, adhere to best practices, and automate changes across multiple repositories.

This Talk discusses mobile app performance and provides tips for performance analysis. It includes a performance test on the TF1 news app and demonstrates how to analyze JS performance with React DevTools. The Talk also explores optimizing rendering in React components, such as FlatList and nested lists with carousels. It concludes with strategies for optimizing the virtualized list and carousel to achieve better performance.

This talk covers the latest features in Chrome DevTools, including network tab analysis, performance tab optimization, and user flows. It discusses optimizing HTTP requests with fetch priority to improve loading time. The performance tab provides insights on frame drops, long tasks, and the importance of minimizing total blocking time. The talk also highlights the optimization of page rendering and introduces user flows in Chrome DevTools.

The Talk discusses optimizing rendering of big tables using Flipper, a new version that is ten times faster with improved user interaction and richer data. It explores optimizing rendering with React, virtualization, filtering, sorting, and windowing techniques. The introduction of the Flipper Datasource packet simplifies handling updates, inserts, and removals. The performance of the Flipper data source package is excellent, even in a debug build of React, with minimal CPU usage. The Q&A session covers incremental sorting, dynamic row height, and the potential for two-dimensional virtualization in the future.

Developers can use Sourcegraph to easily search for code using literal, regular expression, and structural patterns. Sourcegraph allows searching through open source and private code indexed across GitHub and GitLab, and supports searching for unstable batch API in React.js. It also enables searching with regular expressions, finding dependencies and usage patterns. With structural search, developers can search for specific blocks of code and narrow down their search using keywords. Sourcegraph is essential for developer velocity, helping teams quickly search through repositories, find references to shared systems, and providing powerful search parameters.

Gleb Akhmetov explains how to visually test React components, emphasizing the importance of addressing climate change and collaboration. He discusses component testing, styling, and the challenges of CSS changes. Gleb highlights the use of image snapshots for visual testing and the importance of controlling data for accurate results. He also discusses using Docker for consistent visual testing and the support for multiple browsers. Cypress is focused on flake-free testing and has plans for test retries and new features in the roadmap.

Flipper is an extensible dev tool platform for React Native, developed at Facebook, that allows inspection of the React development tree and native elements. It offers plugins for image cache inspection, preference modification, and network requests. Flipper can be used to build application-specific plugins and integrates with Redux and ReactorTron. The tool is undergoing a major redesign with new features like dark mode and a standardized component library. Maintainers can debug plugins within plugins and there are plans to integrate with GraphQL.

React's web-based tools allow for independent learning. Dazzone, a sports streaming service, faces challenges with low memory and CPU targets. Measuring, analyzing, and fixing performance issues is crucial. Virtualization improves rendering efficiency and performance. The application is now much faster with significantly less jank.

Here are some tips for better utilizing DevTools, including using the run command, customizing keyboard shortcuts, and emulating the focus effect. Learn how to inspect memory, use the network panel for more control over network requests, and take advantage of console utilities. Save frequently used code as snippets and use local overrides for easy editing. Optimize images by using a more optimized format like AVIF and track changes in the network panel to see the reduced data size.

The Talk covers various tips and features of using VS Code, including the command palette, Zen mode, external terminals, and debugging. It also highlights advanced editing and refactoring features, Git integration, and the use of dev containers. The speaker demonstrates how to set up a dev container for a Python app, run code in a container, and create and configure dev containers. The benefits of using dev containers are also discussed, such as eliminating manual configuration, handling dependencies, and facilitating team-based development.

This talk discusses the visual future of state management and the use of state machines and state charts. XState is introduced as a state machine and state chart library for JavaScript, providing a clean and visualizable way to represent state machines. The talk highlights the features of XState, such as its state-first approach and utilities for interpreting the machine as a service. It also mentions the future goals of XState, including visualization, testing, analytics, and the development of a visual software modeling suite called Stately.