[
{
"path": ".eslintignore",
"content": "npm-package/lib/\n*.tmpl.js\n*.bundle.js\ndist/\nrelease/\nnode_modules/\n"
},
{
"path": ".eslintrc",
"content": "{\n \"parser\": \"@babel/eslint-parser\",\n \"extends\": [\"airbnb\", \"prettier\"],\n \"env\": {\n \"browser\": true,\n \"node\": true,\n \"jest\": true\n },\n \"settings\": {\n \"import/core-modules\": [\"electron\"]\n },\n \"rules\": {\n \"linebreak-style\": 0,\n \"react/prefer-stateless-function\": 0,\n \"consistent-return\": 0,\n \"strict\": 0,\n \"no-console\": 0,\n \"no-param-reassign\": [\"error\", { \"props\": false }],\n \"no-underscore-dangle\": [\n \"error\",\n {\n \"allow\": [\n \"__IS_REDUX_NATIVE_MESSAGE__\",\n \"__AVAILABLE_METHODS_CAN_CALL_BY_RNDEBUGGER__\",\n \"__PLATFORM__\",\n \"__REPORT_REACT_DEVTOOLS_PORT__\",\n \"__FETCH_SUPPORT__\",\n \"__NETWORK_INSPECT__\",\n \"__FROM_DEBUGGER_WORKER__\"\n ]\n }\n ],\n \"react/jsx-filename-extension\": [1, { \"extensions\": [\".js\", \".jsx\"] }],\n \"import/prefer-default-export\": 0,\n \"import/no-extraneous-dependencies\": [\"error\", { \"optionalDependencies\": true }],\n \"semi\": [\"error\", \"never\"]\n }\n}\n"
},
{
"path": ".github/FUNDING.yml",
"content": "github: jhen0409\nopen_collective: react-native-debugger\n"
},
{
"path": ".github/ISSUE_TEMPLATE.md",
"content": "\n\n\n\nReact Native Debugger app version: [FILL THIS OUT]\nReact Native version: [FILL THIS OUT]\nPlatform: [FILL THIS OUT: iOS, Android, ...]\nIs real device of platform: [Yes or No]\nOperating System: [FILL THIS OUT: macOS, Linux, Windows]\n\n\n"
},
{
"path": ".github/settings.yml",
"content": "repository:\n name: react-native-debugger\n has_issues: true\n has_wiki: true\n has_downloads: true\n default_branch: master\n allow_squash_merge: true\n allow_merge_commit: true\n allow_rebase_merge: true\n\nlabels:\n - name: bug\n color: CC0000\n - name: help wanted\n color: 33aa3f\n - name: duplicate\n color: cfd3d7\n - name: enhancement\n color: a2eeef\n - name: question\n color: d876e3\n - name: invalid\n color: e4e669\n - name: wontfix\n color: ffffff\n - name: feature\n color: 336699\n - name: trivial\n oldname: good first issue\n color: afffb2\n - name: has PR\n color: 3100ad\n - name: documentation\n color: a1ed95\n - name: RFC\n color: 3100ad\n - name: WIP\n color: e4e669\n - name: don't merge\n color: CC0000\n - name: stale\n color: ffffff\n - name: cannot-reproduce\n color: bfdadc\n - name: more-information-needed\n color: c2e0c6\n - name: upstream\n color: 5319e7\n - name: waiting-for-response\n color: 3100ad\n\n # Integrations\n - name: integration/react-devtools\n color: 1b307c\n - name: integration/redux-devtools\n color: 7c2d9e\n - name: integration/apollo-client-devtools\n color: 7066e8\n\n # Features\n - name: feature/network-inspect\n color: fce885\n\n # Packages\n - name: package/react-native-debugger-open\n color: f7e78f\n"
},
{
"path": ".github/workflows/main.yml",
"content": "name: CI\n\non: [push, pull_request]\n\nconcurrency:\n group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}\n cancel-in-progress: true\n\njobs:\n build-test-linux:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v3\n - uses: actions/setup-node@v3.7.0\n with:\n node-version: 18.x\n cache: 'yarn'\n - name: Setup\n run: sudo apt-get install -y libgbm-dev\n - name: Test\n id: test\n run: |\n yarn\n cd npm-package && yarn && cd ..\n yarn test\n yarn build\n xvfb-run --auto-servernum yarn test-e2e\n - name: Upload artifacts on failure\n if: ${{ failure() && steps.test.conclusion == 'failure' }}\n uses: actions/upload-artifact@v3\n with:\n name: artifacts\n path: artifacts\n retention-days: 1\n build-test-macos:\n runs-on: macOS-latest\n steps:\n - uses: actions/checkout@v3\n - uses: actions/setup-node@v3.7.0\n with:\n node-version: 18.x\n cache: 'yarn'\n - name: Test\n id: test\n run: |\n yarn\n cd npm-package && yarn && cd ..\n yarn test\n yarn build\n yarn test-e2e\n - name: Upload artifacts on failure\n if: ${{ failure() && steps.test.conclusion == 'failure' }}\n uses: actions/upload-artifact@v3\n with:\n name: artifacts\n path: artifacts\n retention-days: 1\n build-test-windows:\n runs-on: windows-2022\n steps:\n - uses: actions/checkout@v3\n - uses: actions/setup-node@v3.7.0\n with:\n node-version: 18.x\n cache: 'yarn'\n - name: Test\n id: test\n shell: bash\n run: |\n yarn config set network-timeout 500000 -g\n yarn\n cd npm-package && yarn && cd ..\n yarn build\n yarn test\n yarn test-e2e\n - name: Upload artifacts on failure\n if: ${{ failure() && steps.test.conclusion == 'failure' }}\n uses: actions/upload-artifact@v3\n with:\n name: artifacts\n path: artifacts\n retention-days: 1"
},
{
"path": ".github/workflows/release.yml",
"content": "name: Release\n\non:\n release:\n types: [published]\n\njobs:\n release-linux:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v3\n - uses: actions/setup-node@v3.7.0\n with:\n node-version: 18.x\n cache: 'yarn'\n - name: Package\n run: |\n yarn\n yarn build\n yarn pack-linux\n - name: Upload assets to release\n uses: jhen0409/release-asset-action@master\n with:\n file: release/rn-debugger-linux-x64.zip\n pattern: release/react-native-debugger*\n github-token: ${{ secrets.GITHUB_TOKEN }}\n release-windows:\n runs-on: windows-2022\n steps:\n - uses: actions/checkout@v3\n - uses: actions/setup-node@v3.7.0\n with:\n node-version: 18.x\n cache: 'yarn'\n - name: Package\n shell: bash\n run: |\n yarn config set network-timeout 500000 -g\n yarn\n yarn build\n yarn pack-windows\n - name: Upload assets to release\n uses: jhen0409/release-asset-action@master\n with:\n file: release/rn-debugger-windows-x64.zip\n pattern: release/react_native_debugger*.exe\n github-token: ${{ secrets.GITHUB_TOKEN }}\n"
},
{
"path": ".gitignore",
"content": "node_modules\nnpm-debug.log\nyarn-error.log\n.DS_Store\ndist/js\ndist/main.js*\nrelease/\n*.bundle.js\ntmp/\nconfig_test\n.idea/\nartifacts/\n"
},
{
"path": ".prettierrc",
"content": "{\n \"trailingComma\": \"all\",\n \"tabWidth\": 2,\n \"semi\": false,\n \"singleQuote\": true,\n \"printWidth\": 80\n}\n"
},
{
"path": "LICENSE.md",
"content": "\nThe MIT License (MIT)\n\nCopyright (c) 2016 Jhen-Jie Hong\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
},
{
"path": "README.md",
"content": "# React Native Debugger\n\n[](#backers) [](#sponsors) [](https://github.com/jhen0409/react-native-debugger)\n\nā ļø This app is currently only supported old [Remote Debugger](https://reactnative.dev/docs/debugging#chrome-developer-tools), if you're looking for new debugger support (e.g. Hermes / JSI / New Architecture) of React Native Debugger, please follow [discussion#774](https://github.com/jhen0409/react-native-debugger/discussions/774).\n\n\n\n> Run the redux example of [react-navigation](https://github.com/react-navigation/react-navigation/tree/master/example) with Redux DevTools setup\n\nThis is a standalone app for debugging React Native apps:\n\n- Based on official [Remote Debugger](https://reactnative.dev/docs/debugging#chrome-developer-tools) and provide more functionality.\n- Includes [React Inspector](docs/react-devtools-integration.md) from [`react-devtools-core`](https://github.com/facebook/react/tree/master/packages/react-devtools-core).\n- Includes Redux DevTools, made [the same API](docs/redux-devtools-integration.md) with [`redux-devtools-extension`](https://github.com/reduxjs/redux-devtools/tree/main/extension).\n- Includes [Apollo Client DevTools](docs/apollo-client-devtools-integration.md) ([`apollographql/apollo-client-devtools`](https://github.com/apollographql/apollo-client-devtools)) as devtools extension.\n\n## Installation\n\nTo install the app, you can download a prebuilt binary from the [release page](https://github.com/jhen0409/react-native-debugger/releases).\n\nFor **macOS**, you can use [Homebrew Cask](https://caskroom.github.io) to install:\n\n### < Homebrew 2.6.0\n\n```bash\nbrew update && brew install --cask react-native-debugger\n```\n\n### >= Homebrew 2.6.0\n\n```bash\nbrew install --cask react-native-debugger\n```\n\nThis puts `React Native Debugger.app` in your `/applications/` folder.\n\n### NOTICE: React Native Compatibility\n\nTo use this app you need to ensure you are using the correct version of React Native Debugger and react-native:\n\n| React Native Debugger | react-native |\n| --------------------- | ------------ |\n| >= 0.11 | >= 0.62 |\n| <= 0.10 | <= 0.61 |\n\nWe used different auto-update feed for `v0.10` and `v0.11`, so you won't see update tips of `v0.11` from `v0.10`.\n\nInstall last release of v0.10 (0.10.7)\n\n### < Homebrew 2.6.0\n\n`brew update && brew cask install https://raw.githubusercontent.com/Homebrew/homebrew-cask/b6ac3795c1df9f97242481c0817b1165e3e6306a/Casks/react-native-debugger.rb`\n\n### >= Homebrew 2.6.0\n\n`brew install --cask https://raw.githubusercontent.com/Homebrew/homebrew-cask/b6ac3795c1df9f97242481c0817b1165e3e6306a/Casks/react-native-debugger.rb`\n\n### Arch-based distributions\n\nYou can install [react-native-debugger-bin][1] from Arch User Repository:\n\n```shell\ngit clone https://aur.archlinux.org/react-native-debugger-bin.git\ncd react-native-debugger-bin\nmakepkg -si\n\n# or using AUR helper\nparu -S react-native-debugger-bin\n```\n\n## Build from source\n\nPlease read [Development section](docs/contributing.md#development) in docs/contributing.md for how to build the app from source.\n\n## Documentation\n\n- [Getting Started](docs/getting-started.md)\n- [Debugger Integration](docs/debugger-integration.md)\n- [React DevTools Integration](docs/react-devtools-integration.md)\n- [Redux DevTools Integration](docs/redux-devtools-integration.md)\n- [Apollo Client DevTools Integration](docs/apollo-client-devtools-integration.md)\n- [Shortcut references](docs/shortcut-references.md)\n- [Network inspect of Chrome Developer Tools](docs/network-inspect-of-chrome-devtools.md)\n- [Enable open in editor in console](docs/enable-open-in-editor-in-console.md)\n- [Config file in home directory](docs/config-file-in-home-directory.md)\n- [Troubleshooting](docs/troubleshooting.md)\n- [Contributing](docs/contributing.md)\n\n## Documentation (v0.10)\n\nPlease visit [`v0.10 branch`](https://github.com/jhen0409/react-native-debugger/tree/v0.10).\n\n## Credits\n\n- Great work of [React DevTools](https://github.com/facebook/react/tree/master/packages/react-devtools)\n- Great work of [Redux DevTools](https://github.com/gaearon/redux-devtools) / [Remote Redux DevTools](https://github.com/zalmoxisus/remote-redux-devtools) and all third-party monitors.\n- Great work of [Apollo Client DevTools](https://github.com/apollographql/apollo-client-devtools)). (Special thanks to [@Gongreg](https://github.com/Gongreg) for integrating this!)\n\n## Backers\n\nThank you to all our backers! š [[Become a backer](https://opencollective.com/react-native-debugger#backer)]\n\n![](\"https://opencollective.com/react-native-debugger/backers.svg?width=890\")
\n\n## Sponsors\n\nSupport this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/react-native-debugger#sponsor)]\n\n![](\"https://opencollective.com/react-native-debugger/sponsors.svg?width=890\")
\n\n## LICENSE\n\n[MIT](LICENSE.md)\n\n[1]: https://aur.archlinux.org/packages/react-native-debugger-bin\n"
},
{
"path": "__e2e__/app.spec.js",
"content": "import fs from 'fs'\nimport path from 'path'\nimport net from 'net'\nimport http from 'http'\nimport executablePath from 'electron'\nimport { _electron as electron } from 'playwright-core'\nimport waitForExpect from 'wait-for-expect'\nimport buildTestBundle, { bundlePath } from './buildTestBundle'\nimport createMockRNServer from './mockRNServer'\n\nconst delay = (time) =>\n new Promise((resolve) => {\n setTimeout(resolve, time)\n })\n\njest.setTimeout(6e4)\n\ndescribe('Application launch', () => {\n let electronApp\n let mainWindow\n const logs = []\n\n beforeAll(async () => {\n await buildTestBundle()\n process.env.PACKAGE = 'no'\n electronApp = await electron.launch({\n executablePath,\n args: ['--user-dir=__e2e__/tmp', './main.js'],\n cwd: path.join(__dirname, '../dist'),\n })\n mainWindow = await electronApp.firstWindow()\n mainWindow.on('console', (msg) => logs.push(msg))\n await mainWindow.waitForLoadState()\n })\n\n afterEach(async () => {\n const state = expect.getState()\n await mainWindow.screenshot({\n path: `./artifacts/${state.currentTestName}.png`,\n })\n const devtoolsWindow = electronApp.windows()[2]\n if (devtoolsWindow) {\n try {\n await delay(100)\n await devtoolsWindow.screenshot({\n path: `./artifacts/devtools:${state.currentTestName}.png`,\n })\n } catch (e) {\n console.error(e)\n }\n }\n })\n\n afterAll(async () => {\n await electronApp.close()\n })\n\n it('should show an initial window', async () => {\n expect(await mainWindow.title()).toBe(\n 'React Native Debugger - Attempting reconnection (port 8081)',\n )\n })\n\n it('should portfile (for debugger-open usage) always exists in home dir', async () => {\n const portFile = path.join(\n process.env.USERPROFILE || process.env.HOME,\n '.rndebugger_port',\n )\n\n expect(fs.existsSync(portFile)).toBe(true)\n fs.unlinkSync(portFile)\n\n await waitForExpect(async () => {\n expect(fs.existsSync(portFile)).toBeTruthy()\n })\n })\n\n it(\"should contain Inspector monitor's component on Redux DevTools\", async () => {\n const val = await mainWindow.textContent(\n '//div[contains(@class, \"inspector-\")]',\n )\n expect(val).not.toBeNull()\n })\n\n it('should contain an empty actions list on Redux DevTools', async () => {\n const val = await mainWindow.textContent(\n '//div[contains(@class, \"actionListRows-\")]',\n )\n expect(val).toBe('')\n })\n\n it('should show waiting message on React DevTools', async () => {\n const el = await mainWindow.locator(\n '//h2[text()=\"Waiting for React to connectā¦\"]',\n )\n expect(await el.isVisible()).toBe(true)\n })\n\n const customRNServerPort = 8098\n const getURLFromConnection = (server) =>\n new Promise((resolve) => {\n server.on('connection', (socket, req) => {\n resolve(req.url)\n })\n })\n\n it('should connect to fake RN server', async () => {\n const { wss, server } = createMockRNServer()\n\n const url = await getURLFromConnection(wss)\n expect(url).toBe('/debugger-proxy?role=debugger&name=Chrome')\n\n await waitForExpect(async () => {\n expect(await mainWindow.title()).toBe(\n 'React Native Debugger - Waiting for client connection (port 8081)',\n )\n })\n server.close()\n wss.close()\n })\n\n it('should connect to fake RN server (port 8088) with send set-debugger-loc after', async () => {\n const { wss, server } = createMockRNServer(customRNServerPort)\n\n const rndPath = `rndebugger://set-debugger-loc?host=localhost&port=${customRNServerPort}`\n const homeEnv = process.platform === 'win32' ? 'USERPROFILE' : 'HOME'\n const portFile = path.join(process.env[homeEnv], '.rndebugger_port')\n const rndPort = fs.readFileSync(portFile, 'utf-8')\n\n const sendSuccess = await new Promise((resolve) => {\n const socket = net.createConnection(\n { host: '127.0.0.1', port: rndPort },\n () => {\n let pass\n socket.setEncoding('utf-8')\n socket.write(JSON.stringify({ path: rndPath }))\n socket.on('data', (data) => {\n pass = data === 'success'\n socket.end()\n })\n socket.on('end', () => resolve(pass))\n setTimeout(() => socket.end(), 1000)\n },\n )\n })\n expect(sendSuccess).toBe(true)\n\n const url = await getURLFromConnection(wss)\n expect(url).toBe('/debugger-proxy?role=debugger&name=Chrome')\n\n await waitForExpect(async () => {\n expect(await mainWindow.title()).toBe(\n `React Native Debugger - Waiting for client connection (port ${customRNServerPort})`,\n )\n })\n server.close()\n wss.close()\n })\n\n describe('Import fake script after', () => {\n const getOneRequestHeaders = (port) =>\n new Promise((resolve) => {\n const server = http.createServer((req, res) => {\n res.writeHead(200, { 'Content-Type': 'text/plain' })\n res.end('')\n resolve(req.headers)\n server.close()\n })\n server.listen(port)\n })\n\n let headersPromise\n let server\n let wss\n beforeAll(async () => {\n const info = createMockRNServer(customRNServerPort)\n server = info.server\n wss = info.wss\n\n headersPromise = getOneRequestHeaders(8099)\n\n await new Promise((resolve) => {\n wss.on('connection', (socket) => {\n socket.on('message', (message) => {\n const data = JSON.parse(message)\n switch (data.replyID) {\n case 'createJSRuntime':\n socket.send(\n JSON.stringify({\n id: 'sendFakeScript',\n method: 'executeApplicationScript',\n inject: [],\n url: `../../${bundlePath}`,\n }),\n )\n break\n case 'sendFakeScript':\n return resolve()\n default:\n console.error(`Unexperted id ${data.replyID}, data:`, data)\n }\n })\n socket.send(\n JSON.stringify({\n id: 'createJSRuntime',\n method: 'prepareJSRuntime',\n }),\n )\n })\n })\n expect(await mainWindow.title()).toBe(\n `React Native Debugger - Connected (port ${customRNServerPort})`,\n )\n })\n\n afterAll(() => {\n server.close()\n wss.close()\n })\n\n it('should received forbidden header names from xhr-test', async () => {\n const headers = await headersPromise\n\n expect(headers.origin).toBe('custom_origin_here')\n expect(headers['user-agent']).toBe('react-native')\n })\n\n it('should have @@INIT action on Redux DevTools', async () => {\n const el = await mainWindow\n .locator('div')\n .filter({ hasText: '@@redux/INIT' })\n .first()\n expect(await el.isVisible()).toBeTruthy() // Last store is `RemoteDev store instance 1`\n })\n\n let currentInstance = 'Autoselect instances' // Default instance\n const wait = () => delay(750)\n const selectInstance = async (instance) => {\n let el = mainWindow.locator(`//div[text()=\"${currentInstance}\"]`)\n expect(await el.isVisible()).toBeTruthy()\n await el.click({ force: true })\n await wait()\n currentInstance = instance\n el = mainWindow.locator(`//div[text()=\"${instance}\"]`)\n expect(await el.isVisible()).toBeTruthy()\n await el.click({ force: true })\n await wait()\n }\n const commit = async () => {\n await mainWindow.click('//button[text()=\"Commit\"]', { force: true })\n await wait()\n }\n\n const expectActions = {\n 'Redux store instance 1': {\n expt: [\n '@@INIT',\n 'TEST_PASS_FOR_REDUX_STORE_1',\n 'SHOW_FOR_REDUX_STORE_1',\n ],\n notExpt: ['NOT_SHOW_FOR_REDUX_STORE_1', 'TEST_PASS_FOR_REDUX_STORE_2'],\n },\n 'Redux store instance 2': {\n expt: ['@@INIT', 'TEST_PASS_FOR_REDUX_STORE_2'],\n notExpt: [\n 'TEST_PASS_FOR_REDUX_STORE_1',\n 'NOT_SHOW_1_FOR_REDUX_STORE_2',\n 'NOT_SHOW_2_FOR_REDUX_STORE_2',\n 'NOT_SHOW_3_FOR_REDUX_STORE_2',\n ],\n },\n 'MobX store instance 1': {\n expt: ['@@INIT', 'testPassForMobXStore1'],\n notExpt: ['TEST_PASS_FOR_REDUX_STORE_2'],\n },\n 'MobX store instance 2': {\n expt: ['@@INIT', 'testPassForMobXStore2'],\n notExpt: ['testPassForMobXStore1'],\n },\n 'RemoteDev store instance 1': {\n expt: ['@@redux/INIT', 'TEST_PASS_FOR_REMOTEDEV_STORE_1'],\n notExpt: ['testPassForMobXStore2'],\n },\n }\n\n const eachAsync = (entries, fn) =>\n entries.reduce(\n (promise, entry, index) => promise.then(() => fn(entry, index)),\n Promise.resolve(),\n )\n\n const runExpectActions = async (name) => {\n const { expt, notExpt } = expectActions[name]\n\n await eachAsync(expt, async (action) => {\n const el = await mainWindow\n .locator('div')\n .filter({ hasText: action })\n .first()\n expect(await el.isVisible()).toBeTruthy()\n })\n\n await eachAsync(notExpt, async (action) => {\n const el = await mainWindow\n .locator('div')\n .filter({ hasText: action })\n .first()\n expect(await el.isVisible()).toBeFalsy()\n })\n }\n\n const checkInstance = async (name) => {\n await selectInstance(name)\n await runExpectActions(name)\n await commit()\n }\n\n it('should have two Redux store instances on Redux DevTools', async () => {\n await checkInstance('Redux store instance 1')\n await checkInstance('Redux store instance 2')\n })\n\n it('should have two MobX store instances on Redux DevTools', async () => {\n await checkInstance('MobX store instance 1')\n await checkInstance('MobX store instance 2')\n })\n\n it('should have one RemoteDev store instances on Redux DevTools', async () => {\n await checkInstance('RemoteDev store instance 1')\n })\n\n it('should have only specific logs in console of main window', async () => {\n // Print renderer process logs\n logs.forEach((log) =>\n console.log(`Message: ${log.text()}\\nType: ${log.type()}`),\n )\n expect(logs.length).toEqual(3) // clear + clear + warning\n const [, , formDataWarning] = logs\n expect(formDataWarning.type()).toBe('warning')\n expect(\n formDataWarning\n .text()\n .indexOf(\"Detected you're enabled Network Inspect\") > 0,\n ).toBeTruthy()\n })\n\n it('should show apollo devtools panel', async () => {\n const devtoolsWindow = electronApp.windows()[2]\n expect(\n await devtoolsWindow.evaluate(() =>\n // eslint-disable-next-line no-undef\n Object.keys(UI.panels).some(\n (key) =>\n key.startsWith('chrome-extension://') && key.endsWith('Apollo'),\n ),\n ),\n ).toBeTruthy()\n })\n })\n})\n"
},
{
"path": "__e2e__/buildTestBundle.js",
"content": "import path from 'path'\nimport webpack from 'webpack'\n\nconst outputPath = '__e2e__/fixture'\nconst filename = 'app.bundle.js'\n\nexport const bundlePath = path.join(outputPath, filename)\n\n// Build a bundle for simulate RNDebugger worker run react-native bundle,\n// it included redux, mobx, remotedev tests\nexport default function buildTestBundle() {\n return new Promise((resolve) => {\n webpack({\n mode: 'development',\n entry: './__e2e__/fixture/app',\n output: {\n path: path.resolve(__dirname, '..', outputPath),\n filename,\n },\n resolve: {\n mainFields: ['react-native', 'main', 'browser'],\n },\n }).run(resolve)\n })\n}\n"
},
{
"path": "__e2e__/fixture/apollo.js",
"content": "/* eslint-disable import/no-extraneous-dependencies */\n/*\n * Create an Apollo Client to test the bridge messages sent\n * wouldn't break the debugger proxy.\n */\n\nimport { ApolloClient, InMemoryCache } from '@apollo/client'\nimport gql from 'graphql-tag'\n\nconst client = new ApolloClient({\n uri: 'https://spacex-production.up.railway.app/',\n cache: new InMemoryCache(),\n})\n\nexport default async function run() {\n return client.query({\n query: gql`\n query ExampleQuery {\n company {\n name\n ceo\n employees\n }\n }\n `,\n })\n}\n"
},
{
"path": "__e2e__/fixture/app.js",
"content": "import './setup'\n\nimport runXHRTest from './xhr-test' // Install fetch polyfill before initial apollo-client\nimport runApolloTest from './apollo'\nimport runReduxTest from './redux'\nimport runMobXTest from './mobx'\nimport runRemoteDevTest from './remotedev'\n\nrunReduxTest()\nrunMobXTest()\nrunRemoteDevTest()\nrunApolloTest().catch((e) => console.error(e))\nrunXHRTest().catch((e) => console.error(e))\n"
},
{
"path": "__e2e__/fixture/mobx.js",
"content": "/* eslint prefer-arrow-callback: 0 */\nimport { observable, action, useStrict } from 'mobx'\nimport remotedev from 'mobx-remotedev/lib/dev'\n\nuseStrict(true)\n\nexport default function run() {\n const store = observable({ value: 0 })\n store.testPassForMobXStore1 = action(function testPassForMobXStore1() {})\n\n remotedev(store, { name: 'MobX store instance 1' }).testPassForMobXStore1()\n\n const store2 = observable({ value: 1 })\n store2.testPassForMobXStore2 = action(function testPassForMobXStore2() {})\n\n remotedev(store2, { name: 'MobX store instance 2' }).testPassForMobXStore2()\n}\n"
},
{
"path": "__e2e__/fixture/redux.js",
"content": "/* eslint no-underscore-dangle: 0 */\n\nimport { createStore } from 'redux'\n\nexport default function run() {\n // Enhancer\n const store1 = createStore(\n (state) => state,\n { value: 0 },\n window.__REDUX_DEVTOOLS_EXTENSION__({\n name: 'Redux store instance 1',\n actionsWhitelist: ['@@INIT', 'TEST_PASS_FOR_REDUX_STORE_1', '^SHOW_FOR_REDUX_STORE_1$'],\n }),\n )\n\n // Compose enhancers\n const store2 = createStore(\n (state) => state,\n { value: 1 },\n window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({\n name: 'Redux store instance 2',\n actionsBlacklist: ['NOT_SHOW_1_FOR_REDUX_STORE_2', 'NOT_SHOW_2_FOR_REDUX_STORE_2'],\n predicate: (state, action) => action.type !== 'NOT_SHOW_3_FOR_REDUX_STORE_2',\n })(/* No enhancers */),\n )\n\n store1.dispatch({ type: 'TEST_PASS_FOR_REDUX_STORE_1' })\n store1.dispatch({ type: 'SHOW_FOR_REDUX_STORE_1' })\n store1.dispatch({ type: 'NOT_SHOW_FOR_REDUX_STORE_1' })\n\n store2.dispatch({ type: 'TEST_PASS_FOR_REDUX_STORE_2' })\n store2.dispatch({ type: 'NOT_SHOW_1_FOR_REDUX_STORE_2' })\n store2.dispatch({ type: 'NOT_SHOW_2_FOR_REDUX_STORE_2' })\n store2.dispatch({ type: 'NOT_SHOW_3_FOR_REDUX_STORE_2' })\n}\n"
},
{
"path": "__e2e__/fixture/remotedev.js",
"content": "import { createStore } from 'redux'\n\nconst connectViaExtension = window.devToolsExtension.connect\n\nconst logReducer = (reducer) => {\n const remotedev = connectViaExtension({\n name: 'RemoteDev store instance 1',\n actionCreators: {\n test: () => {},\n },\n })\n return (state, action) => {\n const reducedState = reducer(state, action)\n remotedev.send(action, reducedState)\n return reducedState\n }\n}\n\nconst logRemotely = (next) => (reducer, initialState) => next(logReducer(reducer), initialState)\n\nexport default function run() {\n const store = logRemotely(createStore)((state) => state, { value: 0 })\n\n store.dispatch({ type: 'TEST_PASS_FOR_REMOTEDEV_STORE_1' })\n}\n"
},
{
"path": "__e2e__/fixture/setup.js",
"content": "/* eslint-disable no-restricted-globals */\n/* eslint no-underscore-dangle: 0 */\n\nself.window = global\n\n// Remove native fetch as react-native use whatwg-fetch polyfill\nself.fetch = undefined\n\nconst MessageQueue = function MessageQueue() {}\nMessageQueue.spy = () => {}\nMessageQueue.prototype.__spy = null\n\nconst requiredModules = {\n NativeModules: {},\n Platform: {},\n setupDevtools: undefined,\n AsyncStorage: {},\n MessageQueue,\n}\n// Simulate React Native's window.require polyfill\nwindow.require = (moduleName) => {\n if (typeof moduleName !== 'number') {\n // From https://github.com/facebook/react-native/blob/5403946f098cc72c3d33ea5cee263fb3dd03891d/packager/src/Resolver/polyfills/require.js#L97\n console.warn(\n `Requiring module '${moduleName}' by name is only supported for `\n + 'debugging purposes and will BREAK IN PRODUCTION!',\n )\n }\n return requiredModules[moduleName]\n}\nwindow.__DEV__ = true\nwindow.__fbBatchedBridge = new MessageQueue()\n"
},
{
"path": "__e2e__/fixture/xhr-test.js",
"content": "import 'whatwg-fetch'\n\nexport default async function run() {\n // Fetch with forbidden header names\n await fetch('http://localhost:8099', {\n headers: {\n Origin: 'custom_origin_here',\n 'User-Agent': 'react-native',\n },\n })\n\n // It will log warning\n // because we can't use worker's FormData for upload file\n const data = { uri: 'uri' }\n const form = new FormData()\n form.append('file', data)\n}\n"
},
{
"path": "__e2e__/mockRNServer.js",
"content": "import http from 'http'\nimport WebSocket from 'ws'\n\nexport default function createMockRNServer(port = 8081) {\n const server = http.createServer((req, res) => {\n if (req.method === 'GET' && req.url === '/debugger-ui') {\n res.writeHead(200, { 'Content-Type': 'text/html' })\n res.end('')\n }\n })\n const wss = new WebSocket.Server({ server })\n server.listen(port)\n return { server, wss }\n}\n"
},
{
"path": "app/actions/debugger.js",
"content": "export const SET_DEBUGGER_LOCATION = 'SET_DEBUGGER_LOCATION'\nexport const SET_DEBUGGER_STATUS = 'SET_DEBUGGER_STATUS'\nexport const SET_DEBUGGER_WORKER = 'SET_DEBUGGER_WORKER'\nexport const SYNC_STATE = 'SYNC_STATE'\nexport const BEFORE_WINDOW_CLOSE = 'BEFORE_WINDOW_CLOSE'\n\nexport const setDebuggerLocation = (loc) => ({\n type: SET_DEBUGGER_LOCATION,\n loc,\n})\n\nexport const setDebuggerStatus = (status) => ({\n type: SET_DEBUGGER_STATUS,\n status,\n})\n\nexport const setDebuggerWorker = (worker, status) => ({\n type: SET_DEBUGGER_WORKER,\n worker,\n status,\n})\n\nexport const syncState = (payload) => ({\n type: SYNC_STATE,\n payload,\n})\n\nexport const beforeWindowClose = () => ({\n type: BEFORE_WINDOW_CLOSE,\n})\n"
},
{
"path": "app/actions/setting.js",
"content": "export const TOGGLE_DEVTOOLS = 'TOGGLE_DEVTOOLS'\nexport const RESIZE_DEVTOOLS = 'RESIZE_DEVTOOLS'\nexport const CHANGE_DEFAULT_THEME = 'CHANGE_DEFAULT_THEME'\n\nexport const toggleDevTools = (name) => ({\n type: TOGGLE_DEVTOOLS,\n name,\n})\n\nexport const resizeDevTools = (size) => ({\n type: RESIZE_DEVTOOLS,\n size,\n})\n\nexport const changeDefaultTheme = (themeName) => ({\n type: CHANGE_DEFAULT_THEME,\n themeName,\n})\n"
},
{
"path": "app/components/Draggable.js",
"content": "import React, { PureComponent } from 'react'\nimport PropTypes from 'prop-types'\n\nconst styles = {\n draggable: {\n position: 'relative',\n zIndex: 1,\n cursor: 'ns-resize',\n padding: '3px 0',\n margin: '-3px 0',\n width: '100%',\n },\n}\n\nexport default class Draggable extends PureComponent {\n onMove = (evt) => {\n evt.preventDefault()\n const { onMove } = this.props\n onMove?.(evt.pageX, evt.pageY)\n }\n\n onUp = (evt) => {\n evt.preventDefault()\n document.removeEventListener('mousemove', this.onMove)\n document.removeEventListener('mouseup', this.onUp)\n const { onStop } = this.props\n onStop?.()\n }\n\n startDragging = (evt) => {\n evt.preventDefault()\n document.addEventListener('mousemove', this.onMove)\n document.addEventListener('mouseup', this.onUp)\n const { onStart } = this.props\n onStart?.()\n }\n\n render() {\n return (\n \n )\n }\n}\n\nDraggable.propTypes = {\n onStart: PropTypes.func,\n onMove: PropTypes.func.isRequired,\n onStop: PropTypes.func,\n}\n\nDraggable.defaultProps = {\n onStart: undefined,\n onStop: undefined,\n}\n"
},
{
"path": "app/components/FormInput.js",
"content": "import React, { PureComponent } from 'react'\nimport PropTypes from 'prop-types'\n\nconst styles = {\n title: { textAlign: 'center' },\n form: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'center',\n alignItems: 'center',\n margin: 8,\n },\n input: {\n appearance: 'none',\n fontSize: '16px',\n margin: 2,\n padding: '8px',\n border: 0,\n borderRadius: 2,\n },\n button: {\n fontSize: '16px',\n margin: 2,\n padding: '8px',\n border: 0,\n borderRadius: 2,\n },\n}\n\nexport default class FormInput extends PureComponent {\n constructor(props) {\n super(props)\n this.state = { value: undefined }\n }\n\n handleOnChange = (evt) => {\n const { onInputChange } = this.props\n let { value } = evt.target\n if (onInputChange) {\n value = onInputChange(value)\n }\n this.setState({ value })\n }\n\n handleClick = (evt) => {\n const { inputProps, onSubmit } = this.props\n const { value } = this.state\n onSubmit(evt, value || inputProps.value)\n }\n\n render() {\n const { title, inputProps, button } = this.props\n const { value } = this.state\n const val = typeof value !== 'undefined' ? value : inputProps.value\n return (\n \n
{title}
\n
\n {\n // Enter/Return key pressed\n if (e.key === 'Enter') this.handleClick()\n }}\n type={inputProps.type}\n value={val}\n style={styles.input}\n onChange={this.handleOnChange}\n />\n \n
\n
\n
\n {`${shortcutPrefix}K`}\n {' to toggle Redux DevTools'}\n
\n
\n {`${shortcutPrefix}J`}\n {' to toggle React DevTools'}\n
\n
\n Number(value.replace(/\\D/g, '').substr(0, 5)) || ''}\n onSubmit={this.handlePortOnSubmit}\n />\n
\n )\n }\n\n renderReduxDevTools(size) {\n return (\n \n \n \n
\n )\n }\n\n renderReactInspector(size) {\n return (\n \n \n
\n )\n }\n\n render() {\n const { debuggerState } = this.props\n const { isPortSettingRequired } = debuggerState\n if (isPortSettingRequired) {\n return this.renderPortSetting()\n }\n const { redux, react } = this.getDevToolsSize()\n return (\n \n {this.renderReduxDevTools(redux)}\n {this.renderReactInspector(react)}\n {!react && !redux && background}\n
\n )\n }\n}\n\nApp.propTypes = {\n settingState: PropTypes.shape({\n redux: PropTypes.bool.isRequired,\n react: PropTypes.bool.isRequired,\n size: PropTypes.number.isRequired,\n themeName: PropTypes.string.isRequired,\n }).isRequired,\n settingActions: PropTypes.shape({\n toggleDevTools: PropTypes.func.isRequired,\n resizeDevTools: PropTypes.func.isRequired,\n changeDefaultTheme: PropTypes.func.isRequired,\n }).isRequired,\n debuggerState: PropTypes.shape({\n isPortSettingRequired: PropTypes.bool.isRequired,\n }).isRequired,\n debuggerActions: PropTypes.shape({\n setDebuggerLocation: PropTypes.func.isRequired,\n syncState: PropTypes.func.isRequired,\n }).isRequired,\n}\n\nexport default connect(\n (state) => ({\n debuggerState: state.debugger,\n settingState: state.setting,\n }),\n (dispatch) => ({\n debuggerActions: bindActionCreators(debuggerActionCreators, dispatch),\n settingActions: bindActionCreators(settingActionCreators, dispatch),\n }),\n)(App)\n"
},
{
"path": "app/containers/ReactInspector.js",
"content": "import { connect } from 'react-redux'\nimport React, { Component } from 'react'\nimport PropTypes from 'prop-types'\nimport { tryADBReverse } from '../utils/adb'\n\nlet ReactServer\nconst getReactInspector = () => {\n if (ReactServer) return ReactServer\n // eslint-disable-next-line\n ReactServer = ReactServer || require('react-devtools-core/standalone').default;\n\n return ReactServer\n}\nconst containerId = 'react-devtools-container'\n\nconst styles = {\n container: {\n display: 'flex',\n height: '100%',\n justifyContent: 'center',\n position: 'relative',\n },\n waiting: {\n height: '100%',\n display: 'flex',\n WebkitUserSelect: 'none',\n textAlign: 'center',\n color: '#aaa',\n justifyContent: 'center',\n alignItems: 'center',\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n },\n}\n\nconst isReactPanelOpen = (props) => props.settingState.react\n\nclass ReactInspector extends Component {\n static setProjectRoots(projectRoots) {\n getReactInspector().setProjectRoots(projectRoots)\n }\n\n listeningPort = window.reactDevToolsPort\n\n componentDidMount() {\n const { debuggerState } = this.props\n const { worker } = debuggerState\n if (worker) {\n this.server = this.startServer()\n worker.addEventListener('message', this.workerOnMessage)\n }\n }\n\n UNSAFE_componentWillReceiveProps(nextProps) {\n const { debuggerState } = this.props\n const { worker } = debuggerState\n const { worker: nextWorker } = nextProps.debuggerState\n if (nextWorker && nextWorker !== worker) {\n this.closeServerIfExists()\n if (isReactPanelOpen(this.props)) {\n this.server = this.startServer()\n }\n nextWorker.addEventListener('message', this.workerOnMessage)\n } else if (!nextWorker) {\n this.closeServerIfExists()\n }\n // Open / Close server when react panel opened / hidden\n if (!worker && !nextWorker) return\n if (isReactPanelOpen(this.props) && !isReactPanelOpen(nextProps)) {\n this.closeServerIfExists()\n } else if (!isReactPanelOpen(this.props) && isReactPanelOpen(nextProps)) {\n this.closeServerIfExists()\n this.server = this.startServer()\n }\n }\n\n shouldComponentUpdate() {\n return false\n }\n\n componentWillUnmount() {\n this.closeServerIfExists()\n }\n\n workerOnMessage = (message) => {\n const { data } = message\n if (!data || !data.__REPORT_REACT_DEVTOOLS_PORT__) return\n\n const port = Number(data.__REPORT_REACT_DEVTOOLS_PORT__)\n const { platform } = data\n if (port && port !== this.listeningPort) {\n this.listeningPort = port\n this.closeServerIfExists()\n if (isReactPanelOpen(this.props)) {\n this.server = this.startServer(port)\n }\n if (platform === 'android') tryADBReverse(port).catch(() => {})\n }\n }\n\n closeServerIfExists = () => {\n if (this.server) {\n this.server.close()\n this.server = null\n }\n }\n\n startServer(port = this.listeningPort) {\n let loggedWarn = false\n\n return getReactInspector()\n .setStatusListener((status) => {\n if (!loggedWarn && status === 'Failed to start the server.') {\n const message = port !== 8097\n ? 're-open the debugger window might be helpful.'\n : 'we recommended to upgrade React Native version to 0.39+ for random port support.'\n console.error(\n '[RNDebugger]',\n `Failed to start React DevTools server with port \\`${port}\\`,`,\n 'because another server is listening,',\n message,\n )\n loggedWarn = true\n }\n })\n .setContentDOMNode(document.getElementById(containerId))\n .startServer(port)\n }\n\n render() {\n return (\n \n
\n
Waiting for React to connectā¦
\n \n
![\"screen](\"https://user-images.githubusercontent.com/3001525/52105143-8006fe00-2628-11e9-8276-09bdeb23e3b2.png\")
\n\nTo ensure it works, you must use Apollo Client ^2.0.\n\nIf the apollo tab doesn't appear, toggle developer tools off and on again.\n\nYou can read Apollo DevTools [documentation](https://github.com/apollographql/apollo-client-devtools#apollo-client-devtools)). \n\n\n## Other documentations\n\n- [Getting Started](getting-started.md)\n- [Debugger Integration](debugger-integration.md)\n- [React DevTools Integration](react-devtools-integration.md)\n- [Redux DevTools Integration](redux-devtools-integration.md)\n- [Shortcut references](shortcut-references.md)\n- [Network inspect of Chrome Developer Tools](network-inspect-of-chrome-devtools.md)\n- [Enable open in editor in console](enable-open-in-editor-in-console.md)\n- [Config file in home directory](config-file-in-home-directory.md)\n- [Troubleshooting](troubleshooting.md)\n- [Contributing](contributing.md)\n"
},
{
"path": "docs/config-file-in-home-directory.md",
"content": "# Config file in home directory\n\nWe could configure RNDebugger app in `~/.rndebuggerrc` (the config can be opened from the main menu: Debugger ā Open Config File), the file used [json5](https://github.com/json5/json5) as format, see the following default template:\n\n\n```json5\n{\n // Font family of the debugger window\n fontFamily: 'monaco, Consolas, Lucida Console, monospace',\n\n // Zoom level of the debugger window, it will override persited zoomLevel\n zoomLevel: 0,\n\n // Settings of debugger window,\n windowBounds: {\n // Size of the debugger window, it will override persisted size\n width: 1024,\n height: 750,\n\n // Show frame for debugger window\n // but due to https://github.com/electron/electron/issues/3647\n // so we can't have custom title bar if no frame\n frame: true,\n },\n\n // Auto check update on RNDebugger startup\n autoUpdate: true,\n\n // RNDebugger will open debugger window with the ports when app launched\n defaultRNPackagerPorts: [8081],\n\n // Env for\n // open React DevTools source file link\n // and enable open in editor for console log for RNDebugger\n editor: '',\n\n // Set default react-devtools theme (default is match Chrome DevTools theme)\n // but the default theme doesn't change manually changed theme\n // see https://github.com/facebook/react-devtools/blob/master/frontend/Themes/Themes.js to get more\n defaultReactDevToolsTheme: 'RNDebugger',\n\n // Set default react-devtools port (default is \\`19567+\\` if it is not being used).\n // The devtools backend of React Native will use the port to connect to the devtools server.\n // You should use that if you have some rules for binding port.\n // (like https://github.com/jhen0409/react-native-debugger/issues/397)\n defaultReactDevToolsPort: 19567,\n\n // Enable Network Inspect by default\n // See https://github.com/jhen0409/react-native-debugger/blob/master/docs/network-inspect-of-chrome-devtools.md\n defaultNetworkInspect: false,\n\n // Refresh devtools when doing JS reload every N times. (-1 for disabled)\n // This can effectively avoid possible memory leaks (Like\n // https://github.com/jhen0409/react-native-debugger/issues/405) in devtools.\n timesJSLoadToRefreshDevTools: -1,\n}\n```\n\n## Other documentations\n\n- [Getting Started](getting-started.md)\n- [Debugger Integration](debugger-integration.md)\n- [React DevTools Integration](react-devtools-integration.md)\n- [Redux DevTools Integration](redux-devtools-integration.md)\n- [Apollo Client DevTools Integration](apollo-client-devtools-integration.md)\n- [Shortcut references](shortcut-references.md)\n- [Network inspect of Chrome Developer Tools](network-inspect-of-chrome-devtools.md)\n- [Enable open in editor in console](enable-open-in-editor-in-console.md)\n- [Troubleshooting](troubleshooting.md)\n- [Contributing](contributing.md)\n"
},
{
"path": "docs/contributing.md",
"content": "# Contributing\n\n## Development\n\n### Fork this repo & install dependencies\n\nWe're recommended use yarn because we keep the dependencies lock of yarn.\n\n```bash\n# In react-native-debugger directory\n$ yarn\n$ cd npm-package && yarn && cd ..\n```\n\nIf you want to debug the [NPM package](../npm-package), just run `npm link ` on your React Native project.\n\n### Run on development mode\n_Please ensure the `React Native Debugger` production / distribution app is closed._\n\n```bash\n$ yarn dev:webpack # Then open the another terminal tab\n$ yarn dev:electron\n```\n1. From here, you can open a react-native project with remote debugging enabled. \n1. To see the development build of the react-native-debugger, do x,y,z\n\n### Run on production mode\n\n```bash\n$ yarn build\n$ yarn start\n```\n\n### Run test\n\nRun lint and test, currently we just wrote E2E test for RNDebugger.\n\n```bash\n$ yarn test\n$ yarn test-e2e\n```\n\nYou need to closes all React Native packager (make sure `8081` or `8088` port not listening) when running the test.\n\n### Packaging app\n\n```bash\n$ yarn run pack-macos # Use --notarize to notarize app\n# On macOS: brew install fakeroot dpkg rpm\n$ yarn run pack-linux\n# On macOS: brew install wine mono\n$ yarn run pack-windows\n$ yarn run pack # all\n```\n\nIf you want to build binaries yourself, please remove [../electron/update.js](electron/update.js) (and [electon/main.js usage](electon/main.js)).\n\nFor macOS, note that if your app binary is not code signed, you will often get a firewall prompt from React DevTools server.\n\n### [Optional] Prerequisites for packaging Linux / Windows app on macOS\n\n```bash\n# Linux\nbrew install fakeroot dpkg rpm\n\n# Windows\nbrew tap homebrew/cask-versions\nbrew install wine-stable mono\n```\n\n## Financial contributions\n\nWe also welcome financial contributions in full transparency on our [open collective](https://opencollective.com/react-native-debugger).\nAnyone can file an expense. If the expense makes sense for the development of the community, it will be \"merged\" in the ledger of our open collective by the core contributors and the person who filed the expense will be reimbursed.\n\n## Credits\n\n### Contributors\n\nThank you to all the people who have already contributed to react-native-debugger!\n\n### Backers\n\nThank you to all our backers! [[Become a backer](https://opencollective.com/react-native-debugger#backer)]\n\n\n\n### Sponsors\n\nThank you to all our sponsors! (please ask your company to also support this open source project by [becoming a sponsor](https://opencollective.com/react-native-debugger#sponsor))\n\n\n\n## Other documentations\n\n- [Getting Started](getting-started.md)\n- [Debugger Integration](debugger-integration.md)\n- [React DevTools Integration](react-devtools-integration.md)\n- [Redux DevTools Integration](redux-devtools-integration.md)\n- [Apollo Client DevTools Integration](apollo-client-devtools-integration.md)\n- [Shortcut references](shortcut-references.md)\n- [Network inspect of Chrome Developer Tools](network-inspect-of-chrome-devtools.md)\n- [Enable open in editor in console](enable-open-in-editor-in-console.md)\n- [Config file in home directory](config-file-in-home-directory.md)\n- [Troubleshooting](troubleshooting.md)\n"
},
{
"path": "docs/debugger-integration.md",
"content": "# Debugger integration\n\nThe Debugger worker is referenced from [react-native](https://github.com/facebook/react-native/blob/master/local-cli/server/util/) debugger-ui, so it's only working if you're enabled `Debug JS Remotely`, you can debug your app in Chrome Developer Tools, we keep the following tabs:\n\n- `Console`\n- `Sources`\n- `Network` (Inspect Network requests if you are enabled [Network Inspect](network-inspect-of-chrome-devtools.md))\n- `Memory`\n\n## Multiple React Native packager (custom port) support\n\nWe can use [`react-native-debugger-open`](../npm-package) package to detect RN packager port, it will open an another window automatically if another debugger workers are running.\n\nIf you don't use [the npm package](../npm-package) and want to change port, click `Debugger` -> `New Window` (`Commandā + T` for macOS, `Ctrl + T` for Linux / Windows) in application menu, you need to type an another RN packager port. The default port is use [`Expo`](https://github.com/expo/expo) (and [`create-react-native-app`](https://github.com/react-community/create-react-native-app)) default port.\n\nFor macOS (10.12+), it used native tabs feature, see [the support page](https://support.apple.com/en-us/HT206998) for known how to use and setting.\n\n## Debugging tips\n\n#### Global variables in console\n\nWhen you enabled remote debugging, RNDebugger should switched context to `RNDebuggerWorker.js` automatically, so you can get global variables of React Native runtime in the console.\n\n- `$r`: You selected element on react-devtools.\n- `showAsyncStorageContentInDev()` - Log AsyncStorage content\n- `$reactNative.*` - Get react-native modules. For example, you can get `$reactNative.AsyncStorage`\n\n#### Enable `Debug Remotely` programmatically\n\nFor enable `Debug Remotely` without using dev menu, you can use the built-in `DevSettings` native module:\n\n```js\nimport { NativeModules } from 'react-native'\n\nif (__DEV__) {\n NativeModules.DevSettings.setIsDebuggingRemotely(true)\n}\n```\n\nIf you're using Expo, you can still use the method, but it probably only works with `jsEngine: jsc` in `app.json`, `jsEngine: hermes` may not works.\n\n## Other documentations\n\n- [Getting Started](getting-started.md)\n- [React DevTools Integration](react-devtools-integration.md)\n- [Redux DevTools Integration](redux-devtools-integration.md)\n- [Apollo Client DevTools Integration](apollo-client-devtools-integration.md)\n- [Shortcut references](shortcut-references.md)\n- [Network inspect of Chrome Developer Tools](network-inspect-of-chrome-devtools.md)\n- [Enable open in editor in console](enable-open-in-editor-in-console.md)\n- [Config file in home directory](config-file-in-home-directory.md)\n- [Troubleshooting](troubleshooting.md)\n- [Contributing](contributing.md)\n"
},
{
"path": "docs/enable-open-in-editor-in-console.md",
"content": "# Enable open in editor in console\n\nYou can toggle the application menu item:\n\n![\"2017-08-16](\"https://user-images.githubusercontent.com/3001525/29369913-91f2e584-8269-11e7-8ebb-10d881aa5f0a.png\")
\n\nInstead of open file in `Sources` tab, you can open file in editor by click source link in console. This feature is disabled by default.\n\n## Known issues\n\n- Currently this feature doesn't work with Haul bundler, please tracking [issue #141](https://github.com/jhen0409/react-native-debugger/issues/141).\n\n## Other documentations\n\n- [Getting Started](getting-started.md)\n- [Debugger Integration](debugger-integration.md)\n- [React DevTools Integration](react-devtools-integration.md)\n- [Redux DevTools Integration](redux-devtools-integration.md)\n- [Apollo Client DevTools Integration](apollo-client-devtools-integration.md)\n- [Shortcut references](shortcut-references.md)\n- [Network inspect of Chrome Developer Tools](network-inspect-of-chrome-devtools.md)\n- [Config file in home directory](config-file-in-home-directory.md)\n- [Troubleshooting](troubleshooting.md)\n- [Contributing](contributing.md)\n"
},
{
"path": "docs/getting-started.md",
"content": "# Getting Started\n\nJust these steps will let you start RNDebugger out of box:\n\n- Install the latest version ([download page](https://github.com/jhen0409/react-native-debugger/releases)).\n- Make sure all debugger clients of React Native are closed, usually are `http://localhost:/debugger-ui`\n- Make sure RNDebugger is open and wait state.\n- RNDebugger will try connect to debugger proxy, use port `8081` by default, you can create a new debugger window (macOS: `Command+T`, Linux/Windows: `Ctrl+T`) to specify the port if you want.\n- Enable `Debug JS Remotely` of [developer menu](https://reactnative.dev/docs/debugging#accessing-the-in-app-developer-menu) on your app\n\n## Launch by CLI or React Native packager\n\nPlatform: macOS / Linux\n\n### The `rndebugger:` URI scheme\n\nLaunch RNDebugger by typing the following command:\n\n```bash\n$ open \"rndebugger://set-debugger-loc?host=localhost&port=8081\"\n```\n\nOr `xdg-open` for Linux:\n\n```bash\n$ xdg-open \"rndebugger://set-debugger-loc?host=localhost&port=8081\"\n```\n\nThe `host` / `port` means React Native packager. You may need to set `port` if you customize the packager port. (`8081` by default)\n\nFrom [`Debugging using a custom JavaScript debugger`](https://reactnative.dev/docs/0.71/debugging#debugging-using-a-custom-javascript-debugger) of React Native docs, you can use `REACT_DEBUGGER` env on react-native packager, it will try to launch RNDebugger when you turn on `Debug JS Remotely`:\n\n```bash\n$ REACT_DEBUGGER=\"unset ELECTRON_RUN_AS_NODE && open -g 'rndebugger://set-debugger-loc?port=19000' ||\" npm start\n```\n\nYou can use `open` on macOS or `xdg-open` on Linux, currently it is not supported for Windows.\n\n### Use [`react-native-debugger-open`](../npm-package)\n\nIf you donāt need to add a dependency, you can use the package, it can help with:\n\n- Replace `open debugger-ui with Chrome` to `open React Native Debugger` in react-native packager, saving you from closing the debugger-ui page everytime it automatically opens :)\n- Detect react-native packager port then send to the app, if you launch packager with custom `--port` or use Expo, this will be very useful\n\n### What about Windows support?\n\nCurrently the `rndebugger:` URI scheme doesn't support for Windows.\n\nIn [`react-native-debugger-open`](../npm-package), it can be sent the `host` / `port` setting if RNDebugger opened, but can't automatically open if closed.\n\nIf you want to have the feature (`rndebugger:` or another way), you are welcome to contribute. Please read [contributing](https://github.com/jhen0409/react-native-debugger/blob/master/docs/contributing.md) to become a maintainer.\n\n## Use Redux DevTools Extension API\n\nUsing the same API as [`redux-devtools-extension`](https://github.com/zalmoxisus/redux-devtools-extension#1-with-redux) is very simple:\n\n```js\nconst store = createStore(\n reducer /* preloadedState, */,\n window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),\n)\n```\n\nSee [`Redux DevTools Integration`](redux-devtools-integration.md) section for more information.\n\n## Platform support\n\n- [React Native](https://github.com/facebook/react-native) >= 0.43\n- [React Native for macOS](https://github.com/ptmt/react-native-macos) (formerly react-native-desktop) >= 0.14.0\n- [React Native for Windows](https://github.com/Microsoft/react-native-windows)\n\n## Auto-update RNDebugger app (Supported v0.5.0 after)\n\nCurrently auto-update is only supported for macOS. Linux and Windows will show a dialog of new versions available for download.\n\nYou can also click `React Native Debugger` (`RND` for Linux / Windows) -> `Check for Updates...` in the application menu.\n\n## Other documentations\n\n- [Debugger Integration](debugger-integration.md)\n- [React DevTools Integration](react-devtools-integration.md)\n- [Redux DevTools Integration](redux-devtools-integration.md)\n- [Apollo Client DevTools Integration](apollo-client-devtools-integration.md)\n- [Shortcut references](shortcut-references.md)\n- [Network inspect of Chrome Developer Tools](network-inspect-of-chrome-devtools.md)\n- [Enable open in editor in console](enable-open-in-editor-in-console.md)\n- [Config file in home directory](config-file-in-home-directory.md)\n- [Troubleshooting](troubleshooting.md)\n- [Contributing](contributing.md)\n"
},
{
"path": "docs/network-inspect-of-chrome-devtools.md",
"content": "# Network Inspect of Chrome Developer Tools\n\n**_WARNING_**: You should read [the limitations](#limitations) if you want to use this feature.\n\nWhen you have Network Inspect enabled you can inspect network requests that use `XMLHttpRequest` or `fetch` on the `Network` tab of Chrome Developer Tools.\n\nYou can enable this feature by one of these ways:\n\n- [context menu or Touch Bar](shortcut-references.md) (Network Inspect will be enabled while the RNDebugger is running, after closing it will reset to the default value);\n- by the `defaultNetworkInspect` option in the [config file](config-file-in-home-directory.md) (Network Inspect will be enabled permanently).\n\n## How it works\n\nSee [the comments of `react-native/Libraries/Utilities/PolyfillFunctions#L15-L27`](https://github.com/facebook/react-native/blob/ab97b9f6021d2b31b7155970c2be0c83f7e43f04/Libraries/Utilities/PolyfillFunctions.js#L15-L27). It uses `XMLHttpRequest` from WebWorker in Chrome, basically it can manually setup by:\n\n```js\nglobal.XMLHttpRequest = global.originalXMLHttpRequest\n ? global.originalXMLHttpRequest\n : global.XMLHttpRequest;\nglobal.FormData = global.originalFormData\n ? global.originalFormData\n : global.FormData;\n\nfetch; // Ensure to get the lazy property\n\nif (window.__FETCH_SUPPORT__) {\n // it's RNDebugger only to have\n window.__FETCH_SUPPORT__.blob = false;\n} else {\n /*\n * Set __FETCH_SUPPORT__ to false is just work for `fetch`.\n * If you're using another way you can just use the native Blob and remove the `else` statement\n */\n global.Blob = global.originalBlob ? global.originalBlob : global.Blob;\n global.FileReader = global.originalFileReader\n ? global.originalFileReader\n : global.FileReader;\n}\n```\n\n> Note that replace `global.Blob` will cause issue like [#56](https://github.com/jhen0409/react-native-debugger/issues/56).\n\nThis allows you can open the `Network` tab in devtools to inspect requests of `fetch` and `XMLHttpRequest`.\n\nYou can also do this on the official remote debugger, but it has two differences:\n\n- RNDebugger is based on [Electron](https://github.com/electron/electron) so it doesn't have the CORS issue\n- We support setting [`Forbidden header names`](https://developer.mozilla.org/en-US/docs/Glossary/Forbidden_header_name), so you can use headers like `Origin` and `User-Agent`.\n\n## Limitations\n\nThere are some limitations of debugging network requests using Network Inspect:\n\n- [iOS] Requests pass `NSExceptionDomains` checks. If you forget to set a domain name, the requests will break in production. You should be clear about the difference.\n- [Android] If your network request would have caused `java.security.cert.CertPathValidatorException`, the Network Inpsect will skip that because it uses Debugger's network client.\n- React Native `FormData` supports the `uri` property. You can use files from `CameraRoll`, but `originalFormData` isn't supported.\n- It can't inspect request like `Image`s loaded from urls for `src`, so if your `Image` source has a set session, the session can't apply to `fetch` and `XMLHttpRequest`.\n\nIf you want to inspect deeper network requests (like requests made with `Image`), use tools like [Charles](https://www.charlesproxy.com) or [Flipper](https://github.com/facebook/flipper).\n\n## Other documentations\n\n- [Getting Started](getting-started.md)\n- [Debugger Integration](debugger-integration.md)\n- [React DevTools Integration](react-devtools-integration.md)\n- [Redux DevTools Integration](redux-devtools-integration.md)\n- [Apollo Client DevTools Integration](apollo-client-devtools-integration.md)\n- [Shortcut references](shortcut-references.md)\n- [Enable open in editor in console](enable-open-in-editor-in-console.md)\n- [Config file in home directory](config-file-in-home-directory.md)\n- [Troubleshooting](troubleshooting.md)\n- [Contributing](contributing.md)\n"
},
{
"path": "docs/react-devtools-integration.md",
"content": "# React DevTools Integration\n\n**_NOTE_** Supported React Native version is `>= 0.62`. Please downgrade RNDebugger version to `0.10` if you're using older versions of React Native.\n\nThe [React DevTools](https://reactnative.dev/docs/debugging#react-developer-tools) is built by [`facebook/react/packages/react-devtools-core`](https://github.com/facebook/react/tree/master/packages/react-devtools-core).\n\nIt will open a WebSocket server to waiting React Native connection. The connection is already included in React Native (see [`setUpReactDevTools.js`](https://github.com/facebook/react-native/blob/0.62-stable/Libraries/Core/setUpReactDevTools.js)), it will keep trying to connect the React DevTools server in development mode, it should work well without any specification.\n\nWe made the server listen to a random port and inject `window.__REACT_DEVTOOLS_PORT__` global variable in debugger worker.\n\nFor Android, we have the built-in `adb` util and it will reverse the port automatically.\n\n## Get `$r` global variable of React Native runtime in the console\n\nRefer to [`Debugger Integration`](debugger-integration.md#debugging-tips).\n\n## **_Question_**: I got `Unsupported` message from React DevTools\n\nIf you're using React Native version >= 0.62 and keep React Native Debugger as the latest version, here is what you can do:\n\nIn your app project, make sure the `react-devtools-core` dependency to match the React DevTools version. Add resolutions in your `package.json` for Yarn:\n\n```json\n{\n \"resolutions\": {\n \"react-devtools-core\": \"~4.28.0\"\n }\n}\n```\n\nor NPM:\n\n```json\n{\n \"overrides\": {\n \"react-devtools-core\": \"~4.28.0\"\n }\n}\n```\n\nReference: [Unsupported DevTools backend version - # React Native Debugger](https://gist.github.com/bvaughn/4bc90775530873fdf8e7ade4a039e579#react-native-debugger)\n\nIf the React Native version of your project doesn't support `react-devtools-core@4.25`, please consider downgrade React Native Debugger version to v0.12.\n\n## Other documentations\n\n- [Getting Started](getting-started.md)\n- [Debugger Integration](debugger-integration.md)\n- [Redux DevTools Integration](redux-devtools-integration.md)\n- [Apollo Client DevTools Integration](apollo-client-devtools-integration.md)\n- [Shortcut references](shortcut-references.md)\n- [Network inspect of Chrome Developer Tools](network-inspect-of-chrome-devtools.md)\n- [Enable open in editor in console](enable-open-in-editor-in-console.md)\n- [Config file in home directory](config-file-in-home-directory.md)\n- [Troubleshooting](troubleshooting.md)\n- [Contributing](contributing.md)\n"
},
{
"path": "docs/redux-devtools-integration.md",
"content": "# Redux DevTools Integration\n\nWe used [@redux-devtools/app](https://github.com/reduxjs/redux-devtools/tree/main/packages/redux-devtools-app) and made the API same with [Redux DevTools Extension](https://github.com/reduxjs/redux-devtools/tree/main/extension).\n\nIf you've enabled `Debug JS remotely` with React Native Debugger, the following API is already included in global:\n\n- `window.__REDUX_DEVTOOLS_EXTENSION__`\n- `window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__`\n- `window.__REDUX_DEVTOOLS_EXTENSION__.connect`\n- You can just use [`redux-devtools-extension`](https://www.npmjs.com/package/redux-devtools-extension) npm package.\n\nSee also:\n\n- [Redux DevTools main repository]](https://github.com/reduxjs/redux-devtools/blob/main/README.md)\n- [API Reference](https://github.com/reduxjs/redux-devtools/tree/main/extension/docs/API)\n- [Troubleshooting](https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/Troubleshooting.md)\n- Other Integrations\n - [`mobx-state-tree`](https://github.com/mobxjs/mobx-state-tree) - Use [`connectReduxDevtools`](https://github.com/mobxjs/mobx-state-tree/tree/3fc79b0b3ce7ad3e26d6bd5745fd9412d35c431c/packages/mst-middlewares#connectreduxdevtools) middleware.\n\nYou can ignore the things specified by the browser extension.\n\n## About `trace` feature\n\n- The debugger app might be slowed down if you enabled the `trace` feature and visited the `Trace` tab, because it will load and parse the source map for every selected action.\n\n## Other documentations\n\n- [Getting Started](getting-started.md)\n- [Debugger Integration](debugger-integration.md)\n- [React DevTools Integration](react-devtools-integration.md)\n- [Apollo Client DevTools Integration](apollo-client-devtools-integration.md)\n- [Shortcut references](shortcut-references.md)\n- [Network inspect of Chrome Developer Tools](network-inspect-of-chrome-devtools.md)\n- [Enable open in editor in console](enable-open-in-editor-in-console.md)\n- [Config file in home directory](config-file-in-home-directory.md)\n- [Troubleshooting](troubleshooting.md)\n- [Contributing](contributing.md)\n"
},
{
"path": "docs/shortcut-references.md",
"content": "# Shortcut references\n\nThis section will explain about the following items in RNDebugger.\n\n- [Content menu](#context-menu)\n- [Touch Bar](#touch-bar-in-macos)\n- [Keyboard shortcuts](#keyboard-shortcuts)\n\n## Context menu\n\nWe have context menu (right-click) for provides useful features:\n\n\n\n- Reload\n- Toggle Elements Inspector\n- Show Developer Menu [iOS only]\n- Enable / Disable [Network Inspect](debugger-integration.md#how-network-inspect-works)\n- Log AsyncStorage content\n- Clear AsyncStorage\n\nIt includes the developer menu features, these would be useful for real device, instead of open developer menu in device manually.\n\n## Keyboard shortcuts\n\n- Reload JS (macOS: `Command+R`, Windows / Linux: `Ctrl+R`)\n- Toggle Elements Inspector (macOS: `Command+I`, Windows / Linux: `Ctrl+I`)\n- New Debugger Window (macOS: `Command+T`, Windows / Linux: `Ctrl+T`)\n- Toggle Developer Tools (macOS: `Command+Option+I`, Windows / Linux: `Ctrl+Alt+I`)\n- Toggle Redux DevTools (macOS: `Command+Option+J`, Windows / Linux: `Ctrl+Alt+J`)\n- Toggle React DevTools (macOS: `Command+Option+K`, Windows / Linux: `Ctrl+Alt+K`)\n- Quickly into search field of React DevTools (Type `/`)\n\nYou can also read [Keyboard Shortcuts Reference of Chrome Developer Tools](https://developers.google.com/web/tools/chrome-devtools/shortcuts).\n\n## Touch Bar in macOS\n\n![\"touch-bar\"](\"https://user-images.githubusercontent.com/3001525/27730359-8565810a-5dbb-11e7-9052-9fd4feb72181.png\")
\n\nThe `Redux Slider` will shown on right if you're using [`Redux API`](redux-devtools-integration.md),\n\nIf your Mac haven't TouchBar support and you still want to use the feature, you can use [TouchƩ](https://redsweater.com/touche/).\n\n## Other documentations\n\n- [Getting Started](getting-started.md)\n- [Debugger Integration](debugger-integration.md)\n- [React DevTools Integration](react-devtools-integration.md)\n- [Redux DevTools Integration](redux-devtools-integration.md)\n- [Apollo Client DevTools Integration](apollo-client-devtools-integration.md)\n- [Network inspect of Chrome Developer Tools](network-inspect-of-chrome-devtools.md)\n- [Enable open in editor in console](enable-open-in-editor-in-console.md)\n- [Config file in home directory](config-file-in-home-directory.md)\n- [Troubleshooting](troubleshooting.md)\n- [Contributing](contributing.md)\n"
},
{
"path": "docs/troubleshooting.md",
"content": "# Troubleshooting\n\n## I got `Unsupported` meesage from React DevTools\n\nIf you're using React Native version >= 0.62 and keep React Native Debugger as the latest version, here is what you can do:\n\nIn your app project, make sure the `react-devtools-core` dependency to match the React DevTools version. Add resolutions in your `package.json` for Yarn:\n\n```json\n{\n \"resolutions\": {\n \"react-devtools-core\": \"~4.28.0\"\n }\n}\n```\n\nor NPM:\n\n```json\n{\n \"overrides\": {\n \"react-devtools-core\": \"~4.28.0\"\n }\n}\n```\n\nReference: [Unsupported DevTools backend version - # React Native Debugger](https://gist.github.com/bvaughn/4bc90775530873fdf8e7ade4a039e579#react-native-debugger)\n\nIf the React Native version of your project doesn't support `react-devtools-core@4.25`, please consider downgrade React Native Debugger version to v0.12.\n\n## Network fetch got issue like [`SyntaxError: Unexpected token o in JSON at position 1`](https://github.com/jhen0409/react-native-debugger/issues/382#issuecomment-544226529) if Network Inspect enabled\n\nThis may be caused by some library used / made fetch polyfills, it may used `Blob` but RNDebugger does not support it. If you got this issue, try to use global `fetch` / `XMLHttpRequest` instead, or try [#382#issuecomment-544226529](https://github.com/jhen0409/react-native-debugger/issues/382#issuecomment-544226529).\n\n## Debugger causes app to load stale JS bundle ([#423](https://github.com/jhen0409/react-native-debugger/issues/423))\n\nThis issue was fixed by [v0.10.9](https://github.com/jhen0409/react-native-debugger/releases/tag/v0.10.9) and [v0.11.1](https://github.com/jhen0409/react-native-debugger/releases/tag/v0.11.1). If you are still using the old version for some reason, you can turn off Network cache manually on devtools:\n\n\n\n## Some shortcuts (e.g. `Reload` / `Clear AsyncStorage`) are missing on the Debugger\n\n- For Android and React Native version less than v0.60, you need to add and link [`react-native-devsettings-android`](https://github.com/jhen0409/react-native-devsettings-android) package\n- If you're not using dev bundle (dev=true) from React Native packager, it will not working as expected.\n- For some reasons, some dependencies may affected [Promise](https://github.com/jhen0409/react-native-debugger/blob/master/app/worker/utils.js#L7) behavior. It is recommended to use the initial project to find out the reason.\n- If you are sure it is caused by a new version of React Native, please file an new issue.\n\n## How to resolve problem of high memory usage on devtools?\n\nYou may have got a problem when you often reload JS, devtools process takes your RAM even more than 1G, it does not seem to clean.\n\nIn case of using [official remote debugger](https://reactnative.dev/docs/debugging#chrome-developer-tools), tested a initial project with remote debugging mode on Chrome 62 (beta), continuous reload JS 30 times:\n\nBefore: \n![\"2017-09-19](\"https://user-images.githubusercontent.com/3001525/30585922-ed1e557a-9cf3-11e7-9730-3b941618924f.png\")
\n\nAfter: \n![\"2017-09-19](\"https://user-images.githubusercontent.com/3001525/30585923-ed1e3a54-9cf3-11e7-8d09-9915f8cffea6.png\")
\n\nFortunately, the current versions of RNDebugger (Chromium 58) is better than Chrome (maybe >= 59?), but it still has a amount of growth:\n\nBefore: \n![\"2017-09-19](\"https://user-images.githubusercontent.com/3001525/30586300-27e0df7e-9cf5-11e7-9614-07162e86680c.png\")
\n\nAfter: \n![\"2017-09-19](\"https://user-images.githubusercontent.com/3001525/30586302-29e0b268-9cf5-11e7-9206-e222bd753aa1.png\")
\n\nTo avoid similar problems in the future, there is a way to restart the Chrome devtools (macOS: `CMD+OPTION+I`, Linux/Windows: `CTRL+ALT+I`), the same applies to official remote debugger on Chrome. You can also consider to use [`timesJSLoadToRefreshDevTools` option in Config file in home directory](config-file-in-home-directory.md).\n\n## [iOS] Debugger can't load bundle when I use real device\n\nIf you're getting the following error:\n\n\n\nIt may caused by [`xip.io`](http://xip.io) service (RN use it for debug on real device), it lead your machine IP doesn't resolved sometimes. It's [enabled by default](https://github.com/facebook/react-native/blob/ca9202f2385354b7a6b4d818ceb46bd96a037a7b/scripts/react-native-xcode.sh#L94), you can disable it in RN custom script on Xcode if you sure you don't need the service:\n\n![\"2017-07-31](\"https://user-images.githubusercontent.com/3001525/28763831-82811012-75f3-11e7-9675-d5ae515f4f38.png\")
\n\n## React Inspector get stuck at \"Connecting to Reactā¦\" for RN ^0.43 ([#45](https://github.com/jhen0409/react-native-debugger/issues/45))\n\nIt usually on Android, the problem is related to `requestIdleCallback` API (try to check if it not work on debug mode).\n\nThis issue have been fixed in `react-devtools-core@^2.3.0`, please ensure the version is correct in your React Native project (Note that it's dependency of `react-native`).\n\nAlso, sometimes it have timer problem between host machine and device (emulator), you need make sure `date & time` setting is correct:\n\n![\"2017-07-18](\"https://user-images.githubusercontent.com/3001525/28492059-3c6957ea-6f2e-11e7-8901-8f4431f67a71.png\")
\n\nOr try to restart your device (emulator).\n\n## [Windows 10] React native debugger process starts but no visible window ([#459](https://github.com/jhen0409/react-native-debugger/issues/459))\n\nThis issue is caused by Windows 10 dark mode, for a workaround please disable dark mode and enable it again after launching react-native-debugger\n\n## Other documentations\n\n- [Getting Started](getting-started.md)\n- [Debugger Integration](debugger-integration.md)\n- [React DevTools Integration](react-devtools-integration.md)\n- [Redux DevTools Integration](redux-devtools-integration.md)\n- [Apollo Client DevTools Integration](apollo-client-devtools-integration.md)\n- [Shortcut references](shortcut-references.md)\n- [Network inspect of Chrome Developer Tools](network-inspect-of-chrome-devtools.md)\n- [Enable open in editor in console](enable-open-in-editor-in-console.md)\n- [Config file in home directory](config-file-in-home-directory.md)\n- [Contributing](contributing.md)\n"
},
{
"path": "electron/app.html",
"content": "\n\n \n \n React Native Debugger\n \n \n \n \n \n \n\n"
},
{
"path": "electron/config/__tests__/__snapshots__/index.test.js.snap",
"content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`openConfigFile 1`] = `\n{\n \"config\": {\n \"autoUpdate\": true,\n \"defaultNetworkInspect\": false,\n \"defaultRNPackagerPorts\": [\n 8081,\n ],\n \"defaultReactDevToolsPort\": 19567,\n \"defaultReactDevToolsTheme\": \"RNDebugger\",\n \"editor\": \"\",\n \"timesJSLoadToRefreshDevTools\": -1,\n \"windowBounds\": {\n \"frame\": true,\n },\n },\n}\n`;\n\nexports[`readConfig 1`] = `\n{\n \"config\": {\n \"autoUpdate\": true,\n \"defaultNetworkInspect\": false,\n \"defaultRNPackagerPorts\": [\n 8081,\n ],\n \"defaultReactDevToolsPort\": 19567,\n \"defaultReactDevToolsTheme\": \"RNDebugger\",\n \"editor\": \"\",\n \"timesJSLoadToRefreshDevTools\": -1,\n \"windowBounds\": {\n \"frame\": true,\n },\n },\n}\n`;\n\nexports[`readConfig 2`] = `\n{\n \"config\": {\n \"autoUpdate\": false,\n },\n}\n`;\n\nexports[`readConfig 3`] = `\n{\n \"config\": {\n \"autoUpdate\": true,\n \"defaultNetworkInspect\": false,\n \"defaultRNPackagerPorts\": [\n 8081,\n ],\n \"defaultReactDevToolsPort\": 19567,\n \"defaultReactDevToolsTheme\": \"RNDebugger\",\n \"editor\": \"\",\n \"timesJSLoadToRefreshDevTools\": -1,\n \"windowBounds\": {\n \"frame\": true,\n },\n },\n \"error\": [SyntaxError: Unexpected 'i' at line 1 column 16 of the JSON5 data. Still to read: \"is_broken, }\"],\n \"isConfigBroken\": true,\n}\n`;\n"
},
{
"path": "electron/config/__tests__/index.test.js",
"content": "import fs from 'fs'\nimport path from 'path'\n\njest.mock('electron', () => ({\n shell: {\n openPath: jest.fn(),\n },\n}))\n\nconst testFile = path.join(__dirname, 'config_test')\n\nbeforeAll(() => fs.existsSync(testFile) && fs.unlinkSync(testFile))\n\n/* eslint-disable global-require */\ntest('readConfig', () => {\n const { readConfig } = require('..')\n\n expect(readConfig(testFile)).toMatchSnapshot()\n\n // User custom config\n fs.writeFileSync(testFile, '{ autoUpdate: false, }')\n expect(readConfig(testFile)).toMatchSnapshot()\n\n // Broken config\n fs.writeFileSync(testFile, '{ autoUpdate: is_broken, }')\n expect(readConfig(testFile)).toMatchSnapshot()\n})\n\ntest('openConfigFile', () => {\n const { readConfig, openConfigFile } = require('..')\n const { shell } = require('electron')\n\n openConfigFile(testFile)\n expect(shell.openPath).toBeCalledWith(testFile)\n shell.openPath.mockClear()\n\n fs.unlinkSync(testFile)\n openConfigFile(testFile)\n expect(readConfig(testFile)).toMatchSnapshot()\n})\n"
},
{
"path": "electron/config/index.js",
"content": "import fs from 'fs'\nimport path from 'path'\nimport json5 from 'json5'\nimport { shell } from 'electron'\nimport template from './template'\n\nexport const filePath = path.join(\n process.env[process.platform === 'win32' ? 'USERPROFILE' : 'HOME'],\n '.rndebuggerrc',\n)\n\nexport const readConfig = (configFile = filePath) => {\n if (!fs.existsSync(configFile)) {\n // Create a new one\n fs.writeFileSync(configFile, template)\n return { config: json5.parse(template) }\n }\n try {\n // eslint-disable-next-line\n return { config: json5.parse(fs.readFileSync(configFile, 'utf-8')) };\n } catch (error) {\n // Alert parse config not successful\n return { config: json5.parse(template), isConfigBroken: true, error }\n }\n}\n\nexport const openConfigFile = (configFile = filePath) => {\n readConfig()\n shell.openPath(configFile)\n}\n"
},
{
"path": "electron/config/template.js",
"content": "// json5\nmodule.exports = `{\n // Font family of the debugger window\n // fontFamily: 'monaco, Consolas, Lucida Console, monospace',\n\n // Zoom level of the debugger window, it will override persited zoomLevel\n // zoomLevel: 0,\n\n // Settings of debugger window, \n windowBounds: {\n // Size of the debugger window, it will override persisted size\n // width: 1024,\n // height: 750,\n\n // Show frame for debugger window\n // but due to https://github.com/electron/electron/issues/3647\n // so we can't have custom title bar if no frame\n // titleBarStyle: 'hidden',\n frame: true,\n },\n\n // Auto check update on RNDebugger startup\n autoUpdate: true,\n\n // RNDebugger will open debugger window with the ports when app launched\n defaultRNPackagerPorts: [8081],\n\n // Env for\n // open React DevTools source file link\n // and enable open in editor for console log for RNDebugger\n editor: '',\n\n // Set default react-devtools theme (default is match Chrome DevTools theme)\n // but the default theme doesn't change manually changed theme\n // see https://github.com/facebook/react-devtools/blob/master/frontend/Themes/Themes.js to get more\n defaultReactDevToolsTheme: 'RNDebugger',\n\n // Set default react-devtools port (default is \\`19567+\\` if it is not being used).\n // The devtools backend of React Native will use the port to connect to the devtools server.\n // You should use that if you have some rules for binding port.\n // (like https://github.com/jhen0409/react-native-debugger/issues/397)\n defaultReactDevToolsPort: 19567,\n\n // Enable Network Inspect by default\n // See https://github.com/jhen0409/react-native-debugger/blob/master/docs/network-inspect-of-chrome-devtools.md\n defaultNetworkInspect: false,\n\n // Refresh devtools when doing JS reload every N times. (-1 for disabled)\n // This can effectively avoid possible memory leaks (Like\n // https://github.com/jhen0409/react-native-debugger/issues/405) in devtools.\n timesJSLoadToRefreshDevTools: -1,\n}\n`\n"
},
{
"path": "electron/context-menu.js",
"content": "import { ipcMain } from 'electron'\nimport contextMenu from 'electron-context-menu'\nimport { readConfig } from './config'\nimport {\n toggleDevTools, n, item, separator,\n} from './menu/common'\n\nconst invokeDevMethod = (win, name) => win.webContents.executeJavaScript(\n `window.invokeDevMethod && window.invokeDevMethod('${name}')`,\n)\n\nexport const registerContextMenu = (win) => {\n const { config } = readConfig()\n const defaultContextMenuItems = [\n item('Toggle Developer Tools', n, () => toggleDevTools(win, 'chrome')),\n item('Toggle React DevTools', n, () => toggleDevTools(win, 'react')),\n item('Toggle Redux DevTools', n, () => toggleDevTools(win, 'redux')),\n ]\n let networkInspectEnabled = !!config.networkInspect\n let availableMethods = []\n contextMenu({\n window: win,\n showInspectElement: process.env.NODE_ENV === 'development',\n prepend: () => [\n availableMethods.includes('reload')\n && item('Reload JS', n, () => invokeDevMethod(win, 'reload')),\n availableMethods.includes('toggleElementInspector')\n && item('Toggle Element Inspector', n, () => invokeDevMethod(win, 'toggleElementInspector')),\n availableMethods.includes('show')\n && item('Show Developer Menu', n, () => invokeDevMethod(win, 'show')),\n item(\n networkInspectEnabled\n ? 'Disable Network Inspect'\n : 'Enable Network Inspect',\n n,\n () => invokeDevMethod(win, 'networkInspect'),\n ),\n availableMethods.includes('showAsyncStorage')\n && item('Log AsyncStorage content', n, () => invokeDevMethod(win, 'showAsyncStorage')),\n availableMethods.includes('clearAsyncStorage')\n && item('Clear AsyncStorage', n, () => invokeDevMethod(win, 'clearAsyncStorage')),\n separator,\n ]\n .filter((menuItem) => !!menuItem)\n .concat(defaultContextMenuItems),\n })\n\n const listener = (event, data) => {\n availableMethods = data.availableMethods || availableMethods\n networkInspectEnabled = typeof data.networkInspectEnabled === 'boolean'\n ? data.networkInspectEnabled\n : networkInspectEnabled\n }\n\n ipcMain.on(`context-menu-available-methods-update-${win.id}`, listener)\n return () => {\n ipcMain.off(`context-menu-available-methods-update-${win.id}`, listener)\n }\n}\n"
},
{
"path": "electron/debug.js",
"content": "require('electron-debug')(); // eslint-disable-line\n"
},
{
"path": "electron/devtools.js",
"content": "export const getCatchConsoleLogScript = (port) => `\n window.__RN_PACKAGER_MATCHER__ = /^http:\\\\/\\\\/[^:]+:${port}/;\n if (!window.__INJECT_OPEN_IN_EDITOR_SCRIPT__) {\n const rndHelperQuery = 'iframe[data-devtools-extension=\"RNDebugger devtools helper\"]';\n document.addEventListener('click', event => {\n if (!window.__IS_OPEN_IN_EDITOR_ENABLED__) {\n return;\n }\n const { target } = event;\n if (target.className === 'devtools-link') {\n const source = target.title;\n if (source && source.match(window.__RN_PACKAGER_MATCHER__)) {\n const rndHelper = document.querySelector(rndHelperQuery);\n if (rndHelper && rndHelper.contentWindow) {\n rndHelper.contentWindow.postMessage(\n {\n type: 'open-in-editor',\n source: source.replace(window.__RN_PACKAGER_MATCHER__, '')\n },\n '*'\n );\n return event.stopPropagation();\n }\n }\n }\n }, true);\n window.__INJECT_OPEN_IN_EDITOR_SCRIPT__ = true;\n }\n`\n\nexport const catchConsoleLogLink = (win, host = 'localhost', port = 8081) => {\n if (win.devToolsWebContents) {\n return win.devToolsWebContents.executeJavaScript(`(() => {\n ${getCatchConsoleLogScript(host, port)}\n })()`)\n }\n}\n\nexport const removeUnecessaryTabs = (win) => {\n if (\n process.env.NODE_ENV === 'production'\n && !process.env.DEBUG_RNDEBUGGER\n && win.devToolsWebContents\n ) {\n return win.devToolsWebContents.executeJavaScript(`(() => {\n const tabbedPane = UI.inspectorView.tabbedPane;\n if (tabbedPane) {\n tabbedPane.closeTab('elements');\n tabbedPane.closeTab('security');\n tabbedPane.closeTab('audits');\n tabbedPane.closeTab('audits2');\n tabbedPane.closeTab('lighthouse');\n\n tabbedPane.leftToolbar().element.remove();\n }\n })()`)\n }\n}\n\nexport const activeTabs = (win) => {\n if (win.devToolsWebContents) {\n // Active network tab so we can do clearNetworkLogs\n return win.devToolsWebContents.executeJavaScript(`(() => {\n DevToolsAPI.showPanel('network');\n DevToolsAPI.showPanel('console');\n })()`)\n }\n}\n"
},
{
"path": "electron/extensions.js",
"content": "import path from 'path'\nimport { session } from 'electron'\n\nexport default async () => {\n if (process.env.NODE_ENV === 'development') {\n await session.defaultSession.loadExtension(\n path.resolve('dist/devtools-helper/'),\n { allowFileAccess: true },\n )\n await session.defaultSession.loadExtension(\n path.join(\n __dirname,\n '../node_modules/apollo-client-devtools/build',\n ),\n { allowFileAccess: true },\n )\n } else if (process.env.PACKAGE === 'no') {\n await session.defaultSession.loadExtension(\n path.join(__dirname, 'devtools-helper/'),\n { allowFileAccess: true },\n )\n await session.defaultSession.loadExtension(\n path.join(\n __dirname,\n 'node_modules/apollo-client-devtools/build',\n ),\n { allowFileAccess: true },\n )\n } else {\n await session.defaultSession.loadExtension(\n path.join(__dirname, '../devtools-helper/'),\n { allowFileAccess: true },\n )\n await session.defaultSession.loadExtension(\n path.join(\n __dirname,\n '../ac-devtools-ext-build/', // See package script for why\n ),\n { allowFileAccess: true },\n )\n }\n}\n"
},
{
"path": "electron/main.js",
"content": "import path from 'path'\nimport {\n app, ipcMain, session, BrowserWindow, Menu,\n} from 'electron'\nimport { initialize } from '@electron/remote/main'\nimport normalizeHeaderCase from 'header-case-normalizer'\nimport installExtensions from './extensions'\nimport { checkWindowInfo, createWindow } from './window'\nimport { startListeningHandleURL, handleURL, parseUrl } from './url-handle'\nimport { createMenuTemplate } from './menu'\nimport { readConfig } from './config'\nimport { sendSyncState } from './sync-state'\n\ninitialize()\n\n// Uncomment if want to debug devtools backend\n// app.commandLine.appendSwitch('remote-debugging-port', '9222');\n\napp.commandLine.appendSwitch('disable-http-cache')\n\nprocess.env.ELECTRON_DISABLE_SECURITY_WARNINGS = 1\n\nconst iconPath = path.resolve(__dirname, 'logo.png')\nconst defaultOptions = { iconPath }\n\nconst findWindow = async (_, port) => {\n const browserWindows = BrowserWindow.getAllWindows()\n const browserWindow = await browserWindows.reduce(async (promise, win) => {\n const acc = await promise\n if (acc) return acc\n\n const { isWorkerRunning, isPortSettingRequired, location } = await checkWindowInfo(win)\n return (!isWorkerRunning || location.port === port)\n && !isPortSettingRequired\n ? win\n : null\n }, Promise.resolve(null))\n if (!browserWindow) createWindow(defaultOptions)\n if (browserWindow) {\n if (browserWindow.isMinimized()) browserWindow.restore()\n browserWindow.focus()\n }\n return browserWindow\n}\n\nconst handleCommandLine = async (commandLine) => {\n const url = commandLine.find((arg) => arg.startsWith('rndebugger://'))\n if (!url) {\n return\n }\n await handleURL(findWindow, url)\n}\n\nif (process.platform === 'linux') {\n const singleInstanceLock = app.requestSingleInstanceLock()\n if (!singleInstanceLock) {\n process.exit()\n } else {\n app.on('second-instance', async (event, commandLine) => {\n await handleCommandLine(commandLine)\n })\n }\n}\n\nstartListeningHandleURL(findWindow)\n\nipcMain.on('check-port-available', async (event, arg) => {\n const port = Number(arg)\n const windows = BrowserWindow.getAllWindows()\n const isPortAvailable = await windows.reduce(async (promise, win) => {\n const isAvailable = await promise\n if (!isAvailable) return false\n\n if (win.webContents !== event.sender) {\n const { isPortSettingRequired, location } = await checkWindowInfo(win)\n if (location.port === port && !isPortSettingRequired) {\n return false\n }\n }\n return true\n }, Promise.resolve(true))\n event.sender.send('check-port-available-reply', isPortAvailable)\n})\n\nipcMain.on('sync-state', sendSyncState)\n\napp.on('activate', () => {\n if (BrowserWindow.getAllWindows().length !== 0) return\n createWindow(defaultOptions)\n})\n\napp.on('new-window-for-tab', () => {\n createWindow({ ...defaultOptions, isPortSettingRequired: true })\n})\n\napp.on('window-all-closed', () => {\n if (process.platform !== 'darwin') {\n app.quit()\n }\n})\n\nif (process.platform === 'darwin') {\n app.on('before-quit', async (event) => {\n event.preventDefault()\n BrowserWindow.getAllWindows().forEach((win) => {\n win.removeAllListeners('close')\n win.close()\n })\n process.exit()\n })\n}\n\napp.on('ready', async () => {\n await installExtensions()\n\n const { config } = readConfig()\n\n let { defaultRNPackagerPorts } = config\n if (!Array.isArray(defaultRNPackagerPorts)) {\n defaultRNPackagerPorts = [8081]\n }\n\n if (process.platform === 'linux') {\n const url = process.argv.find((arg) => arg.startsWith('rndebugger://'))\n const query = url ? parseUrl(url) : undefined\n if (query && query.port) {\n defaultRNPackagerPorts = [query.port]\n }\n }\n\n defaultRNPackagerPorts.forEach((port) => {\n createWindow({ port, ...defaultOptions })\n })\n\n const menuTemplate = createMenuTemplate(defaultOptions)\n const menu = Menu.buildFromTemplate(menuTemplate)\n Menu.setApplicationMenu(menu)\n\n const replaceHeaderPrefix = '__RN_DEBUGGER_SET_HEADER_REQUEST_'\n session.defaultSession.webRequest.onBeforeSendHeaders((details, callback) => {\n delete details.requestHeaders.Origin\n Object.entries(details.requestHeaders).forEach(([header, value]) => {\n if (header.startsWith(replaceHeaderPrefix)) {\n const originalHeader = normalizeHeaderCase(\n header.replace(replaceHeaderPrefix, ''),\n )\n details.requestHeaders[originalHeader] = value\n delete details.requestHeaders[header]\n }\n })\n callback({ cancel: false, requestHeaders: details.requestHeaders })\n })\n})\n\n// Pass all certificate errors in favor of Network Inspect feature\napp.on(\n 'certificate-error',\n (event, webContents, url, error, certificate, callback) => {\n event.preventDefault()\n callback(true)\n },\n)\n"
},
{
"path": "electron/menu/common.js",
"content": "export const toggleDevTools = (win, type) => {\n if (!win || !type) return\n if (type === 'chrome') {\n win.toggleDevTools()\n return\n }\n win.webContents.send('toggle-devtools', type)\n}\n\nexport const toggleFullscreen = (win) => win && win.setFullScreen(!win.isFullScreen())\nexport const setAlwaysOnTop = (win, checked) => win && win.setAlwaysOnTop(checked)\nexport const reload = (win) => win && win.webContents.reload()\nexport const close = (win) => win && win.close()\nexport const zoom = (win, val) => {\n if (!win) return\n const contents = win.webContents\n contents.zoomLevel += val\n}\nexport const resetZoom = (win) => {\n if (win) {\n win.webContents.zoomLevel = 0\n }\n}\nexport const toggleOpenInEditor = (win) => win && win.webContents.executeJavaScript('window.toggleOpenInEditor()')\n\nexport const menu = (label, submenu, role) => ({ label, submenu, role })\nexport const item = (label, accelerator, click, rest) => ({\n label,\n accelerator,\n click,\n ...rest,\n})\nexport const separator = { type: 'separator' }\nexport const n = undefined\n"
},
{
"path": "electron/menu/darwin.js",
"content": "import { app, shell, BrowserWindow } from 'electron'\nimport { createWindow } from '../window'\nimport checkUpdate from '../update'\nimport {\n menu,\n item,\n separator,\n n,\n toggleDevTools,\n toggleFullscreen,\n setAlwaysOnTop,\n reload,\n zoom,\n resetZoom,\n toggleOpenInEditor,\n} from './common'\nimport { haveOpenedWindow, showAboutDialog } from './dialog'\nimport { openConfigFile } from '../config'\nimport { isSyncState, toggleSyncState } from '../sync-state'\n\nconst getWin = () => BrowserWindow.getFocusedWindow()\n\nconst viewItems = process.env.NODE_ENV === 'developemnt'\n ? [item('Reload Window', 'Alt+Command+R', () => reload(getWin()))]\n : []\n\nexport default ({ iconPath }) => [\n menu('React Native Debugger', [\n item('About', n, () => showAboutDialog(iconPath)),\n item('Check for Updates...', n, () => checkUpdate(iconPath, true)),\n separator,\n item('Hide', 'Command+H', n, { selector: 'hide:' }),\n item('Hide Others', 'Command+Shift+H', n, { selector: 'hideOtherApplications:' }),\n item('Show All', n, n, { selector: 'unhideAllApplications:' }),\n separator,\n item('Quit', 'Command+Q', () => app.quit()),\n ]),\n menu(\n 'Debugger',\n [\n item('New Window', 'Command+T', () => createWindow({ iconPath, isPortSettingRequired: haveOpenedWindow() })),\n item('Enable Open in Editor for Console Log', n, () => toggleOpenInEditor(getWin()), {\n type: 'checkbox',\n checked: false,\n }),\n item('Toggle Device Sync', n, toggleSyncState, {\n type: 'checkbox',\n checked: isSyncState(),\n }),\n item('Open Config File', n, () => openConfigFile()),\n separator,\n item('Minimize', 'Command+M', n, { selector: 'performMiniaturize:' }),\n item('Close', 'Command+W', n, { selector: 'performClose:' }),\n separator,\n item('Bring All to Front', n, n, { selector: 'arrangeInFront:' }),\n item('Stay in Front', n, ({ checked }) => setAlwaysOnTop(getWin(), checked), {\n type: 'checkbox',\n checked: false,\n }),\n ],\n 'window',\n ),\n menu('Edit', [\n item('Undo', 'Command+Z', n, { selector: 'undo:' }),\n item('Redo', 'Shift+Command+Z', n, { selector: 'redo:' }),\n separator,\n item('Cut', 'Command+X', n, { selector: 'cut:' }),\n item('Copy', 'Command+C', n, { selector: 'copy:' }),\n item('Paste', 'Command+V', n, { selector: 'paste:' }),\n item('Select All', 'Command+A', n, { selector: 'selectAll:' }),\n ]),\n menu(\n 'View',\n viewItems.concat([\n item('Toggle Full Screen', 'F11', () => toggleFullscreen(getWin())),\n item('Toggle Developer Tools', 'Alt+Command+I', () => toggleDevTools(getWin(), 'chrome')),\n item('Toggle React DevTools', 'Alt+Command+J', () => toggleDevTools(getWin(), 'react')),\n item('Toggle Redux DevTools', 'Alt+Command+K', () => toggleDevTools(getWin(), 'redux')),\n separator,\n item('Zoom In', 'Command+=', () => zoom(getWin(), 1)),\n item('Zoom Out', 'Command+-', () => zoom(getWin(), -1)),\n item('Reset Zoom', 'Command+0', () => resetZoom(getWin())),\n ]),\n ),\n menu('Help', [\n item('Documentation', n, () => shell.openExternal('https://github.com/jhen0409/react-native-debugger/tree/master/docs')),\n item('Issues', n, () => shell.openExternal('https://github.com/jhen0409/react-native-debugger/issues')),\n item('Open Collective', n, () => shell.openExternal('https://opencollective.com/react-native-debugger')),\n ]),\n]\n"
},
{
"path": "electron/menu/dialog.js",
"content": "import { app, dialog, BrowserWindow } from 'electron'\nimport multiline from 'multiline-template'\n\nconst appName = app.name\nconst detail = multiline`\n | Created by Jhen-Jie Hong\n | (https://github.com/jhen0409)\n\n | This software includes the following projects:\n\n | https://github.com/facebook/react-devtools\n | https://github.com/reduxjs/redux-devtools\n | https://github.com/apollographql/apollo-client-devtools\n`\n\nexport const showAboutDialog = (iconPath) => dialog.showMessageBoxSync({\n title: 'About',\n message: `${appName} ${app.getVersion()}`,\n detail,\n icon: iconPath,\n buttons: [],\n})\n\nexport const haveOpenedWindow = () => !!BrowserWindow.getAllWindows().length\n"
},
{
"path": "electron/menu/index.js",
"content": "/* eslint global-require: 0 */\n\nimport createMenuTemplateDarwin from './darwin'\nimport createMenuTemplateLinuxWin from './linux+win'\n\nconst createMenuTemplate = process.platform === 'darwin'\n ? createMenuTemplateDarwin\n : createMenuTemplateLinuxWin\n\nexport { createMenuTemplate }\n"
},
{
"path": "electron/menu/linux+win.js",
"content": "import { shell, BrowserWindow } from 'electron'\nimport { createWindow } from '../window'\nimport checkUpdate from '../update'\nimport {\n menu,\n item,\n separator,\n n,\n toggleDevTools,\n toggleFullscreen,\n setAlwaysOnTop,\n reload,\n close,\n zoom,\n resetZoom,\n toggleOpenInEditor,\n} from './common'\nimport {\n showAboutDialog,\n haveOpenedWindow,\n} from './dialog'\nimport { openConfigFile } from '../config'\nimport { toggleSyncState, isSyncState } from '../sync-state'\n\nconst getWin = () => BrowserWindow.getFocusedWindow()\nconst viewItems = process.env.NODE_ENV === 'developemnt'\n ? [item('Reload Window', 'Alt+CTRL+R', () => reload(getWin()))]\n : []\n\nexport default ({ iconPath }) => [\n menu('RND', [\n item('About', n, () => showAboutDialog(iconPath)),\n item('Check for Updates...', n, () => checkUpdate(iconPath, true)),\n separator,\n item('Stay in Front', n, ({ checked }) => setAlwaysOnTop(getWin(), checked), {\n type: 'checkbox',\n checked: false,\n }),\n ]),\n menu(\n 'Debugger',\n [\n item('New Window', 'Ctrl+T', () => createWindow({ iconPath, isPortSettingRequired: haveOpenedWindow() })),\n item('Enable Open in Editor for Console Log', n, () => toggleOpenInEditor(getWin()), {\n type: 'checkbox',\n checked: false,\n }),\n item('Toggle Device Sync', n, toggleSyncState, {\n type: 'checkbox',\n checked: isSyncState(),\n }),\n item('Open Config File', n, () => openConfigFile()),\n separator,\n item('Close', 'Ctrl+W', () => close(getWin())),\n ],\n 'window',\n ),\n menu('Edit', [\n item('Undo', 'Ctrl+Z', n, { selector: 'undo:' }),\n item('Redo', 'Shift+Ctrl+Z', n, { selector: 'redo:' }),\n separator,\n item('Cut', 'Ctrl+X', n, { selector: 'cut:' }),\n item('Copy', 'Ctrl+C', n, { selector: 'copy:' }),\n item('Paste', 'Ctrl+V', n, { selector: 'paste:' }),\n item('Select All', 'Ctrl+A', n, { selector: 'selectAll:' }),\n ]),\n menu(\n 'View',\n viewItems.concat([\n item('Toggle Full Screen', 'F11', () => toggleFullscreen(getWin())),\n item('Toggle Developer Tools', 'Alt+Ctrl+I', () => toggleDevTools(getWin(), 'chrome')),\n item('Toggle React DevTools', 'Alt+Ctrl+J', () => toggleDevTools(getWin(), 'react')),\n item('Toggle Redux DevTools', 'Alt+Ctrl+K', () => toggleDevTools(getWin(), 'redux')),\n separator,\n item('Zoom In', 'Ctrl+=', () => zoom(getWin(), 1)),\n item('Zoom Out', 'Ctrl+-', () => zoom(getWin(), -1)),\n item('Reset Zoom', 'Ctrl+0', () => resetZoom(getWin())),\n ]),\n ),\n menu('Help', [\n item('Documentation', n, () => shell.openExternal('https://github.com/jhen0409/react-native-debugger/tree/master/docs')),\n item('Issues', n, () => shell.openExternal('https://github.com/jhen0409/react-native-debugger/issues')),\n item('Open Collective', n, () => shell.openExternal('https://opencollective.com/react-native-debugger')),\n ]),\n]\n"
},
{
"path": "electron/sync-state.js",
"content": "import { BrowserWindow } from 'electron'\n\nlet syncState = false\n\nexport const isSyncState = () => syncState\n\n// Take by renderer\nglobal.isSyncState = isSyncState\n\nexport const toggleSyncState = () => {\n syncState = !syncState\n}\n\nexport const sendSyncState = (event, payload) => {\n if (!isSyncState) return\n\n BrowserWindow.getAllWindows()\n .filter((win) => Number(win.webContents.id) !== event.sender.id)\n .forEach((win) => {\n win.webContents.send('sync-state', payload)\n })\n}\n"
},
{
"path": "electron/update.js",
"content": "import { app, dialog, shell } from 'electron'\nimport GhReleases from 'electron-gh-releases'\nimport fetch from 'electron-fetch'\n\nconst repo = 'jhen0409/react-native-debugger'\n\nconst getFeed = () => fetch(`https://raw.githubusercontent.com/${repo}/master/auto_update.json`).then((res) => res.json())\n\nconst showDialog = ({\n icon, buttons, message, detail,\n}) => dialog.showMessageBoxSync({\n type: 'info',\n buttons,\n title: 'React Native Debugger',\n icon,\n message,\n detail,\n})\n\nconst notifyUpdateAvailable = ({ icon, detail }) => {\n const index = showDialog({\n message: 'A newer version is available.',\n buttons: ['Download', 'Later'],\n icon,\n detail,\n })\n return index === 0\n}\n\nconst notifyUpdateDownloaded = ({ icon }) => {\n const index = showDialog({\n message:\n 'The newer version has been downloaded. '\n + 'Please restart the application to apply the update.',\n buttons: ['Restart', 'Later'],\n icon,\n })\n return index === 0\n}\n\nlet checking = false\n\nexport default (icon, notify) => {\n if (checking) return\n\n checking = true\n const updater = new GhReleases({\n repo,\n currentVersion: app.getVersion(),\n })\n\n updater.check(async (err, status) => {\n if (process.platform === 'linux' && err.message === 'This platform is not supported.') {\n err = null; // eslint-disable-line\n status = true; // eslint-disable-line\n }\n if (notify && err) {\n showDialog({ message: err.message, buttons: ['OK'] })\n checking = false\n return\n }\n if (err || !status) {\n checking = false\n return\n }\n const feed = await getFeed()\n const detail = `${feed.name}\\n\\n${feed.notes}`\n if (notify) {\n const open = notifyUpdateAvailable({ icon, detail })\n if (open) shell.openExternal('https://github.com/jhen0409/react-native-debugger/releases')\n } else if (\n process.env.NODE_ENV === 'production'\n && process.platform === 'darwin'\n && notifyUpdateAvailable({ icon, detail })\n ) {\n updater.download()\n console.log('[RNDebugger] Update downloading...')\n }\n checking = false\n })\n\n updater.on('update-downloaded', () => {\n console.log('[RNDebugger] Update downloaded')\n if (notifyUpdateDownloaded({ icon })) {\n updater.install()\n }\n })\n}\n"
},
{
"path": "electron/url-handle/handleURL.js",
"content": "import { app } from 'electron'\nimport net from 'net'\nimport url from 'url'\nimport qs from 'querystring'\nimport fs from 'fs'\nimport * as portfile from './port'\n\nconst filterPaths = (list) => {\n const filteredList = list.filter((dir) => {\n try {\n return fs.lstatSync(dir).isDirectory()\n } catch (e) {\n return false\n }\n })\n if (!filteredList.length) {\n return\n }\n return filteredList\n}\n\nconst resolveHost = (host) => (\n !host || host === 'undefined' || host === 'null' ? 'localhost' : host\n)\n\nexport const parseUrl = (_url) => {\n const route = url.parse(_url)\n if (route.host !== 'set-debugger-loc') return\n const { host, port, projectRoots } = qs.parse(route.query)\n const query = {\n host: resolveHost(host),\n port: Number(port) || 8081,\n projectRoots: filterPaths(Array.isArray(projectRoots) ? projectRoots : [projectRoots]),\n }\n return query\n}\n\nexport const handleURL = async (getWindow, path) => {\n const query = parseUrl(path)\n if (!query) {\n return\n }\n const payload = JSON.stringify(query)\n\n // This env will be get by new debugger window\n process.env.DEBUGGER_SETTING = payload\n const win = await getWindow(query.host, query.port)\n // if we can get the exists window, it will send the IPC event\n if (win) {\n win.webContents.send('set-debugger-loc', payload)\n }\n}\n\nconst listenOpenURL = (getWindow) => app.on('open-url', (e, path) => {\n handleURL(getWindow, path)\n})\n\nconst createHandleURLServer = (getWindow) => net\n .createServer((socket) => {\n socket.setEncoding('utf-8')\n socket.on('data', async (data) => {\n try {\n const obj = JSON.parse(data)\n if (typeof obj.path === 'string') {\n await handleURL(getWindow, obj.path)\n }\n socket.write('success')\n } catch (e) {\n socket.write('fail')\n } finally {\n socket.end()\n }\n })\n })\n .listen(0, '127.0.0.1')\n .on('listening', function server() {\n const { port } = this.address()\n portfile.write(port)\n portfile.watchExists(port)\n process.on('exit', () => portfile.unlink())\n\n console.log(`Starting listen set-debugger-loc request on port ${port}`)\n console.log('Will save port to `$HOME/.rndebugger_port` file')\n })\n\nexport default (getWindow) => {\n // Handle set-debugger-loc for macOS\n // It's can be automatically open the app\n listenOpenURL(getWindow)\n // Handle set-debugger-loc for macOS/Linux/Windows\n createHandleURLServer(getWindow)\n}\n"
},
{
"path": "electron/url-handle/index.js",
"content": "import startListeningHandleURL, { handleURL, parseUrl } from './handleURL'\nimport * as port from './port'\n\nexport {\n startListeningHandleURL, handleURL, parseUrl, port,\n}\n"
},
{
"path": "electron/url-handle/port.js",
"content": "import fs from 'fs'\nimport path from 'path'\n\nconst homeEnv = process.platform === 'win32' ? 'USERPROFILE' : 'HOME'\nconst portFile = path.join(process.env[homeEnv], '.rndebugger_port')\nlet isWatching = false\n\nexport const write = (port) => {\n fs.writeFileSync(portFile, String(port))\n}\n\nexport function read() {\n if (!fs.existsSync(portFile)) return null\n return Number(fs.readFileSync(portFile, 'utf8'))\n}\n\nexport const unlink = () => {\n if (fs.existsSync(portFile)) {\n fs.unlinkSync(portFile)\n }\n}\n\nexport const watchExists = (port) => {\n if (isWatching) return\n isWatching = true\n fs.watchFile(portFile, (curr, prev) => {\n if (curr.mtime !== prev.mtime) write(port)\n })\n}\n"
},
{
"path": "electron/window.js",
"content": "import path from 'path'\nimport {\n BrowserWindow, Menu, globalShortcut, dialog,\n} from 'electron'\nimport Store from 'electron-store'\nimport { enable } from '@electron/remote/main'\nimport autoUpdate from './update'\nimport { catchConsoleLogLink, removeUnecessaryTabs, activeTabs } from './devtools'\nimport { selectRNDebuggerWorkerContext } from '../app/utils/devtools'\nimport { readConfig, filePath as configFile } from './config'\nimport { registerContextMenu } from './context-menu'\n\nconst store = new Store()\n\nconst executeJavaScript = (win, script) => win.webContents.executeJavaScript(script)\n\nexport const checkWindowInfo = (win) => executeJavaScript(win, 'window.checkWindowInfo()')\n\nconst checkIsOpenInEditorEnabled = (win) => executeJavaScript(win, 'window.isOpenInEditorEnabled()')\n\nconst changeMenuItems = (menus) => {\n const rootMenuItems = Menu.getApplicationMenu().items\n Object.entries(menus).forEach(([key, subMenu]) => {\n const rootMenuItem = rootMenuItems.find(({ label }) => label === key)\n if (!rootMenuItem || !rootMenuItem.submenu) return\n\n Object.entries(subMenu).forEach(([subKey, menuSet]) => {\n const menuItem = rootMenuItem.submenu.items.find(\n ({ label }) => label === subKey,\n )\n if (!menuItem) return\n\n Object.assign(menuItem, menuSet)\n })\n })\n}\n\nconst invokeDevMethod = (win, name) => executeJavaScript(\n win,\n `window.invokeDevMethod && window.invokeDevMethod('${name}')`,\n)\n\nconst registerKeyboradShortcut = (win) => {\n const prefix = process.platform === 'darwin' ? 'Command' : 'Ctrl'\n // If another window focused, register a new shortcut\n if (\n globalShortcut.isRegistered(`${prefix}+R`)\n || globalShortcut.isRegistered(`${prefix}+I`)\n ) {\n globalShortcut.unregisterAll()\n }\n globalShortcut.register(`${prefix}+R`, () => invokeDevMethod(win, 'reload'))\n globalShortcut.register(`${prefix}+I`, () => invokeDevMethod(win, 'toggleElementInspector'))\n}\n\nconst unregisterKeyboradShortcut = () => globalShortcut.unregisterAll()\n\nconst registerShortcuts = async (win) => {\n registerKeyboradShortcut(win)\n changeMenuItems({\n Debugger: {\n 'Stay in Front': {\n checked: win.isAlwaysOnTop(),\n },\n 'Enable Open in Editor for Console Log': {\n checked: await checkIsOpenInEditorEnabled(win),\n },\n },\n })\n}\n\nconst minSize = 100\nexport const createWindow = ({ iconPath, isPortSettingRequired, port }) => {\n const { config, isConfigBroken, error } = readConfig()\n\n if (isConfigBroken) {\n dialog.showErrorBox(\n 'Root config error',\n `Parse root config failed, please checkout \\`${configFile}\\`, the error trace:\\n\\n`\n + `${error}\\n\\n`\n + 'RNDebugger will load default config instead. '\n + 'You can click `Debugger` -> `Open Config File` in application menu.',\n )\n }\n\n const winBounds = store.get('winBounds') || {}\n const increasePosition = BrowserWindow.getAllWindows().length * 10 || 0\n const {\n width, height, x = 0, y = 0,\n } = winBounds\n const win = new BrowserWindow({\n ...winBounds,\n width: width && width >= minSize ? width : 1024,\n height: height && height >= minSize ? height : 750,\n minWidth: minSize,\n minHeight: minSize,\n x: x + increasePosition,\n y: y + increasePosition,\n backgroundColor: '#272c37',\n tabbingIdentifier: 'rndebugger',\n webPreferences: {\n contextIsolation: false,\n nodeIntegration: true,\n // experimentalFeatures: true,\n // webSecurity: false,\n // webviewTag: true, // Use this for new inspector in the future\n },\n ...config.windowBounds,\n })\n enable(win.webContents)\n\n const isFirstWindow = BrowserWindow.getAllWindows().length === 1\n\n const { timesJSLoadToRefreshDevTools = -1 } = config\n win.debuggerConfig = {\n port,\n editor: config.editor,\n fontFamily: config.fontFamily,\n defaultReactDevToolsTheme: config.defaultReactDevToolsTheme,\n defaultReactDevToolsPort: config.defaultReactDevToolsPort,\n networkInspect: config.defaultNetworkInspect && 1,\n isPortSettingRequired: isPortSettingRequired && 1,\n timesJSLoadToRefreshDevTools,\n }\n win.loadURL(`file://${path.resolve(__dirname)}/app.html`)\n let unregisterContextMenu\n win.webContents.on('did-finish-load', () => {\n win.webContents.zoomLevel = config.zoomLevel || store.get('zoomLevel', 0)\n win.focus()\n unregisterContextMenu = registerContextMenu(win)\n registerShortcuts(win)\n if (!isPortSettingRequired) win.openDevTools()\n const checkUpdate = config.autoUpdate !== false\n if (checkUpdate && isFirstWindow) {\n autoUpdate(iconPath)\n }\n })\n win.webContents.on('devtools-opened', async () => {\n const { location } = await checkWindowInfo(win)\n activeTabs(win)\n catchConsoleLogLink(win, location.host, location.port)\n if (config.showAllDevToolsTab !== true) {\n removeUnecessaryTabs(win)\n }\n selectRNDebuggerWorkerContext(win)\n })\n win.on('show', () => {\n if (!win.isFocused()) return\n registerShortcuts(win)\n })\n win.on('focus', () => registerShortcuts(win))\n win.on('restore', () => registerShortcuts(win))\n win.on('hide', () => unregisterKeyboradShortcut())\n win.on('blur', () => unregisterKeyboradShortcut())\n win.on('minimize', () => unregisterKeyboradShortcut())\n win.close = async () => {\n unregisterKeyboradShortcut()\n store.set('winBounds', win.getBounds())\n store.set('zoomLevel', win.webContents.zoomLevel)\n await executeJavaScript(\n win,\n 'window.beforeWindowClose && window.beforeWindowClose()',\n )\n win.destroy()\n }\n win.on('close', (event) => {\n event.preventDefault()\n win.close()\n if (unregisterContextMenu) unregisterContextMenu()\n })\n return win\n}\n"
},
{
"path": "examples/.eslintrc",
"content": "{\n \"rules\": {\n \"import/no-extraneous-dependencies\": 0,\n \"import/no-unresolved\": 0\n }\n}\n"
},
{
"path": "examples/test-old-bridge/.gitignore",
"content": "node_modules/\n.expo/\ndist/\nnpm-debug.*\n*.jks\n*.p8\n*.p12\n*.key\n*.mobileprovision\n*.orig.*\nweb-build/\n\n# macOS\n.DS_Store\n\n# Temporary files created by Metro to check the health of the file watcher\n.metro-health-check*\n"
},
{
"path": "examples/test-old-bridge/App.js",
"content": "/* eslint-disable react/style-prop-object */\nimport { StatusBar } from 'expo-status-bar'\nimport React from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport ReduxApp from './examples/redux/App'\nimport ApolloApp from './examples/apollo/App'\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n backgroundColor: '#fff',\n },\n})\n\nexport default function App() {\n return (\n \n \n \n \n \n )\n}\n"
},
{
"path": "examples/test-old-bridge/README.md",
"content": "# test-old-bridge\n\nThis is example created by `npx create-expo-app -t blank@48`, `\"jsEngine\": \"jsc\"` to `app.json`.\n\nThe main purpose is for test functionality of React Native Debugger in old bridge.\n\nCurrently the examples included \n- simple counter example for Redux\n- simple query example for Apollo Client\n"
},
{
"path": "examples/test-old-bridge/app.json",
"content": "{\n \"expo\": {\n \"jsEngine\": \"jsc\",\n \"name\": \"test-old-bridge\",\n \"slug\": \"test-old-bridge\",\n \"version\": \"1.0.0\",\n \"orientation\": \"portrait\",\n \"icon\": \"./assets/icon.png\",\n \"userInterfaceStyle\": \"light\",\n \"splash\": {\n \"image\": \"./assets/splash.png\",\n \"resizeMode\": \"contain\",\n \"backgroundColor\": \"#ffffff\"\n },\n \"assetBundlePatterns\": [\n \"**/*\"\n ],\n \"ios\": {\n \"supportsTablet\": true\n },\n \"android\": {\n \"adaptiveIcon\": {\n \"foregroundImage\": \"./assets/adaptive-icon.png\",\n \"backgroundColor\": \"#ffffff\"\n }\n },\n \"web\": {\n \"favicon\": \"./assets/favicon.png\"\n }\n }\n}\n"
},
{
"path": "examples/test-old-bridge/babel.config.js",
"content": "module.exports = (api) => {\n api.cache(true)\n return {\n presets: ['babel-preset-expo'],\n }\n}\n"
},
{
"path": "examples/test-old-bridge/examples/apollo/App.js",
"content": "import React from 'react'\nimport { StyleSheet, Text, View } from 'react-native'\nimport { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client'\nimport SimpleQuery from './SimpleQuery'\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n justifyContent: 'center',\n alignItems: 'center',\n backgroundColor: '#F5FCFF',\n },\n title: {\n marginBottom: 20,\n fontSize: 25,\n textAlign: 'center',\n fontWeight: 'bold',\n },\n})\n\nconst client = new ApolloClient({\n uri: 'https://spacex-production.up.railway.app/',\n cache: new InMemoryCache(),\n})\n\nexport default function App() {\n return (\n \n \n Apollo Client example\n \n \n \n )\n}\n"
},
{
"path": "examples/test-old-bridge/examples/apollo/SimpleQuery.js",
"content": "import React from 'react'\nimport { StyleSheet, Text, Button } from 'react-native'\nimport { useQuery } from '@apollo/client'\nimport gql from 'graphql-tag'\n\nconst styles = StyleSheet.create({\n text: {\n fontSize: 20,\n textAlign: 'center',\n margin: 10,\n },\n})\n\nconst GET_DATA = gql`\n query ExampleQuery {\n company {\n name\n ceo\n employees\n }\n }\n`\n\nexport default function SimpleQuery() {\n const { loading, error, data, refetch } = useQuery(GET_DATA)\n\n if (loading) return Loading...\n if (error) return Error :({error.message})\n\n return (\n <>\n Company: {data.company.name}\n CEO: {data.company.ceo}\n Employees: {data.company.employees}\n