[DevTools Bug]: Incorrect source location after hot reload & editing props
Open
Nobody has claimed this yet.
Component: Developer Tools
Status: Unconfirmed
Type: Bug
- Dominant language
- JavaScript
- Stars
- 251k
- Forks
- 51.4k
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 53
Description
Website or app
https://gist.github.com/kiootic/54986cd163b52cbbcd5d8283eb5ed06f
Repro steps
- Create a new react app using
create-react-app - Replace the code in
App.jswithApp.jsxin the gist - Start the app and inspect the 3
pelements using dev tool - Should observe correct line numbers (
App.js:4,App.js:5,App.js:6) - In code editor, change the first
pelement to be multiline, likeApp-update.jsxin gist - After hot reload, should observe updated line numbers (
App.js:4,App.js:7,App.js:8) - Using dev tool, change the first
pelement'schildrenprop to be something else. - Should observe incorrect line numbers (reverted to
App.js:4,App.js:5,App.js:6) - Repeat step 7 again, and should observe correct line numbers again.
- The line numbers are observed to be alternating between correct & incorrect state when repeating the edit step.
How often does this bug happen?
Every time
DevTools package (automated)
No response
DevTools version (automated)
No response
Error message (automated)
No response
Error call stack (automated)
No response
Error component stack (automated)
No response
GitHub query string (automated)
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the issue with the App.jsx and App-update.jsx examples from the linked gist in a create-react-app app, then inspect the three p elements in DevTools. Repeat the hot reload and children-prop edit sequence while comparing the reported App.js line numbers; done means the locations remain correct rather than alternating between states.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- devtools, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100