Meta tags:
description=The speaker recounts debugging an e-commerce application, emphasizing the need for monitoring business logic. They discuss building custom DevTools for specific business logic debugging and explore limitations of React DevTools in handling complex scenarios. The importance of developing custom DevTools architecture, white-coded UI, efficient domain communication, and inspecting DevTools architecture is highlighted. Additionally, analyzing domain inspector functionality, maintaining React DevTools in a monorepo, and ensuring DevTool safety and utility through ongoing maintenance and user feedback are discussed.;

Headings (most frequently used words):

devtools, react, in, and, debugging, custom, architecture, domain, what, can, see, comments, story, of, commerce, application, building, for, business, logic, exploring, limitations, developing, white, coded, ui, state, management, efficient, communication, inspecting, analyzing, inspector, functionality, maintaining, monorepo, 10, ensuring, devtool, safety, utility, check, out, more, articles, videos, workshops, on, related, topic, subscribe, to, the, top, dev, conferences, available, other, languages,

Text of the page (most frequently used words):
the (209), and (180), this (132), you (99), that (83), react (79), devtools (71), for (63), with (52), your (42), can (42), like (41), have (39), what (34), state (31), are (31), there (30), tools (30), dev (29), not (29), how (28), see (27), debugging (26), web (25), into (25), will (25), was (25), our (23), vue (22), know (22), here (22), more (21), own (21), but (21), 2026 (20), domain (20), they (19), learn (18), #workshop (18), #custom (18), also (18), everything (17), new (16), thing (16), business (16), logic (16), all (15), from (15), actually (15), performance (14), building (14), just (14), built (14), over (14), panel (14), then (14), about (13), typescript (13), min (13), talk (13), every (13), when (13), yeah (13), code (12), development (12), applications (12), content (12), very (12), going (12), look (12), summit (11), javascript (11), user (11), tool (11), build (11), application (11), part (11), should (11), extension (11), advanced (10), top (10), developers (10), through (10), only (10), time (10), chrome (10), issue (10), one (10), short (10), description (10), now (10), architecture (10), get (9), components (9), using (9), has (9), enough (9), inspector (9), right (9), 2027 (8), next (8), tresjs (8), let (8), some (8), bridge (8), app (8), show (8), efficient (8), most (8), stuff (8), payment (8), any (8), updates (7), management (7), work (7), system (7), integrating (7), need (7), features (7), even (7), these (7), why (7), types (7), debug (7), once (7), first (7), tell (7), event (7), coded (7), tech (6), events (6), make (6), experience (6), store (6), langchain (6), projects (6), future (6), users (6), who (6), simple (6), each (6), much (6), lot (6), data (6), pnpm (6), manager (6), today (6), importance (6), keep (6), nothing (6), something (6), because (6), exploring (6), machine (6), would (6), white (6), product (5), jsnation (5), berlin (5), london (5), best (5), mastering (5), their (5), designed (5), potential (5), live (5), works (5), its (5), developer (5), start (5), challenges (5), take (5), them (5), saas (5), out (5), which (5), put (5), products (5), network (5), source (5), package (5), fast (5), monorepo (5), tooling (5), visibility (5), keeping (5), really (5), doing (5), whenever (5), things (5), never (5), function (5), perfect (5), kind (5), communication (5), call (5), did (5), specific (5), story (5), bug (5), support (4), feedback (4), conferences (4), coding (4), engineer (4), companies (4), subscribe (4), free (4), hooks (4), node (4), practices (4), explore (4), dive (4), interactive (4), unique (4), scenes (4), pinia (4), hands (4), useful (4), customer (4), real (4), payments (4), available (4), efficiently (4), 2023 (4), object (4), getting (4), way (4), 2021 (4), use (4), console (4), discusses (4), version (4), handling (4), other (4), disk (4), space (4), production (4), safety (4), environment (4), don (4), alive (4), try (4), looked (4), monitoring (4), tree (4), states (4), props (4), order (4), does (4), around (4), basically (4), called (4), anything (4), say (4), before (4), great (4), developing (4), started (4), speaker (4), commerce (4), gitnation (3), sign (3), may (3), york (3), nov (3), want (3), workshops (3), popular (3), articles (3), people (3), graphics (3), within (3), specifically (3), offers (3), deep (3), directly (3), expand (3), end (3), enhancing (3), introduction (3), ecosystem (3), dynamic (3), optimizing (3), 2024 (3), cover (3), concepts (3), better (3), api (3), world (3), beyond (3), ensuring (3), learning (3), side (3), money (3), compete (3), technical (3), allows (3), cost (3), software (3), spend (3), clerk (3), driven (3), help (3), map (3), topic (3), feature (3), test (3), tips (3), used (3), changes (3), google (3), flipper (3), excellent (3), durable (3), objects (3), storage (3), module (3), structure (3), process (3), actionable (3), highlights (3), flows (3), lighthouse (3), emphasizes (3), well (3), modern (3), think (3), check (3), engineers (3), question (3), wanted (3), clear (3), wrapped (3), done (3), where (3), error (3), errors (3), literally (3), shows (3), component (3), analyzing (3), inspecting (3), again (3), official (3), profiler (3), explains (3), bus (3), message (3), window (3), catches (3), emit (3), snapshot (3), case (3), normal (3), whatever (3), hook (3), happening (3), invest (3), were (3), outside (3), scenarios (3), logs (3), fine (3), resolve (3), sitting (3), team (3), limitations (3), complex (3), processing (3), vishnudhasan (3), govindarajan (3), nation (2), stats (2), faq (2), amsterdam (2), singapore (2), apr (2), asia (2), dec (2), day (2), oct (2), conf (2), edition (2), depth (2), leader (2), insights (2), teams (2), upcoming (2), follow (2), talks (2), conference (2), design (2), testing (2), quality (2), multipass (2), discover (2), main (2), seamlessly (2), experiences (2), both (2), looking (2), skill (2), third (2), front (2), curious (2), familiar (2), fully (2), bring (2), utilizing (2), interfaces (2), master (2), techniques (2), integration (2), manage (2), responsive (2), during (2), effect (2), composition (2), scratch (2), gap (2), between (2), despite (2), change (2), session (2), participants (2), large (2), models (2), environments (2), opens (2), possibilities (2), generation (2), those (2), technologies (2), making (2), chance (2), gained (2), back (2), whether (2), join (2), project (2), ideas (2), could (2), turn (2), ones (2), functioning (2), without (2), job (2), infrastructure (2), already (2), enabling (2), easily (2), complete (2), solutions (2), advantage (2), offer (2), away (2), giving (2), incredibly (2), agile (2), needs (2), task (2), scalable (2), quickly (2), todo (2), b2b (2), conditional (2), infer (2), notation (2), template (2), strings (2), union (2), array (2), properties (2), together (2), improve (2), featured (2), wildly (2), thus (2), supported (2), increasingly (2), two (2), find (2), key (2), ide (2), tdd (2), keyboard (2), easy (2), format (2), jecelyn (2), yeen (2), rendering (2), big (2), faster (2), improved (2), interaction (2), explores (2), virtualization (2), sorting (2), simplifies (2), usage (2), covers (2), virtual (2), lists (2), render (2), 100k (2), items (2), 100s (2), sec (2), addressable (2), provides (2), long (2), compute (2), everywhere (2), access (2), file (2), 2022 (2), focusing (2), centric (2), contextual (2), osmani (2), browser (2), lastly (2), working (2), latest (2), issues (2), been (2), maps (2), efforts (2), productivity (2), bugs (2), videos (2), minutes (2), uses (2), answering (2), thought (2), ago (2), important (2), person (2), non (2), negotiable (2), perfectly (2), highlighting (2), devtool (2), utility (2), distribution (2), commit (2), load (2), onboarding (2), script (2), pretty (2), internal (2), failing (2), gets (2), context (2), failed (2), standard (2), raw (2), simply (2), filtered (2), ongoing (2), maintenance (2), maintaining (2), timestamp (2), pay (2), declined (2), being (2), reason (2), cart (2), phase (2), panels (2), derived (2), select (2), values (2), ask (2), answer (2), functionality (2), opened (2), showing (2), shown (2), recording (2), post (2), structured (2), messages (2), neat (2), entire (2), happens (2), yes (2), method (2), finishes (2), orchestration (2), understand (2), global (2), channel (2), doesn (2), base (2), initial (2), senior (2), keeps (2), emphasizing (2), model (2), lines (2), solve (2), problem (2), while (2), consider (2), telling (2), exists (2), mean (2), after (2), voicetag (2), eventually (2), showed (2), got (2), found (2), kept (2), small (2), straightforward (2), natural (2), hey (2), transcription (2), sentry (2), october (2), online (2), rights, reserved, community, conduct, privacy, policy, terms, conditions, legal, rss, feeds, assistance, promote, contact, careers, company, nyc, sponsor, techlead, adopting, orgs, grow, library, authors, core, experts, miss, deal, discounted, tickets, newsletter, systems, css, fullstack, frontend, builders, founders, svelte, tags, mentors, menu, introducing, specialized, crafted, eager, realm, powerful, renderer, reactive, sophisticated, visualizations, leveraging, strengths, ecosystems, set, dimension, designers, interested, incorporating, elements, benefit, fundamentals, integrates, life, creating, construct, intricate, immersive, visuals, interactivity, animation, responding, inputs, captivating, reactivity, composables, vuex, gain, maintain, smooth, alvaro, saburido, 119, under, hood, definestore, dependency, injection, scopes, give, understanding, requirements, eduardo, san, martin, morote, opportunity, prominence, python, vast, remains, largely, untapped, aims, throughout, leverage, language, accessible, agents, approach, intelligent, automated, basics, solid, foundation, practical, exercises, demonstrate, integrate, examples, facing, overcoming, than, forefront, emerging, field, attendees, valuable, skills, created, enhanced, workplaces, seasoned, skillset, exciting, areas, gateway, unlock, smarter, engaging, vivek, nayyar, probably, million, micro, billion, dollar, startup, idea, paying, customers, quitting, sinking, investment, solo, enormous, enterprise, rich, comes, scaling, availability, security, complicated, subsystems, auth, often, established, giants, reasonably, operate, however, cloud, rapidly, iterate, low, operating, reasonable, against, market, staying, hour, database, planetscale, multi, tenant, authentication, subscription, based, stripe, principles, existing, agrawal, 153, libraries, bullet, proof, demonstrated, sample, written, basic, knowledge, jiri, lojda, 132, reactjs, given, hard, accurate, materials, jetbrains, ides, three, combination, series, little, meaning, steps, productive, along, emphasize, tricks, paul, everitt, 174, related, including, run, command, customizing, shortcuts, emulating, focus, inspect, memory, control, requests, utilities, save, frequently, snippets, local, overrides, editing, optimize, images, optimized, avif, track, reduced, size, tables, ten, times, richer, filtering, windowing, datasource, packet, inserts, removals, minimal, cpu, incremental, row, height, dimensional, meta, michel, weststrate, versatile, programming, paradigm, cloudflare, stateful, uniquely, server, enables, websocket, connections, value, term, create, collaborative, located, edge, azure, similar, deno, fly, flame, innovative, eliminate, provisioning, databases, kubernetes, clusters, jani, eväkallio, packaging, popularity, microsoft, tiktok, isolated, prevents, conflicts, ensures, dependencies, superior, solves, reducing, consumption, due, installation, deterministic, linking, hardlinks, instead, symlinks, lead, maintainer, zoltan, kochan, devops, approaches, adi, expertise, his, passion, measurement, optimization, showcases, import, export, collaboration, further, delves, page, cypress, offering, cross, capabilities, aspect, metrics, paint, total, blocking, improvements, iterative, nature, improvement, engineering, addy, pinpoint, quicker, mapping, ignoring, configuring, files, breakpoints, redesigned, easier, standardize, improving, reporting, constantly, might, spark, git, interest, stellar, career, languages, importantly, reviewing, quarter, least, couple, helping, six, months, gather, dust, owners, determines, last, added, updating, acceptance, criteria, later, must, sure, surely, affecting, ownership, continuous, usefulness, regular, reviews, ship, folder, unpacked, automate, step, anyone, modify, slide, action, honestly, few, mind, taking, paid, different, trigger, setup, digging, tabs, trying, request, reading, response, stuffs, checked, detailing, wrong, figure, logged, failure, tab, contents, details, status, notice, surfaces, apply, proceed, add, catalog, entering, drill, high, risk, fails, fail, questions, broken, selection, failures, detailed, unpack, click, rendered, magical, fresh, rules, emitted, lightweight, implementation, sends, listens, postmessage, forwards, current, send, route, wipe, gives, sending, unpacking, extensions, inspection, transport, windows, thispostmessage, opening, listening, open, calls, census, emits, moves, discussing, emission, interactions, interesting, notify, pushes, changing, heart, ever, forget, image, duration, timeline, initializers, subscriptions, generate, tried, reproduce, had, ecommerce, gonna, manifest, pushing, snapshots, pumped, door, special, puts, listener, alongside, four, pieces, scary, diagram, explain, strongly, recommend, pause, mechanism, exposes, simplified, starts, renders, checks, variable, update, reacts, streams, information, friction, someone, curve, helps, juniors, respect, choose, customization, meantime, mental, generic, flowing, down, living, correct, whole, lives, layers, workflow, engines, logging, treadmill, adding, obvious, cannot, single, repeating, pattern, scenario, repeat, tuesday, evening, hear, clearly, describing, solving, active, underrated, attention, necessity, name, vishnu, getstack, builds, powered, phone, off, love, travel, places, wanderlust, guy, read, text, touch, industry, experimenting, weird, speak, covering, talking, transition, blindly, mattered, seeing, faced, critical, proper, introduces, concept, resolved, finally, completely, still, thinking, took, monitor, componentry, reacting, second, putting, succeeded, anyway, proud, happened, orders, stuck, throwing, dramatic, forever, vibing, situation, hello, everyone, hope, suspect, shares, personal, reflecting, shortened, español, recounts, discuss, highlighted, additionally, discussed, video, summary, comment, register, comments, share, jun, presented, stop, begins, expose, proprietary, hidden, behavior, crashes, slowdowns, regressions, prod, seer, unifies, traces, replays, profiles, root, causes, breaks, fix, promoted, rate, bookmark, diving, full, ticket, holders, mentorship, cool, india, english, log,

