This repository contains a couple of demos for core debugging stories, that need to be supported by DevTools to provide a fundamental, seamless debugging experience.
The following projects have been adapted from todomvc.com.
What 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.
cd typescript-react
npm install
npm start
The server will be running at http://localhost:1234.
cd typescript-angular
npm install
npm run compile
python -m SimpleHTTPServer
The server will be running at http://localhost:8000.
cd typescript-backbone
npm install
npm run compile
open index.html
This is an example project following the starter template for Learn Next.js.
What to check: Open the debugger, search for index.js and other authored files in the Page tree and Quick Open panel.
What is shown: Intertwining of authored and deployed sources.
cd nextjs-webpack
npm install
npm run build
npm run dev
The server will be running at http://localhost:3000.
What to check: Open the performance panel, start recording, and click on the "+" button on the page. Observe the long tasks.
What 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.
cd react-redux-bad-algo
npm install
npm start
The server will be running at http://localhost:3000.
What to check: Open the performance panel, start recording, and click on the "+" button on the page. Observe the long tasks.
What 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.
cd react-redux-bad-arch
npm install
npm start
The server will be running at http://localhost:3000.
Clone this repository, and run
npm install
npm start
afterwards point your browser to http://localhost:8000.