Repro for hitting breakpoints in source-mapped JS file

Hitting breakpoints upon initial load (no back-end state)

Breakpoint on TS file

This test illustrates the problem that DevTools does not always manage to set breakpoints in time for source-mapped JS files. In each of these cases, we should reliably hit a breakpoint at the end of the steps.

Steps

  1. Open DevTools
  2. Set a breakpoint in instrumentation-breakpoints.ts
  3. Open a new tab and open DevTools
  4. Navigate to this page
  5. Breakpoint should hit

Breakpoint on overridden TS file

This test illustrates the problem that DevTools does not always manage to set breakpoints in time for overridden TS files.

Steps

  1. Open DevTools
  2. In the Sources panel, go to the Overrides subtab
  3. Select a folder for your overrides and allow DevTools to access your folder (popup).
  4. Open instrumentation-breakpoints.ts
  5. Edit the file by adding a line console.log('hello'); and save
  6. Set a breakpoint on that line
  7. Open a new tab and open DevTools
  8. Navigate to this page
  9. Breakpoint should hit

Breakpoint on filesystem TS file

This test illustrates the problem that DevTools does not always manage to set breakpoints in time for filesystem TS files.

Steps

  1. Clone this repository: git clone https://github.com/ChromeDevTools/devtools-dbg-stories.git
  2. Set up the repository and serve the page (see README.md within the repository)
  3. Navigate to about:blank
  4. Open DevTools
  5. In the Sources panel, go to the Filesystem subtab
  6. Select the devtools-dbg-stories folder and add it to your workspace
  7. Open instrumentation-breakpoints.ts within the FileSystem subtab
  8. Set a breakpoint on a line
  9. Open a new tab and open DevTools
  10. Navigate to the served page (probably localhost:8000/instrumentation-breakpoints.html)
  11. Breakpoint should hit

Hitting breakpoints on reload (back-end state available)

These tests are the same as the tests before, but are based on reloading (i.e. we have loaded this page within the same tab already once).

Breakpoint on TS file

This test illustrates the problem that DevTools does not always manage to set breakpoints in time for sourcemapped JS files on reload. In each of these cases, we should hit a breakpoint on reload.

Steps

  1. Open DevTools
  2. Set a breakpoint in instrumentation-breakpoints.ts
  3. Reload
  4. Breakpoint should hit

Breakpoint on overridden TS file

This test illustrates the problem that DevTools does not always manage to set breakpoints in time for overridden TS files on reload.

Steps

  1. Open DevTools
  2. In the Sources panel, go to the Overrides subtab
  3. Select a folder for your overrides and allow DevTools to access your folder (popup).
  4. Open instrumentation-breakpoints.ts
  5. Edit the file by adding a line console.log('hello'); and save
  6. Set a breakpoint on that line
  7. Reload
  8. Breakpoint should hit, and overridden TS file is shown

Breakpoint on filesystem TS file

This test illustrates the problem that DevTools does not always manage to set breakpoints in time for filesystem TS files on reload.

Steps

  1. Clone this repository: git clone https://github.com/ChromeDevTools/devtools-dbg-stories.git
  2. Set up the repository and serve the page (see README.md within the repository)
  3. Navigate to the served page (probably localhost:8000/instrumentation-breakpoints.html)
  4. Open DevTools
  5. In the Sources panel, go to the Filesystem subtab
  6. Select the cloned devtools-dbg-stories folder and add it to your workspace
  7. Open instrumentation-breakpoints.ts within the FileSystem subtab
  8. Set a breakpoint on a line
  9. Reload
  10. Breakpoint should hit