Text of the page (random words):
just an object on a window there s nothing special about it who puts it there we can put our own listener on to it that s that s a great part so alongside the official dev tools we work with react and not around it so this architecture has four pieces basically so we build our own custom inspector extension we have our own logic there then in our ui i ll see we ll see what this whatever we have built like yeah so let s see how we can build this custom ui dev tools i ll show you my code 5 white coded ui and state management 09 24 short description exploring a white coded ui in a simple react app focusing on a state manager and the process of pushing state snapshots to devtools for live monitoring first i wanted to say this is basically a white coded ui this is a react app this is a very simple react app that tried to reproduce the issue that i had in my you know in my ecommerce app right so this is a white coded app white coded kind of it s gonna look something like this so this is a simple thing and this is a dev tool extension this is a very normal dev tool extension that we build with this manifest and all the main part over here is first we have to check our state machine so in my case this store this order orchestration store is my state manager yeah so in this case i will show you first this is like this is a very normal state custom state state manager that i have built these are just initializers these are for subscriptions these are to get the derived values so basically these stuff are like any ai can generate this so yeah i ll show you one interesting method over here i have a method called notify and what this does this pushes each every state snapshot to dev tools every time the state changes so whenever the state is changing we can actually look at that in live in our own dev tools so i call this emit state snapshot i ll show you where this works so there s a dev tools bridge so this is the heart of this application i would say so this is a kind of bridge that you know that should work only on dev environment so you never ever forget to you know have it within your dev environment only and for domain events look at the process payments and all so what happens is right before like whenever this call finishes i will show you my image state snapshot whenever this call finishes we call this complete event with the side once we get that that s the duration that we get the timeline that s it 6 efficient domain communication 11 56 short description discussing event emission in state management and domain interactions for efficient communication between components that s it and the census all the data there s just one function one object your state machine don t know anything about it about your dev tools extension or not it just emits an event into the bridge and moves on that s it so yeah and also i have a function my domain so there are a function to emit my domain ones as well so this is kind of a bus of our thing like our dev tools so your domain code calls emit function and this content script called subscribe right yes it will be here subscribe yeah this is the basically this bus of my application they never actually talk to each other the transport is windows thispostmessage what this does if the dev tools extension is opening and listening it catches it even if it is not open there is like nothing happens and no cost for us so it s going to be efficient also and this entire bridge this is you know wrapped around this environment so that it is your users will never see it and i will show you how i right 7 inspecting devtools architecture 13 37 short description exploring the architecture of sending structured messages to the devtools panel and unpacking extensions for inspection and recording in chrome devtools this is the stuff this is a function that sends this structured message to my dev tools panel it does one thing it listens to this window postmessage catches messages from our bridge and it forwards them to this current time send message to route them to the panel the panel the panel this is again a wipe coded ui this just catches every state and it gives me neat neat and perfect perfect thing so this is the entire architecture now let s so if you look at here this explains the simple architecture of our application works so we have our on order payment our own custom rules like our own state machine and all this is getting emitted to this dev tool bridge which is a lightweight even bus and that post this message to this chrome devtools panel so there are a lot of stuff you can do around this now let s look into the implementation so the first thing that you have to do you have to you know unpack this extension you just have to click you just have to select it as i ve already done this i m not going to do it again and this is what is here this is devtools like react devtools official extension so i opened my devtools so this is the components like the devtools is showing so we can see what this props works what it is rendered by everything is being shown here right so everything is for me over here yeah and i have this profiler as well i ll start recording it and the magical part we have our own domain inspector that we built over here in this react in this chrome devtools panel so i m going to clear everything i m going to start this fresh 8 analyzing domain inspector functionality 16 01 short description exploring customer selection analyzing states and inspecting payment failures through domain inspector for detailed debugging so let s try to select a customer i ll add this to me so here s what you see there is literally there is everything right but if we look at these components you can see the product catalog like the states like the components the props that are entering and only that we can see you can drill into the tree and see the values but if we ask this question is this order high risk what phase is this order in if payment fails why does it fail it can t answer any of those questions not because it is broken because it was never built to answer them right now we ll look into our domain inspector tab so we have our things over here so we have which state which phase that we are in it shows me literally every state of this this thing the raw business state the cart contents the customer details the payment status it is like not getting filtered through a component tree this is the part i wanted you to notice a standard dev tool shows you what s in the store but r panels compute everything and surfaces derived states specifically for debugging like pretty much everything is there right i ll try to apply this i ll proceed to payment now let s see let s see this event also see the thing is here it is monitoring every each and every event with the timestamp so when there is something going wrong you can easily look at the timestamp and you can simply figure it out so i ll try to pay my payment is declined now that also is being logged here perfectly failure reason cart declined everything literally everything is there so i ll tell you 9 maintaining react devtools in monorepo 18 21 short description detailing domain context during payment errors and the importance of ongoing tool maintenance for developers through efficient distribution in monorepo so i ll tell you when some you know payment gets paid we ll try for some different users now i ll trigger an error see my domain context at the time of error like when there was an error how my state looked like it failed in standard react setup you d be digging through network network tabs you ll be trying through the request reading raw api response everything but here here like even if you look at the event you can like you know simply put the payments or debug stuffs like everything can be filtered and checked in real time so this this thing over here is there so this is what pretty much our react dev tools can do so we ll go back to the slide so we have our dev tools in action now the most important part keeping it alive honestly building this is really an easy part keeping it alive is where most internal tools are failing so there is a few things that we have to keep in mind when we are taking this tool you know actually using this and keeping it alive the first thing is distribution don t put this stuff on your chrome web store and all you don t need to ship it you don t need to have it with the things just commit the extension folder to your monorepo that should be enough your engineers can load it you can load it as an unpacked extension and your onboarding script can automate it that step also that s all done so that anyone they have their own dev tools they can also modify them and you know they can make it even better 10 ensuring devtool safety and utility 20 25 short description highlighting the importance of production safety clear ownership and continuous usefulness through regular reviews and user feedback and there s production safety this is non negotiable this bridge must do nothing in production like this one we have to make sure very surely it perfectly needs to be wrapped in only for dev environment so that it is not affecting your users and the third most important thing there should be clear owners to it this is the one that actually determines whether the tools last or not so as a person whenever a new domain events get added to the system updating the panel is a part of acceptance criteria also it s not going to be a follow up task it s not going to be we ll do it later so this is something that should be a non negotiable also and very importantly keeping it useful keep reviewing it every quarter spend at least 30 minutes with a couple of engineers who actually uses it is this really helping you is it really doing its job if the panel is answering question people what they actually have they ll use it if it s answering question you thought you have six months ago it ll gather dust only so there is nothing going to be useful so that s what i wanted to cover in this talk expand available in other languages en debugging what react devtools can t see es debugging what react devtools can t see check out more articles and videos we constantly think of articles and videos that might spark git people interest skill us up or help building a stellar career modern web debugging jsnation 2023 29 min modern web debugging top content jecelyn yeen google chrome 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 devtools debug the future of performance tooling jsnation 2022 21 min the future of performance tooling top content addy osmani engineering leader working on google chrome 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 performance tooling devtools pnpm a fast disk space efficient package manager for javascript devops js conf 2022 31 min pnpm a fast disk space efficient package manager for javascript zoltan kochan lead maintainer of pnpm 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 devtools packaging durable objects everything everywhere all at once for not very much money react day berlin 2023 31 min durable objects everything everywhere all at once for not very much money top content jani eväkallio software engineer durable objects is a versatile programming paradigm by cloudflare that allows for stateful and uniquely addressable server environments it simplifies feature development enables real time updates through websocket connections and provides a built in key value store for long term storage it can be used to create collaborative applications manage data storage efficiently and explore co located compute and data at the edge other companies like azure also offer similar technologies deno s kv and fly io s flame are innovative products that eliminate the need for provisioning databases and kubernetes clusters devtools beyond virtual lists how to render 100k items with 100s of updates sec in react react advanced 2021 27 min beyond virtual lists how to render 100k items with 100s of updates sec in react top content michel weststrate meta 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 react performance devtools debugging with chrome devtools jsnation live 2021 11 min debugging with chrome devtools top content jecelyn yeen google chrome devtools here are some tips for better utilizing devtools including using the run command customizing keyboard shortcuts and emulating the focus effect learn...