Repro for hitting breakpoints in non-sourcemapped JS

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

Breakpoint on JS file

This test illustrates the problem that DevTools does not always manage to set breakpoints in time for non-sourcemapped 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.js
  3. Open a new tab and open DevTools
  4. Navigate to this page
  5. Breakpoint should hit

Breakpoint on overridden JS file

This test illustrates the problem that DevTools does not always manage to set breakpoints in time for overridden JS 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.js
  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, and overridden JS file with the added line is shown

Breakpoint on filesystem JS file

This test illustrates the problem that DevTools does not always manage to set breakpoints in time for filesystem JS 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/dist folder and add it to your workspace
  7. Open instrumentation-breakpoints.js 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 already loaded this page within the same tab once).

Breakpoint on JS file

This test illustrates the problem that DevTools does not always manage to set breakpoints in time for non-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.js
  3. Reload
  4. Breakpoint should hit

Breakpoint on overridden JS file

This test illustrates the problem that DevTools does not always manage to set breakpoints in time for overridden JS 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.js
  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 JS file is shown

Breakpoint on filesystem JS file

This test illustrates the problem that DevTools does not always manage to set breakpoints in time for filesystem JS 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/dist folder and add it to your workspace
  7. Open instrumentation-breakpoints.js within the FileSystem subtab
  8. Set a breakpoint on a line
  9. Reload
  10. Breakpoint should hit