{"id":20597648,"url":"https://github.com/chromedevtools/devtools-dbg-stories","last_synced_at":"2025-07-21T07:01:48.428Z","repository":{"id":41396003,"uuid":"393300872","full_name":"ChromeDevTools/devtools-dbg-stories","owner":"ChromeDevTools","description":"DevTools Debugging Stories","archived":false,"fork":false,"pushed_at":"2025-06-24T05:37:54.000Z","size":6584,"stargazers_count":8,"open_issues_count":47,"forks_count":6,"subscribers_count":11,"default_branch":"main","last_synced_at":"2025-07-11T16:06:04.639Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://devtools-dbg-stories.netlify.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ChromeDevTools.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-08-06T07:54:17.000Z","updated_at":"2025-06-24T05:36:31.000Z","dependencies_parsed_at":"2023-01-29T11:47:22.908Z","dependency_job_id":"164dcaf8-1f82-48c7-8ed6-1a486a9ec545","html_url":"https://github.com/ChromeDevTools/devtools-dbg-stories","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ChromeDevTools/devtools-dbg-stories","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChromeDevTools%2Fdevtools-dbg-stories","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChromeDevTools%2Fdevtools-dbg-stories/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChromeDevTools%2Fdevtools-dbg-stories/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChromeDevTools%2Fdevtools-dbg-stories/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ChromeDevTools","download_url":"https://codeload.github.com/ChromeDevTools/devtools-dbg-stories/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChromeDevTools%2Fdevtools-dbg-stories/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266255243,"owners_count":23900097,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-16T08:23:17.964Z","updated_at":"2025-07-21T07:01:48.363Z","avatar_url":"https://github.com/ChromeDevTools.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DevTools Debugging Stories\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/8bb6ebef-9656-4ca5-bd98-56f8c605cfe6/deploy-status)](https://app.netlify.com/sites/devtools-dbg-stories/deploys)\n\nThis repository contains a couple of demos for core debugging stories, that need to be supported by DevTools to provide a fundamental, seamless debugging experience.\n\n## Creating demos (for crbugs)\n\nDemo projects and repros should be pushed to [ChromeDevTools/devtools-dbg-stories],\nand will then automatically be available on [devtools-dbg-stories.netlify.app].\n\nWhen creating a repro for a [crbug](https://crbug.com), the recommended\nworkflow is as follows:\n\n1.  Create your own\n    [fork](https://github.com/ChromeDevTools/devtools-dbg-stories/fork) on\n    GitHub.\n2.  Check out the fork locally.\n\n    ```\n    git clone git@github.com:user/devtools-dbg-stories.git\n    git remote add upstream https://github.com/ChromeDevTools/devtools-dbg-stories.git\n    ```\n\n    and create a feature branch.\n\n3.  Follow the steps for simple test cases.\n\n    ```\n    npm install\n    npm start\n    ```\n\n    This will serve the examples at http://localhost:8000.\n\n4.  Create a new file `src/crbug-ID.html` (and other resources that are\n    necessary), where `ID` refers to the bug number, and add a link to the\n    `crbug-ID.html` file to the `src/index.html`.\n\n5.  Once you are happy with your repro, push it to your fork and send a pull\n    request to the main repository.\n\n## Usage\n\n### TypeScript Projects\n\nThe following projects have been adapted from [todomvc.com](https://todomvc.com/).\n\nWhat to check: Open the debugger and the console, observe whether breakpoints, the object inspector, the watch expressions, call stacks etc. all work as well as they would when debugging vanilla JS code.\n\n#### TypeScript, React, Parcel\n\n```sh\ncd typescript-react\nnpm install\nnpm start\n```\n\nThe server will be running at [http://localhost:1234](http://localhost:1234).\n\n#### TypeScript 1.5, Angular, no bundler\n\n```sh\ncd typescript-angular\nnpm install\nnpm run compile\npython -m SimpleHTTPServer\n```\n\nThe server will be running at [http://localhost:8000](http://localhost:8000).\n\n#### TypeScript 1.4, Backbone, local\n\n```sh\ncd typescript-backbone\nnpm install\nnpm run compile\nopen index.html\n```\n\n### Bundler examples\n\n#### NextJS, Webpack\n\nThis is an example project following the starter template for [Learn Next.js](https://nextjs.org/learn).\n\nWhat to check: Open the debugger, search for index.js and other authored files in the Page tree and Quick Open panel.\n\nWhat is shown: Intertwining of authored and deployed sources.\n\n```sh\ncd nextjs-webpack\nnpm install\nnpm run build\nnpm run dev\n```\n\nThe server will be running at [http://localhost:3000](http://localhost:3000).\n\n#### Webpack, Express, HMR\n\nThis is an example project following the guides from [webpack.js.org/guides/hot-module-replacement](https://webpack.js.org/guides/hot-module-replacement).\n\nWhat to check: Open the debugger, click the button on the page, and make some changes to `second.js` in your favorite editor.\n\nWhat is shown: HMR will update the page and also add a duplicated script in the Page tree and Quick Open panel.\n\nTo run the stock webpack server with HMR:\n\n```sh\ncd webpack-basic-hmr\nnpm install\nnpm run webpack-serve\n```\n\nOr, to use a custom express server with HMR middleware:\n\n```sh\nnpm run express-serve\n```\n\nThe server will be running at [http://localhost:8080](http://localhost:8080).\n\n### Performance examples\n\n### Bad animation and scrolling\n\nWhat to check (not in sequence): \n\n1. Open the Performance panel, start recording, scroll down. Observe the unnecessary yellow background color changing on the number of comments.\n2. Open the Performance panel, start recording, click on a news to toggle the details (slide in and out). Observe the animation. \n\nWhat is shown: Animation, long task, paint reflow. This codelab will walk you through the issues and how to fix them: https://developers.google.com/web/fundamentals/codelabs/web-perf\n\nHow to run it:\n1. Get the code: [https://github.com/googlearchive/udacity-60fps-samples]\n2. To run it, use any local server, e.g. [http-server](https://www.npmjs.com/package/http-server).\n\n#### Bad algorithm\n\nWhat to check: Open the performance panel, start recording, and click on the \"+\" button on the page. Observe the long tasks.\n\nWhat is shown: A performance issue in a long task which stems from some expensive computation. There is something that takes a long time (is \"hot\"), and usually occurs once but it can also happen multiple times. E.g. processing large amounts of data with an inappropriate algorithm on the main thread.\n\n```sh\ncd react-redux-bad-algo\nnpm install\nnpm start\n```\n\nThe server will be running at [http://localhost:3000](http://localhost:3000).\n\n#### Bad architecture\n\nWhat to check: Open the performance panel, start recording, and click on the \"+\" button on the page. Observe the long tasks.\n\nWhat is shown: A performance issue in a long task which stems from the broad app architecture, rather than a singular expensive computation. There is something that is inexpensive, but dominates by occurring repeatedly many times. Usually the solution involves having to rethink the execution model. E.g. in case of react+redux, having to compute many selectors for each state change to determine which views must update, in views which would not have to update.\n\n```sh\ncd react-redux-bad-arch\nnpm install\nnpm start\n```\n\nThe server will be running at [http://localhost:3000](http://localhost:3000).\n\n### Simple Test Cases\n\nClone this repository, and run\n\n```sh\nnpm install\nnpm start\n```\n\nafterwards point your browser to [http://localhost:8000](http://localhost:8000).\n\n  [ChromeDevTools/devtools-dbg-stories]: https://github.com/ChromeDevTools/devtools-dbg-stories\n  [devtools-dbg-stories.netlify.app]: https://devtools-dbg-stories.netlify.app\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchromedevtools%2Fdevtools-dbg-stories","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchromedevtools%2Fdevtools-dbg-stories","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchromedevtools%2Fdevtools-dbg-stories/lists"}