My React app has started running this line out of the blue and interrupting my development. The file is React_devtools_backend.js
debugger;t.apply(void 0,o)};n.__REACT_DEVTOOLS_ORIGINAL_METHOD__=t,// $FlowFixMe property error|warn is not writable.
Any ideas why and how to fix this?
It is a bug in React Dev Tools (version: 4.8.0). You can see the issue here. If you use Firefox and update the extension, probably it is going to be fixed. If you are using Chrome, the update is still pending but you can find a temporary solution in the issue link.
Temporary solution:
You should also be able to go to Components tab, press Settings gear,
add checkbox to Break on Warning, then do this again, and remove the
checkbox as a temporary workaround.
This issue has a momentarily quick fix if you're on Chrome (react-devtools#4.8.0):
Open React-DevTools > Components.
In the upper right corner, click the Settings gear icon.
Go to the Debugging tab.
Check Break on Warnings.
Uncheck Break on Warnings.
Finally, reload the page.
Related
While developing with create-react-app, my browser enters debugger mode on warnings:
It breaks on the source code of react-dev-tools:
// --- 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.
How can I deactivate this behavior?
Go to Chrome Devtools → in the Chrome console, go to Component → Click on Settings → unset Break on Warning. Do the same in Profiler → Settings → unset Break on warning.
#cadoman pointed check and then uncheck to make work for sure.
P.S: Image from https://github.com/facebook/react/issues/19308#issuecomment-656669792
Based on pull request DevTools: Make break-on-warn off by default #19309 it seems it's a bug.
The Break On Warnings box was unchecked for me and it still would break. Removing and readding the extension to force an update fixed it for me.
I don't know of another way to force Chrome to update an extension outside of its regular schedule.
Go to your ReactDev tools in the tab Debugging and disable "Break on Warning".
I think this new behavior started today with this new PR: https://github.com/facebook/react/pull/19048
Chrome has a "BlackBox script" feature which is useful in this case.
Go to Chrome Developer tools -> source tab
Select "react_developer_tools.js" from the left pane
Right-click file and select "Blackbox script"
It's a known issue. A workaround is posted on GitHub: Bug: Unexpected debugger statement in DevTools (solved) #19308
The issue is due to a recent release. A Workaround proposed by the React team is:
Go to Chrome Developer Tools
Click on the Components Tab (React Developer Tools Extension)
Click on the Settings icon (located next to the component search box)
Once modal opens select the Debugging tab
Finally, double click on the Break on Warnings checkbox (check and unchecked)
Make sure at last the Break on Warnings checkbox is unchecked.
Reference: Issue link
I am trying to get my react extension working for local development, but "Components" and "Profiler" is missing in the Chrome developer tools. This only happens for local development, any other production code is displaying the two tabs in the developer tools as expected. I was wondering if this can be resolved somehow? I triple checked if the tabs are hidden on that occasion, and they are not. As said, this only happens for development version. When I click on the extension, I get the following message:
This page is using the development build of React. 🚧
Note that the development build is not suitable for production.
Make sure to use the production build before deployment.
Open the developer tools, and "Components" and "Profiler" tabs will appear to the right.
Based on this information I should have the tabs displayed.
When I go to a production app and click on the React extension, I can see the following displayed:
This page is using the production build of React. ✅
Open the developer tools, and "Components" and "Profiler" tabs will appear to the right.
And I also see those two tabs without a problem.
Any idea why this would happen? I searched for a solution, but did not encounter one. The only thing I found was someone mentioning you need to set the environment variable REACT_APP_ENV. I tried to set this value in the .env file where I defined REACT_APP_ENV='dev' as well as REACT_APP_ENV='development'. It did not resolve the issue, even with application and browser restart.
This happened to me as well. Looks like a bug in Chromium, but a temp solution is:
Change the chrome DevTools theme, only once it is required.
Now open devtools, you find the extension tab in DevTools.
You can again change the theme whatever you want to keep and this will fix your problem.
Check this out:
https://github.com/facebook/react/issues/19002#issuecomment-637462179
Was having the same issue, the Components and Profiler tabs weren't showing up, so I tried changing the theme as suggested by BobTheBuilder, that didn't work, so tried setting the debug levels to Default + Verbose (in addition to the others) in the console and they finally showed up.
The steps that helped me:
Remove React Developer Tools extension
Install React Developer Tools extension
Open a brand new tab containing react app
Open Dev Tools
React Developer Tools should be available
I had the same issue where Components and Profiler tabs were not showing. What worked for me was to open up the DevTools settings and to click the 'Restore defaults and reload' button (under the 'Sync' heading).
The steps that worked for me
Open chrome extensions
Disable the react dev tools extension
Enable the react dev tools extension
Enable Developer mode
Refresh target page
Where steps 1 and 2 are the little slide control at the bottom right of the extension in the extension manager.
Step 4 is the slider in the top right above all the extensions in the manager.
I use create-react-app 16.["react": "^16.8.4", "react-scripts": "^2.1.8"]
I read the blog on profiling react performance by Ben Schwarz using Chrome Dev tools:
https://building.calibreapp.com/debugging-react-performance-with-react-16-and-chrome-devtools-c90698a522ad
He recommends to export your JS with source-maps.
When he does a performance trace, and clicks on a given react component in the User Timing section, specific component information shows in the Bottum-Up section with ** blue links to the source code** on the right hand side. This links don`t show, when I click on React components. When I click on components like for instance Evaluate Script, the blue links on the right hand side show.
Isn`t source mapping supposed to work "out-of-the-box" with create-react-app 16 in development.
I want to source-map only in development using Chrome Dev tools. Source mapping is activated in the Chrome Browser. What am I missing?
Thx in advance
P.S.:Since I haven`t got 10 reputation points I´m not suppose to use screenshots, which in this case made things not quite easy. I hope I managed to explain my problem sufficiently, though.
The Source Files for Debugging will be available under your localhost:3000 in the Chrome devtools.
We always tend to search under webpack://
Changes have been made to the newer versions I beleive
We always tend to search under webpack://
Changes have been made to the newer versions I beleive
Could you check the file
node_modules/react-scripts/config/webpack.config.js
Search there for the sourceMap and sourceMaps, and see if that is ok for you.
You can copy that file like "_original", and then set
sourceMaps: true,
in all ocurrences. After that, completely stop the app, and then start it again.
Is that working now?
To verify which sourceMap is working or not, add the sources to workspaces and check for the green dot:
https://developers.google.com/web/tools/chrome-devtools/workspaces/
I am working on a site: greatlakesecho.org When I try to edit a post, the content just disappears from the visual editor. I am running the latest version of Word Press but this happened on the previous version as well. I am using the Project Largo theme with the site.
The site was recently migrated from to a new host and has gone an overhaul into a responsive design. This first started happening when I changed the character encoding to remove odd symbols from the posts. I was successful in that by changing it to utf16. At this point only older posts that were created before the migration would disappear when I clicked edit. I have since updated to the latest version of Word Press and it happens to every post.
I've already made sure the wp-config has the correct encoding.
It happens with all themes.
Tried deactivating all plugins.
I also see this when enabling debuggin:
WordPress database error: [Table 'greatlak_wp776.wp_itsec_lockouts' doesn't exist]
SELECT lockout_host FROM wp_itsec_lockouts WHERE lockout_active=1 AND lockout_expire_gmt > '2014-04-22 19:52:36' AND lockout_host='35.9.132.246';
WordPress database error: [Table 'greatlak_wp776.wp_itsec_lockouts' doesn't exist]
SELECT lockout_user FROM wp_itsec_lockouts WHERE lockout_active=1 AND lockout_expire_gmt > '2014-04-22 19:52:36' AND lockout_user=93;
edit: Extra Info
Wordpress has this documented on their documentation. It can be found here, of course you will be converting to utf16 instead of utf8. http://codex.wordpress.org/Converting_Database_Character_Sets
Check your wp-config file's encoding, make sure it's set to utf-16
Activate a new theme, see if that still happens. If so, it was a theme issue.
Deactivate all plugins, see if it still happens. If so, reactivate 1 by 1 and see when it happens again.
Also, check your browsers console for any errors
I had to remove the Navis Media Credit plugin manually. I searched through the plugins folder using WinSCP and apparently when I was removing all the plugins using the WordPress admin panel, this one wasn't actually getting removed. This plugin was conflicting with the theme I am using and I learned this by deleting all the plugins and using one of the default WP themes.
It may be a Chrome Extension. Here is what I experienced...
In Chrome - a Wordpress site loads the Add New Post screen which appears to get overwritten - this happens after typing a few characters (not immediately) in the title or body. Updated theme, removed plugins, no change. At one stage noticed a bug in html2canvas.js but now cannot reproduce.
Tested in Firefox, works fine.
Traced to a Chrome Extension - Screen Shader - F.lux for Chrome 1.7.720 - one that removes BLUE from Chrome display (for night work). It probably does use use html2canvas. When it is deactivated, Chrome again behaves normally. Tried with another plugin "Blue Light Filter Guard" - not as well featured - but it does not trigger the bug.
May not be the same as your problem, but try in Firefox and check your Chrome Extensions.
I have a website running on dotnetnuke. However, recently I can't do any action (edit content or page setting) on certain pages (the products subpges in www.midoco.com). Does anybody know why this happen?
What version of DotNetNuke are you on? Check the HOST SETTINGS page to see if you are using the HOSTED Jquery option, if so, try disabling that option.
It is probably a javascript issue, try firing up chrome developer tools (hit F12 in chrome) and check if you have a red X in the bottom right corner. If so, click it and check what causes the issue. I had some similar issues caused by single quotes insted of apostrophes in a language pack and spent a lot of time to find the issue. I just went to one of the pages and see you have an error in /engine1/script.js in your skin.