Chrome Debugger Still Running

Description

Reactime offers the ability to enable and disable its accessibility feature to prevent the persistent Chrome Debugger notification from appearing when accessibility is not wanted by the developer.

If a developer closes the application without disabling the accessibility tree, the Chrome Debugger will continue to run. If a new tab is opened and the developer navigates to Reactime, Reactime will show the accessibility features are being disabled.

If the developer forgets to disable the accessibility tree before closing the tab, the current workaround to disable the accessibility feature requires the developer to refresh Reactime from the Chrome Extension panel or close out of all Google Chrome tabs and windows.

Reproduction

Follow all the normal steps to set up and run Reactime and run the demo app.

• Navigate to the Accessibility tab and click "enable".
• While other tabs are open, close the Chrome tab that is running the demo app*.
• Open a new tab and navigate back to the demo app.

The Chrome Debugger will notify the developer that Reactime has started debugging the browser.

*If the developer has no other tabs open, Reactime will automatically refresh itself when opening again.

System information

System:
OS: macOS 14.3.1
CPU: (8) arm64 Apple M2
Memory: 59.77 MB / 8.00 GB
Shell: 3.6.1 - /opt/homebrew/bin/fish
Binaries:
Node: 18.18.2 - ~/Desktop/codesmith/reactime-v24/node_modules/.bin/node
npm: 10.2.4 - /opt/homebrew/bin/npm
Browsers:
Chrome: 122.0.6261.69
Safari: 17.3.1
npmPackages:
@emotion/react: ^11.11.1 => 11.11.3
@emotion/styled: ^11.11.0 => 11.11.0
@mui/icons-material: ^5.15.1 => 5.15.5
@mui/material: ^5.15.1 => 5.15.5
@mui/system: ^5.15.1 => 5.15.5
@reduxjs/toolkit: ^2.0.1 => 2.0.1
@testing-library/jest-dom: ^6.1.5 => 6.2.0
@testing-library/react: ^14.1.2 => 14.1.2
@testing-library/user-event: ^14.5.1 => 14.5.2
@types/chrome: ^0.0.254 => 0.0.254
@types/jest: ^29.5.11 => 29.5.11
@types/node: ^20.10.5 => 20.11.5
@typescript-eslint/eslint-plugin: ^6.15.0 => 6.19.0
@visx/axis: ^3.5.0 => 3.5.0
@visx/event: ^3.3.0 => 3.3.0
@visx/gradient: ^3.3.0 => 3.3.0
@visx/grid: ^3.5.0 => 3.5.0
@visx/group: ^3.3.0 => 3.3.0
@visx/hierarchy: ^3.3.0 => 3.3.0
@visx/responsive: ^3.3.0 => 3.3.0
@visx/scale: ^3.5.0 => 3.5.0
@visx/shape: ^3.5.0 => 3.5.0
@visx/text: ^3.3.0 => 3.3.0
@visx/tooltip: ^3.3.0 => 3.3.0
copy-webpack-plugin: ^11.0.0 => 11.0.0
cross-env: ^7.0.3 => 7.0.3
css-loader: ^6.8.1 => 6.9.1
d3: ^7.8.5 => 7.8.5
d3-scale-chromatic: ^3.0.0 => 3.0.0
d3-shape: ^3.2.0 => 3.2.0
dotenv: ^16.3.1 => 16.3.2
eslint-plugin-jest: ^27.6.0 => 27.6.3
eslint-plugin-jest-dom: ^5.1.0 => 5.1.0
eslint-plugin-react: ^7.33.2 => 7.33.2
eslint-plugin-react-hooks: ^4.6.0 => 4.6.0
eslint-plugin-testing-library: ^6.2.0 => 6.2.0
express: ^4.18.2 => 4.18.2
html-react-parser: ^5.0.11 => 5.1.1
html-webpack-plugin: ^5.5.4 => 5.6.0
identity-obj-proxy: ^3.0.0 => 3.0.0
intro.js: ^7.2.0 => 7.2.0
intro.js-react: ^1.0.0 => 1.0.0
jsdom: ^23.0.1 => 23.2.0
jsondiffpatch: ^0.5.0 => 0.5.0
lodash: ^4.17.21 => 4.17.21
node: ^18.12.1 => 18.18.2
prettier: ^3.1.1 => 3.2.4
rc-slider: ^10.5.0 => 10.5.0
rc-tooltip: ^6.1.3 => 6.1.3
react: ^18.2.0 => 18.2.0
react-apexcharts: ^1.4.1 => 1.4.1
react-dom: ^18.2.0 => 18.2.0
react-hover: ^3.0.1 => 3.0.1
react-json-tree: ^0.18.0 => 0.18.0
react-redux: ^9.0.4 => 9.1.0
react-router-dom: ^6.21.1 => 6.21.3
react-select: ^5.8.0 => 5.8.0
react-spinners: ^0.13.8 => 0.13.8
redux: ^5.0.0 => 5.0.1
regenerator-runtime: ^0.14.1 => 0.14.1
sass: ^1.69.5 => 1.70.0
sass-loader: ^13.3.2 => 13.3.3
style-loader: ^3.3.3 => 3.3.4
styled-components: ^6.1.2 => 6.1.8
ts-loader: ^9.5.1 => 9.5.1
typedoc: ^0.25.4 => 0.25.7
typescript: ^5.3.3 => 5.3.3
web-vitals: ^3.5.0 => 3.5.1
webpack: ^5.89.0 => 5.89.0
webpack-cli: ^5.1.4 => 5.1.4

Additional information

No response

👨‍👧‍👦 Contributing

• 🙋‍♂️ Yes, I'd love to make a PR to fix this bug!

Start with the Accessibility tab's enable and disable flow, then reproduce the reported sequence: enable accessibility, close the demo tab while another tab remains open, and reopen the demo app. Trace how Reactime handles the accessibility tree across tab and application closure. Done means reopening the app does not leave the Chrome Debugger running or require refreshing the extension or closing all Chrome windows.