{"action":"created","issue":{"url":"https://api.github.com/repos/brave/browser-laptop/issues/2716","repository_url":"https://api.github.com/repos/brave/browser-laptop","labels_url":"https://api.github.com/repos/brave/browser-laptop/issues/2716/labels{/name}","comments_url":"https://api.github.com/repos/brave/browser-laptop/issues/2716/comments","events_url":"https://api.github.com/repos/brave/browser-laptop/issues/2716/events","html_url":"https://github.com/brave/browser-laptop/issues/2716","id":167494876,"number":2716,"title":"Using React Devtools extension in Brave?","user":{"login":"willy-b","id":6969859,"avatar_url":"https://avatars.githubusercontent.com/u/6969859?v=3","gravatar_id":"","url":"https://api.github.com/users/willy-b","html_url":"https://github.com/willy-b","followers_url":"https://api.github.com/users/willy-b/followers","following_url":"https://api.github.com/users/willy-b/following{/other_user}","gists_url":"https://api.github.com/users/willy-b/gists{/gist_id}","starred_url":"https://api.github.com/users/willy-b/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/willy-b/subscriptions","organizations_url":"https://api.github.com/users/willy-b/orgs","repos_url":"https://api.github.com/users/willy-b/repos","events_url":"https://api.github.com/users/willy-b/events{/privacy}","received_events_url":"https://api.github.com/users/willy-b/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2016-07-26T00:19:38Z","updated_at":"2016-07-30T08:13:17Z","closed_at":null,"body":"_(Warning: Electron newbie here)_\r\n\r\nDoes anyone have instructions for getting the React Devtools extension working in Brave?\r\n\r\nI followed instructions for installing it in Electron, via ready-made modules and manually, but ran into errors.\r\nThe main error was `electron.remote.BrowserWindow` object apparently missing the `addDevToolsExtension` method (assuming that's a version issue). I also hit Content Security Policy issues (see below).\r\n\r\n**For example,** \r\n### Trying the electron-react-devtools module\r\n\r\nLink: https://www.npmjs.com/package/electron-react-devtools\r\n\r\nSteps:\r\n1) Install electron-react-devtools via npm\r\n```\r\n  npm install --save-dev electron-react-devtools\r\n```\r\n\r\n2) Add electron-react-devtools inject step to a JS file run by electron's renderer thread\r\nIn `js/entry.js`:\r\n```\r\nrequire('electron-react-devtools').inject()\r\n```\r\n\r\n3) Run Brave, open Browser level devtools\r\n4) Try to invoke electron-react-devtools in browser-level console\r\n```\r\n  > require('electron-react-devtools').install()\r\n```\r\n\r\nDesired result:\r\nShould see 'React' tab appear in devtools. \r\n\r\nActual result:\r\nErrors with Content Security Policy and `electron.remote.BrowserWindow` missing the `addDevToolsExtension` method.\r\nSample errors:\r\n  `violates the following Content Security Policy directive: \"script-src 'self' http://localhost:*\"'`\r\n  `Uncaught TypeError: electron.remote.BrowserWindow.addDevToolsExtension is not a function`\r\n\r\nFull error traces:\r\n```\r\n> require('electron-react-devtools').install()\r\nERROR: /home/willy/projs/git/3rd/browser-laptop/node_modules/electron-react-devtools/api.js:18 Installing React DevTools from /home/willy/projs/git/3rd/browser-laptop/node_modules/electron-react-devtools\r\nERROR: /home/willy/projs/git/3rd/browser-laptop/node_modules/electron-react-devtools/build/inject.js:1 Refused to execute inline script because it violates the following Content Security Policy directive: \"script-src 'self' http://localhost:*\". Either the 'unsafe-inline' keyword, a hash ('sha256-twkHaPr6kFDMqbtJwwe7ZP36HfLKyMm/KYaZtjGmK0k='), or a nonce ('nonce-...') is required to enable inline execution.\r\nERROR: (anonymous function) @ /home/willy/projs/git/3rd/browser-laptop/node_modules/electron-react-devtools/build/inject.js:1__webpack_require__ @ /home/willy/projs/git/3rd/browser-laptop/node_modules/electron-react-devtools/build/inject.js:1(anonymous function) @ /home/willy/projs/git/3rd/browser-laptop/node_modules/electron-react-devtools/build/inject.js:1(anonymous function) @ /home/willy/projs/git/3rd/browser-laptop/node_modules/electron-react-devtools/build/inject.js:1Module._compile @ module.js:541Module._extensions..js @ module.js:550Module.load @ module.js:456tryModuleLoad @ module.js:415Module._load @ module.js:407Module.require @ module.js:466require @ internal/module.js:20exports.inject @ /home/willy/projs/git/3rd/browser-laptop/node_modules/electron-react-devtools/api.js:9exports.install @ /home/willy/projs/git/3rd/browser-laptop/node_modules/electron-react-devtools/api.js:19(anonymous function) @ VM238:1\r\nERROR: /home/willy/projs/git/3rd/browser-laptop/node_modules/electron-react-devtools/api.js:21 Uncaught TypeError: electron.remote.BrowserWindow.addDevToolsExtension is not a function(…)exports.install @ /home/willy/projs/git/3rd/browser-laptop/node_modules/electron-react-devtools/api.js:21(anonymous function) @ VM238:1\r\nERROR: /home/willy/projs/git/3rd/browser-laptop/node_modules/electron-react-devtools/build/inject.js:1 Uncaught TypeError: Cannot set property 'prot' of undefined(anonymous function) @ /home/willy/projs/git/3rd/browser-laptop/node_modules/electron-react-devtools/build/inject.js:1(anonymous function) @ /home/willy/projs/git/3rd/browser-laptop/node_modules/portfinder/lib/portfinder.js:138(anonymous function) @ /home/willy/projs/git/3rd/browser-laptop/node_modules/async/lib/async.js:52(anonymous function) @ /home/willy/projs/git/3rd/browser-laptop/node_modules/async/lib/async.js:269(anonymous function) @ /home/willy/projs/git/3rd/browser-laptop/node_modules/async/lib/async.js:44(anonymous function) @ /home/willy/projs/git/3rd/browser-laptop/node_modules/portfinder/lib/portfinder.js:106onListen @ /home/willy/projs/git/3rd/browser-laptop/node_modules/portfinder/lib/portfinder.js:35g @ events.js:286emitNone @ events.js:86emit @ events.js:185emitListeningNT @ net.js:1279_combinedTickCallback @ internal/process/next_tick.js:71_tickCallback @ internal/process/next_tick.js:98\r\n```"},"comment":{"url":"https://api.github.com/repos/brave/browser-laptop/issues/comments/236352459","html_url":"https://github.com/brave/browser-laptop/issues/2716#issuecomment-236352459","issue_url":"https://api.github.com/repos/brave/browser-laptop/issues/2716","id":236352459,"user":{"login":"willy-b","id":6969859,"avatar_url":"https://avatars.githubusercontent.com/u/6969859?v=3","gravatar_id":"","url":"https://api.github.com/users/willy-b","html_url":"https://github.com/willy-b","followers_url":"https://api.github.com/users/willy-b/followers","following_url":"https://api.github.com/users/willy-b/following{/other_user}","gists_url":"https://api.github.com/users/willy-b/gists{/gist_id}","starred_url":"https://api.github.com/users/willy-b/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/willy-b/subscriptions","organizations_url":"https://api.github.com/users/willy-b/orgs","repos_url":"https://api.github.com/users/willy-b/repos","events_url":"https://api.github.com/users/willy-b/events{/privacy}","received_events_url":"https://api.github.com/users/willy-b/received_events","type":"User","site_admin":false},"created_at":"2016-07-30T08:13:17Z","updated_at":"2016-07-30T08:13:17Z","body":"The `BrowserWindow.addDevToolsExtension` functionality was disabled in commit 54e87 in `brave/electron` (https://github.com/brave/electron/commit/54e871e00d36b34cd078da21810bd7b18a7ba299#diff-8d85c651cb0fb8feef2c4694d52da2e3), which adds a return statement early in the `chrome-extension` module.\r\n\r\nThere were a lot of changes in this commit so I can't tell if disabling `BrowserWindow.addDevToolsExtension` was intentional.\r\nDo you want this feature disabled? If it is re-enabled (I can submit PR to `brave/electron` to do so) we can have the full React DevTools.\r\n\r\nThanks!"}}
{"actor":{"display_login":"willy-b"}}