OS: MacOS Catalina 10.15.5
Browser: Firefox 78.0.2 with React Developer Tools 4.8.0 add-on enabled
IDE: Visual Studio Code 1.46.1
Framework: React
This all of a sudden started happening today. Maybe Firefox updated in the background without me knowing, but one minute this never happened, and now it won't stop happening.
Problem: Whenever I save a local file I am working on that has a React error (could be a missing component prop, or improper syntax), Firefox reloads the page but then directs me to the Debugger DevTools tab, and pauses the page. I then have to navigate back to the Console DevTools tab, and manually reload the page. It's very frustrating.
When the browser re-directs to the Debugger, there is a dialogue on the page saying "Paused on debugger statement". The highlighted debugger code is:
// --- Welcome to debugging with React DevTools ---
// This debugger statement means that you've enabled the "break on warnings" feature.
// Use the browser's Call Stack panel to step out of this override function-
// to where the original warning or error was logged.
// eslint-disable-next-line no-debugger
debugger;t.apply(void 0,o)};n.__REACT_DEVTOOLS_ORIGINAL_METHOD__=t,// $FlowFixMe property error|warn is not writable.
The only way to stop this is to disable the React Developer Tools add-on. I don't know how to disabled the "break on warnings" feature. Any help would be deeply appreciated.
===
Edit: I looked at the React Developer Tools Profiler tab, went to Settings, then Debugging, and noticed that the "Break on warnings" was already unchecked. Still unsure what the solution could be.
It's a bug from the latest React Dev Tools (4.8.0): https://github.com/facebook/react/issues/19308
Workaround is to toggle the Break on Warnings setting on and then off. They've already cut a release (4.8.1) that fixes the problem.
I had the same issue. Toggling the setting on then off again fixed it.
Related
I'm using Chrome. For example I need Component.jsx and put a breakpoint somewhere. I press F12, select Sources tab, press Ctrl+P but all I get is 1.chunk.js, bundle.js and main.chunk.js. It's pretty inconvinient to search for the position in the files. Can someone help me to find a solution?
Have you setup your debugger right?
Assuming you use VSCode, you need to install chrome debugger extension and add vscode debugging configuration to make it work.
VSCode team has put up a nice tutorial here: https://code.visualstudio.com/docs/nodejs/reactjs-tutorial#_debugging-react
I am using Cypress to test a React app.
is there a way to make this warning message in my console go away:
Download the React DevTools for a better development experience: ...
you will note that I see this warning only when running the controlled Chrome instance, not when looking at the same app in the normal Chrome browser. (As well, I do have the React dev tools installed and activated in Chrome so it seems this message is a side effect of the Cypress test-runner)
Add this regex to the DevTools console filter input:
-/React.DevTools/
When I add breakpoints to source code in the Chrome Debugger, it works as expected.
However if I then remove the breakpoint and refresh the page, the breakpoints return. Likewise, if I close and reopen developer tools, the breakpoints return.
The only way that chrome forgets the breakpoint is if I close the tab altogether and open a new tab and reload the url, but as this requires a lengthy authentication process it is not ideal.
This is a react app, and I am using React Developer Tools Chrome Plugin - the breakpoints are placed in the source files not the transpiled code.
I am transpiling using babel via webpack, if it is at all pertinant to the issue.
Does anyone know if there is a solution to this issue - I can Deactivate all My Breakpoints, but they still return on a refesh (and are reactivated).
Thanks
Many times I've faced this problem when a code will generate exception( eg. method not defined in object) it will not show up in the Firefox console. Firefox will simply skip that part of code.
After unable to figure the problem out, I'd need to use Chrome console to see the exception. Or I can wrap code in try-catch to see exception when run in Firefox console
Any solution so that Firefox only will show the exception code without wrapping the code within try-catch where it is happening?
You can visit the debug console directly by opening about:devtools-toolbox?type=extension&id=<extension id> in a new tab, then click the Console tab in the debug console. Any console log (console.log, console.info, etc) will appear there if no filter is specified. Uncaught exceptions will also appear here.
You can find your extension id in the overview of addons, or by supplying one manually in your manifest:
"browser_specific_settings": {
"gecko": {
"id": "addonname#yourdomain.org",
}
}
This is what it looks like for an addon of mine:
You could also use the web-ext tool developed by Mozilla to debug your addons, which will also show console logs, however it is less useful than about:devtools-toolbox because it cannot expand nested objects.
npm install --global web-ext
cd /path/to/your/extension
web-ext run --verbose
I have an qx v2.0.1 app working off the local file system and it runs fine in Firefox v14, but in Chrome v18 it gives me this error:
Uncaught Error: The theme to use is not available: edd.theme.Theme
qx.Class.define.members.initializeMeta.js:108
qx.Class.define.members.mainAbstractGui.js:82
qx.Class.define.members.baseObject.js:141
qx.Class.define.members.mainApplication.js:38
qx.Class.define.statics.readyBaseInit.js:77
qx.Class.define.members.dispatchEventDirect.js:134
wrappedFunctionInterface.js:451
qx.Class.define.members.dispatchEventManager.js:873
qx.Class.define.statics.fireEventRegistration.js:310
qx.Class.define.members.__fireReadyApplication.js:188
qx.Class.define.statics.onScriptLoadedApplication.js:106
qx.$$loader.signalStartupedd.js:159
qx.$$loader.initUrisedd.js:195
I thought I've come across this before and a ./generate.py distclean fixed it, but not this time. Someone else had a similar bug that was fixed:
http://bugzilla.qooxdoo.org/show_bug.cgi?id=1463
Any ideas?
This question is too tricky, and probably involves things like looking at verbose generator output and your job configs, so it is not really suitable for a Q&A site. I suggest you open up a bug for it at the qooxdoo project.
Interestingly enough, after a computer reboot it started working in chrome again. So the chrome clear browser cache/history everything since the beginning of time must not catch everything. So now it's working again...odd.