Hacker News new | ask | show | jobs
by Jarred 2059 days ago
I don't precisely mean React Developer Tools because the UI is unnecessary for this usecase, but it provides similar functionality where you can access the state/props from the component instance.

The library is: https://github.com/baruchvlz/resq

Example code:

    // resq is the stringified source of the library
    // page is a Puppeteer page
    // this line injects resq into the page
    await page.evaluate(resq);
    // This finds a React component with a prop "country" set to "us"
    const usProps = await page.evaluate(
      `window["resq"].resq$("*", document.querySelector("#__next")).byProps({country: "us"}).props`
    );
    // This finds a React component with a prop "expandRowByClick" set to true
    const news = await page.evaluate(
      `window["resq"].resq$("*", document.querySelector("#__next")).byProps({expandRowByClick: true}).props.dataSource`
    );
1 comments

Thanks. I didn't know about resq.