Open Bug 1448364 (react-devtools-about-pages) Opened 6 years ago Updated 2 years ago

Unable to debug new tab page using React DevTools

Categories

(Firefox :: New Tab Page, enhancement, P3)

Product:
Firefox
Component:
New Tab Page
Type:
enhancement

Tracking

()

Tracking Flags:
Tracking Status
firefox61 --- affected

People

(Reporter: Mardak, Unassigned)

References

Details

From https://github.com/mozilla/activity-stream/issues/3459

This is pretty meta, and not convinced it's worth solving, but...
I was trying to debug the page using React Developer Tools extension (https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) and I'm getting "This page doesn't appear to be using React" error:

nightly

Could possibly be because we're not a real page. I tried injecting the standalone version script https://github.com/facebook/react-devtools/tree/master/packages/react-devtools but that didn't seem to work for me locally.

Not sure if anybody else has gotten this working locally, or if it's something we should potentially investigate injecting into the dev version of the extension (if that still gets built regularly).

This is a known issue because about:home/about:newtab doesn't have a real origin :'(
dmose suggests he would fix in react upstream. Maybe to start, we can fix it locally

I would guess that the simplest way to this end would be to create fake data like we had in the original activity-stream prototype so that we can debug easily by loading the entire page over local HTTP; I believe the devtools development rig works like this.

I do wonder why the standalone version doesn't work right.

This fake data will also be useful (and probably to at least some degree necessary) if we implement bug 1531104 for visual regression testing.

Alias: react-devtools-about-pages
Component: Activity Streams: Newtab → New Tab Page
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.